Responsive Web Design Testing Using Selenium
Selenium is often used to test responsive web design. Here, we cover why and how.
Why Responsive UI Automation Testing Is Important
Responsive UI automation testing is an important part of responsive web design. Manually testing across platforms with the UX/performance/visual end-goal in mind is simply not an option.
The factors of responsive web design are:
- Consistent user experience (UX) and display across platforms (mobile, desktop, tablet, etc.).
- Easy maintenance of the product — write once, deploy anywhere concept.
- Cost savings due to specific dev and test skill set and tooling used across the RWD SDLC.
Source: https://confengine.com/selenium-conf-2016/proposal/2275/automating-the-responsive-web-design-testing
What You Need For Responsive UI Automation Testing
Responsive UI automation testing should ensure a good user experience and better quality. But there's a lot that it needs to cover.
For starters, consider the following questions:
- Does the application look okay (visually)?
- Are there any bugs due to variation in screen size?
- Is the site optimized for mobile/tablet/laptop?
- How is the image size and quality (this impacts UX and performance/load time)?
- How do the font size and type look across platforms?
- Are the navigations straightforward (UX/usability wise)?
- Is there selective content display, and does it work?
- Does the website perform consistently across browsers (IE/Safari/Edge/Chrome)?
- Does the RWD site meet the accessibility guidelines?
[Related Blog: 3 Tips For Responsive Web Design Testing]
Responsive Web Design Testing Using Selenium
One tool to consider for responsive web design testing is Selenium.
Selenium is the de-facto test automation tool for standard and responsive websites. While Selenium is powerful, you'll need complementary tools, too.
Let’s list a few important requirements that will complement Selenium, using either open-source tools or products.
Galen test framework is a great add-on for Selenium. It is especially helpful when targeting RWD testing:
- It fully supports Selenium-Grid.
- It provides cross-platform insights. This is through its ability to test the location of objects relative to each other on the page using a special syntax and comprehensive rule set.
But that's not all you need in a responsive testing tool.
What You Need in a Responsive Testing Tool
So, what do you need in a responsive testing tool — that Selenium can't do?
- Visual validation.
- Environment-based testing.
- Accessibility compliance.
- Quality analysis.
1. Visual Validations
Selenium can't do visual validations.
This is where tools like Perfecto and Applitools come into play. They complement Selenium. You can use visual validation within Perfecto using Applitools Eyes to visually test the Geico.com RWD site.
2. Environment Condition Testing
Responsive sites are aimed to be used by almost any target platform in the market. This includes smartphones and tablets. So, it is important to realize that these platforms are highly sensitive to varying conditions.
That's why you need to include environment condition testing. This includes things like:
- Incoming events.
- Background apps.
- Location services.
- Changing network conditions.
This can be the difference between a successful and engaging RWD and a bad one.
The cube below represents a test coverage matrix.
At its base, it focuses on the:
- Test cases and test data (e.g., TDD).
- Target platforms (mobile, desktop, etc.).
- Personas that represent the environment characteristics as mentioned above (network, location, apps, etc.).
3. Accessibility Compliance
Accessibility compliance is another important thing to look for in a responsive testing tool. Most organizations are struggling with such testing and, in most cases, they are running such tests manually.
Considering the number of platforms teams need to cover as part of responsive testing, adding manual into the mix is a bad practice. It blocks velocity.
For that purpose, there is a very useful tool called WAVE, that allows teams to build their accessibility test steps on top of their selenium suite.
Here's a working example of the WAVE tool on top of Selenium. You can reuse this for your responsive site and quite easily gain value and kick-start your accessibility automation branch.
You'll get a report that highlights the accessibility issues that the tool (WAVE) detected on your page/s. The 1st visual is within the Perfecto lab in the cloud. The 2nd one (Geico.com) is through the simple web site of WAVE.
4. Quality Analysis
Responsive testing covers so many platforms. It's impossible to evaluate each failure, compare the results across platforms, and figure out how to fix them.
Selenium-based reports — e.g., executed through testNG — are not as insightful when it comes to quality analysis at scale.
That's why Perfecto implemented its DigitalZoom™. This is a tag-based reporting framework. It allows test automation practitioners to put structure into the test code. So, at the end of each cycle, teams can easily see a dashboard, drill down, and carry out a fast root cause analysis.
Get Responsive Web Testing Tools
Responsive web design is important. And to get there, you'll need responsive web testing tools. You can go far in responsive web design testing using Selenium. But you'll still face some challenges.
That's why you need Perfecto to solve the challenges you face with Selenium.
With Perfecto, you can:
- Automate more tests.
- Apply real user conditions to your tests.
- Scale testing without sacrificing speed.
Give it a try for free today.
