Test Responsive Design using Galen Framework

test_responsive_galenframework

We have full fledged Selenium scripts for testing our application functionality, but the problem is that these tests may pass even when the layouts are messed up. How do we make sure that the layout is as expected or if the website is responsive? This is where Galen Framework comes in.

Galen Framework validates the responsive design by checking the location of objects relatively to each other on page using a special syntax and rules.

This framework is new for me too, so lets see how to test responsiveness of a web application using Galen Framework.

Features of Galen Framework

How does Galen perform responsive testing?

  1. Open a page in browser
  2. Resize it to specified size
  3. Test the layout according to user-defined specs

Now lets dive in.

Installing Galen

For installing Galen, you need to have the jdk 8, latest versions of nodejs and npm. Install using the below command.

For manual installation, get the archive from download page and extract it and execute the command  sudo ./install.sh . See this article for manual installation in Windows.

After installation, you can confirm it by checking the galen version.

Galen Version

Command line output for galen -v

 

Project Setup

  • Create the following project structure in your workspace.

initial-project-structure

  • We use the specs folder for specification files, tests for tests and pages for page files.

You might be wondering what these are. Lets see them separately in detail.

Specs

The Spec file is a file with ‘gspec’ extension where you mention the expected values for each element using the Galen Spec language. The two main parts of the file are object definitions and object specs.

Object Definitions

This is where you define the elements in the page using their locators(id, CSS and XPath) by the @objects keyword

We will write a test for the layouts of our website http://axatrikx.com. For that, we can define the elements as

Here the term is variable name, second is the locator type and third is the locator(id or css path). XPath is not preferred even though its supported.

Sections and Tags

Sections can be defined using = symbol and tags can be defined using @on notation. Sections are given just for identification and can have values like header, sidebar, content etc. Tags are  mostly used to identify the devices like desktop, tablet etc. We can assign different resolutions for these tags so that during execution, the browser will be resized to that values before test.

SEE ALSO:   How to Handle Alerts and Frames in WebDriver

Lets go into detail on the sections and tags from a spec file.

Lets break it down and focus on Sections first.

Sections are those within = symbol like that in line 1, 11 and 23. Based on the indentation, you can see that the one is line 11 (Logo) is inside Header. You can nest it like that.

This sections is just for identification that make the result more readable.

Now comes the tags. As you can see, there are three – ‘@on desktop’, ‘@on tablet’, ‘@on desktop, tablet’.So all the tests with desktop tag uses the values under desktop tag (similar way for tablet), and ‘@on desktop, tablet’ values are used by both. Big surprise! You can define your own tags. Check their documentation to see more about tags.

Element Values

Now lets focus on the values. You might find that the notation is pretty obvious.

  • Exact values can be given for width or height or any other values
  • A range can be given as in ‘width 640 to 650px‘ so that the test passes for any value between 640 and 650px.
  • inside header 50px left make sure that the element is inside header element and 50px to the left.
  • near sidebar 0px right make sure that the element is near sidebar element and 0px to the right.
  • and so on.

I’m not explaining all the notations as it would be better for you to find it from their documentation.

Check out the complete spec file here which is inside specs folder.

Now that we have the spec file, lets create the tests.

Creating Tests

Running Spec file directly

You can run the spec file directly via command line using the below command. We have to give the url, resolution, spec file and result folder.

Create Simple Test in JavaScript

Tests should be in files with .test.js extenstions. So lets create one in our tests folder.

SEE ALSO:   WebDriver Tutorial 3 : Mastering WebDriver API

The tests are defined using test method where the first argument represents a test name and second is test callback.

  • createDriver method creates the WebDriver object based on the given arguments. The first is the url which will be loaded on the given browser and resized to the provided resolution.
  • checkLayout method runs the test on the given spec file and provided tag. Here it runs for tablet – meaning, it takes the value for elements which are under ‘tablet’ tag.
  • driver.quit() closes the browser and ends the session.

This test file can be run using the command

This will create an html report on the results folder.

Test for various devices and browsers

Now lets define various devices and browsers and perform the tests on them. This is basically the same code as above but loops across the different devices and browsers.

Please note that we can define what ever we need as devices, the only thing that matters is the resolution and the tags we provide for them.

Tests with Functional Operations using GalenPages

In majority of real world scenarios, we may have to perform some functional flows to reach the web page in question (like login or perform some other operation). This can be done in Galen in the same was as in WebDriver. Infact, we will be using Selenium WebDriver itself for the operations.

Lets follow the Page Object Model and create the Page class. Create the file SearchPage.js

  • For each page, we can define the elements as variable and operations as functions.
  • Note how the import of Keys class from Selenium is done
SEE ALSO:   How to Setup Testcases and Assertions in SoapUI

Creating Test Class

Now lets create the test class.

  • We define the devices and browsers just like we did before.
  • The getDriver method initializes the WebDriver object and returns it (similar to what we saw before)
  • Here too, just like we saw before, testOnAllDevices method loops through the devices and browsers to run the tests.
  • AfterTest method closes the driver session
  • Finally the test is performed by making a call to the testOnAllDevices method in which the SearchPage object is used.

You can learn more about GalenPages from their documentation. To be honest, I haven’t gone through the entire document, but once we start using it, we definitely have to.

Execution Report

Galen Framework produces a really useful reports by default. I have intentionally failed one of the tests to show you guys the reporting structure.

Main Report Page

Once you drill down, you get this

Detailed Report

As you can see, the error is explained in simple English. Also it provides a Heat Map showing the screenshot with each element.

Heat Map

You can see each element highlighted and named (header, logo etc).

Hope you found this article useful. You can find this project in my github account. Let me know if you are planning to use this framework in the comments below.

Follow this site on Facebook and Twitter to get latest updates or subscribe to the weekly newsletter.

Automation Testing Tutorials, Tips, Solutions & more once a week


You may also like...

9 Responses

  1. Syam Sasi says:

    Galen can be tie with appium to use in mobile devices also. 🙂

  2. This is awesome–I agree that testing layouts is sometimes overlooked, and then it requires a lot of manual effort to go through and eyeball it. Great work!

    Have you thought about wrapping the logic in this framework, with Cucumber? Seems like having something readable that more people can contribute to would make this really powerful.

  3. Hi Amol,

    Really nice to see your post on Galen framework. I have seen this long back but I would try this again with your steps. I will also try this is mobile devices because I have some requirement in my org to check the layout in Android and IOS devices. Looking forward for more galen post. Cheers

  4. Shanti says:

    Do you have examples in Java?

  5. niko says:

    Nice tutorial…!
    Can you write same one using Java pls?

    Brgs
    Niko

  6. Saurabh says:

    Hey, Thanks for the post..!! Even I am facing the same issue with my Selenium Framework designed in my project, will definitely try this in my project now.

  7. rahul rana says:

    Can you do this please using selenium java ??
    step by step framework…

Leave a Reply

Your email address will not be published. Required fields are marked *