Layout Testing with Galen Framework


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

javafx

Database Operations in JavaFX

By Onur Baskirt / Apr 1, 2016 / 56 Comments
Before started this section, please check the first article and learn How to Start JAVAFX! http://www.swtestacademy.com/getting-started-with-javafx/ At first, part of JavaFX tutorial series, we created a sample JavaFX project, designed the draft version of the UI and set up an...
rest assured

REST API Testing with Rest Assured

By Onur Baskirt / Mar 8, 2016 / 32 Comments
Outline In this post, I will explain what is API and API testing, what is the difference between SOAP and REST services, and how to test REST APIs with Rest Assured Library. What is API? API stands for Application Programming...
extentreports

How to Write Effective CSS Locators

By Onur Baskirt / Oct 1, 2017 / 0 Comments
Hi all, in this tutorial, I will describe you how to write effective CSS locators to interrogate web elements for your automation projects. As a rule of thumb, your interrogation strategy should be in below order: First try to use...
extentreports

Selenium-11: Execute JavaScript with JavascriptExecutor

By Onur Baskirt / Jan 27, 2016 / 15 Comments
Outline Sometimes we cannot handle some conditions or problems with Webdriver, web controls don't react well against selenium commands. In this kind of situations, we use Javascript. It is useful for custom synchronizations, hide or show the web elements, change...
javafx

Getting Started with JavaFX

By Onur Baskirt / Mar 25, 2016 / 0 Comments
When I started to work in my current position, one of my task is to do manual operations for campaign products  every week. After the second week, I thought that I have to automate this task using a GUI based...
extentreports

How to Write Smart XPath Locators

By Onur Baskirt / Sep 24, 2017 / 4 Comments
Hi all, in this tutorial, I will describe you how to write smart and non-brittle XPath locators. When we write our test scripts, we generally prefer to use id, name, class, etc. these kinds of locators. However, sometimes we could not...
extentreports

Selenium-1: Quick Start to Automation with Selenium WebDriver & JAVA & JUnit & Maven & IntelliJ

By Onur Baskirt / Sep 8, 2015 / 26 Comments
Outline Selenium Webdriver is the most popular open source web test automation framework across wide range of browsers and platforms. In this tutorial you will learn how to do web test automation with Selenium Webdriver and the related tools. Audience...
page object model

Page Object Model with C#

By Ege Aksoz / Jun 18, 2017 / 8 Comments
In the previous tutorial, we’ve taken the initial steps and entered the world of automated testing. We also wrote our first automated test. From this point on, since we are not just going to write one test, we need to...
extentreports

How to Select a Date From DatePicker Using Selenium

By Onur Baskirt / Aug 13, 2016 / 6 Comments
When you need to automate a airway, hotel, or similar websites you need to deal with Datepickers and some times it is a little bit cumbersome to select a specific date on the Datepicker or calendar.  In this post, I...
extentreports

Selenium Webdriver Performance testing with Jmeter and Selenium Grid

By Ozgur Kaya / Aug 9, 2016 / 2 Comments
In this post, we will complete Selenium Webdriver Performance testing scenario using Jmeter and Selenium Grid. 1- Install Java 7 or later If necessary https://java.com/tr/download/ 2- Download latest Jmeter version 3.0 or higher. http://jmeter.apache.org/download_jmeter.cgi 3- Download Jmeter PluginsManager JAR file and...
By | 2017-02-13T09:08:02+00:00 February 11th, 2017|Test Automation, Visual Testing, Web Automation|2 Comments

About the Author:

Can Yıldırım
I am working as SDET at sahibinden.com and currently dealing with Software Testing and Test Automation. I also post my articles to my blog: http://cyildirim.com

2 Comments

  1. nalini May 4, 2017 at 12:55 am - Reply

    Good info

Leave A Comment