Responsive web development requires detailed attention when incorporating testing practices; the same (hopefully) code is intended to render on many screen sizes and operating systems/versions. In addition, HTML5 functionality may assume access to local sensors to drive a richer and streamlined experience, for example, automatic location detection, further complicating the responsive web test strategy. The testing matrix becomes sizable, while the time-to-test shrinks from increasing competitive pressure and the transition to agile.
In this article I’ll show how to conduct multi-platform parallel testing when focusing on responsive web development, using Geico’s responsive website as an example. In addition to a standard functional test, I will add the ability to validate the responsiveness of the site, as well as leverage Applitools‘ Selenium APIs to ensure proper rendering across different screen sizes. There’s a code sample to complement this article: here.
- In Eclipse, create a new project based on the Perfecto Selenium template (ensure you have the latest plugin)
- Convert this project to Maven, then TestNG, and add TestNG class. Make sure to generate BeforeTest, AfterTest and BeforeSuite functions. Also make sure to select tests to run in parallel when configuring TestNG.
- Add one or more @tests to your java code. In my project it’s in GeicoRWDTest.java. For now focus on the functional aspect of things.
- Fun step #1, platform selection: fill TestNG.XML with the platforms you want to test on. I recommend using device characteristics (OS, version etc.) and avoid device IDs. You can add as many as you want, including browsers, as long as your licenses allow. If you don’t know which devices/browsers to test on, use our digital test coverage index. Platform coverage is key when testing responsive websites.
- At this point your POM.xml is missing a few parts. Best to compare it with the one in the code sample.
- Last piece before the first run: add environment variables to your test