Galen

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 Framework

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.

Layout Validation

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

These breakpoints will be defined in your config file, where we can set multiple breakpoints to test within. Galen offers their own Basic Syntax making the set up simple, and Javascript for more advanced configuration. These will simulate various screen sizes across different devices, which will be simulated through your browser windows. Within these windows, Galen will be validating a series of rules to ensure that the layout of the website is correct, according to your definition. All of these rules are defined in your ., which utilizes a wide variety of validation criteria to define what your page should look like. After defining your objects, you can write your rules, validating instances such as:

  •  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

Spec File

A rule in the spec file defining proper menu height across two breakpoints

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.

Report

 

GalenReport3

The results of our test run across three different breakpoints.

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.

GalenReportscrenshot

Galen has highlighted the out of place elements as the error source.

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: