As we’ve discussed before, Responsive Design allows for a flexible, intuitive, and consistent experience across websites/apps. The quantity of responsively designed products increasing is necessitating an equivalent rise in responsive testing. As with functional testing, we can use automation to address our increased responsive testing needs. We’ve recently added support for the Galen Framework to Awetest, providing a solution for the need of automated responsive testing.
Galen is an Open Source framework, designed specifically for automating responsive testing. The Galen framework allows you to define various design & layout rules across different breakpoints for a given view, and run scripts that can validate these rules simultaneously across multiple windows. By incorporating Galen into Awetest, you have a powerful tool that bolsters your automation repertoire. Lets take a look at how exactly Galen helps us.
The first step in the process of constructing an automated responsive test is defining your responsive breakpoints for Galen. Your responsive breakpoint will define what version of your site a user will see. They are classified by the pixel width of the screen and can be defined a multitude of ways. Here some commonly used breakpoints:
- Full screen desktop website: 1024px
- Tablet browser: 720px
- Mobile browser: 320px
- Image width & dimensions
- Pixel distance between any 2 or more view elements (Icon/Image/text/div)
- Text validation
By mapping the correct layout for your collective elements, you can completely validate a single page by one run of a Galen script.
These test files will be uploaded to your Assets in Awetest, where you can proceed to the fun part – execution. Simply run the job through Awetest as we’ve done before, which will launch your browser sessions at the different breakpoints and validate all the rules we mentioned above. Once your run is complete, you can view the Galen report.
After completing a validation run, Galen will produce a report. Simply navigate to the details of the Job run within Awetest, and download your report. The report allows us to see results from each browser window run. It indicates what passed and failed on any of the windows, allowing you immediately identify where your issue is. Clicking through a window’s results, we can navigate to the failed rules.
If we click on the failed rule, we are shown a screenshot that conveniently highlights the source of our error. This feature provides us a variety of benefits:
- Quickly finding what out what went wrong during your test run
- Conveying what your error/defect is as simply as possible
- Saving manual effort by automatically producing the screenshot
The great thing about open source is the availability; incredible tools are being constructed and updated everyday, and diving in provides a powerful network of testing resources. Galen provides a flexible responsive testing solution that integrates into Awetest with ease.
We’ve attached a video that demonstrates a complete run of a Galen being used for automated responsive testing through Awetest: