Galen is a layout testing framework developed by Ivan Shubin. It is an open-source project that you can support (https://github.com/galenframework/galen ).

  • It is an automated layout and responsive testing framework.
  • Tests locations of objects relatively to each other on the page.
  • Runs in Selenium Grid. (SauceLabs & BrowserStack)
    You can test responsive websites on different mobile devices.
  • Supports Parallel Testing
    Thus, tests run faster and we save time.
  • Responsive Design Tests are easy with Galen.
    Opens -> Resizes -> Tests with given specifications.
  • Galen has an own DSL which specifies the constraints about the layout design.

Programming Language Support?

  • Basic Syntax
  • JavaScript Tests
  • Java & Selenium Webdriver

Galen Reporting

  • Error Reporting
    Generates Html reports where you can see all your test objects.
  • ScreenShots
    Highlights the misaligned elements.
  • Image Comparison
    Compares images and shows differences

Galen Example with JAVA & Webdriver

Note: You can find source code of the sample project at below page:
https://github.com/swtestacademy/galenswtestacademy

Step-1: Add Galen Maven Dependency to the pom.xml

Step-2: Create a Selenium Maven Test Project

Create an empty test class as shown below:

Resize the browser for 1200×800 resolution and go to swtestacademy.com:

In order to check the layout, we need to use LayoutReport class and instantiate a layoutReport object and assign it to Galen.checkout(param1, param2, param3). Here Galen.checkout function has three parameters:

param1 = webdriver instance (it is our driver object)

param2 = .gspec file

param3 = it is a tag for a specific layout

Above code will generate an HTML report based on homepage.gspec file. You can find this report under tartget/ directory and test code should be like that:

Now, you have to create a Galen Specification (.gspec) file under resources folder to describe your website’s layout and rules. If you want to do image comparison, you should also add baseline image under this folder. Under the “target” folder we will generate test reports.

Step-3: Write a Galen Spec File

This gspec (Galen Spec) fileis for swtestacademy.com’s home page and it consists of many controls and checks such as:

  • Alignment control
  • Image comparison
  • Below check
  • Above check

@On Mening:

Quite often you need to declare different specs for different conditions (e.g. various devices like mobile, tablet, desktop etc.). You can specify tags in your spec file so that it is easier to manage your layout testing. You can wrap all your checks inside @on statement like this:

In case your specs apply to all of the tags you can express that by using * symbol:

You can also combine multiple tags using comma-separated tag notation

Image Comparison:

As for image comparison – it is applied differently. Instead of comparing the complete page screenshot you can choose which specific element you would like to compare. And for each image comparison you can tune the algorithm with different settings (e.g. color tolerance, error rate etc.) and custom image filters (e.g. blur, saturation, quantinize, denoise). If you want to know more you can watch the video where it is  explained how to prepare individual image samples and configure the image comparison for elements with noise background.
Ref: https://www.youtube.com/watch?v=bheFQfEGR6U

Step-4: HTML Reporting

When you run the code,

1- If there is a image comparison error, it will highlight it as follows:

2- Also, when we click the “Showimage comparison” link, it shows the mismatches:

3- If there is a layout error, it will highlight it as shown below:

4- Also, we can see the elements heat-map as follows:

5- Successful HTML report will look like this:

Thanks.
-Can