Automated Layout Testing using Galen Framework


0.png

A very annoying task as you have to look at your website on a lot of different browsers. We used to perform a manual check on all these browsers at the end of website development, and as a result we get some layout issues and have to find hacks to fix these defects. But what if we could automate layout testing of the website and perform it always in all major browsers?

Sometimes you want to have an early feedback on layout issues. To solve this problem you could have a look at Galen Framework.

What is Responsive Web Design ?

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

What is Galen Framework ?

Galen framework is an open source layout testing tool for software applications, which helps us test the look and feel of the application. The idea behind using Galen is to simplify layout testing where we won’t need to manually test an application for UI based issues. Galen can also be used to automate UI regression.

Currently, Galen is a fully functional testing framework with rich reporting and test management system. It supports both Javascript and Java. It has its own syntax called Galen specs for describing the positioning and alignment of elements on a web page. It uses Selenium to interact with the page objects.

Galen framework is designed to test the responsiveness of an application. It is easy to set up Galen to test the responsiveness of an application for different browsers and for multiple devices. Galen initiates a browser and resizes it to a defined resolution which can be passed as a parameter when writing the tests. It can then test the responsiveness according to the specifications defined.

Pros:

1- Open Source.

2- Easy to install.

3- Error Reporting with screenshots for Pass & Fail.

4- Support functional testing.

Cons:

– Code maintenance is costly when there are lot of UI changes.

How it works ?

1- Galen uses Selenium with elements on page and getting their locations and dimensions

2- It opens a page in a browser, resizes the browser to a specific size, and tests the layout against user-defined specs.

3- Once it sees that something is wrong it’s report the error and makes a screenshot and highlights the misbehaviour element on it.

Galen Features

1- Checking visible text.

2- Integration with Selenium Grid.

3- Color schema testing.

4- Integration with Appium

5- Integration with SauceLa Browser Stack

Install Galen Requirements

1- For Galen you need to have a Java version 1.8 or greater installed. If you don’t have Java you can install it from official website

If you’re using NPM you can just install galen via the following command

npm install -g galenframework-cli

2- That’s it! Now you can check if Galen is successfully install by the following command:

galen -v

The above should print out the installed version of galen:

Galen Framework

Version: 2.3.6

JavaScript executor: Rhino 1.7 release 5 2015 01 29

Note: there is no installer for Windows , But you can add galen.bat script accessible in your command line by add it to your PATH as an environment variable There is a good article explaining how to configure Galen in Windows.

3- Create a new folder for your project with name GalenDemo with the following structure:

The specs file for declaring objects (elements) and .test.js file are the test case

4- In the homepage.gspec file write the following objects that mapping to the elements in the home page

@objects
    header-logo     #header-logo
    header-text     #header h1

Add the sections for the page for example will add a section for the header

= Header =
    header-logo:
        left-of header-text 5 px

5- Now you can run the test from command line

galen check specs/homepage.gspec --url http://testapp.galenframework.com/ --size 1024x768 --htmlreport reports
  

6- Galen will open Firefox driver and run the spec file against the url

7- The result is that the “header-logo” is 22px left of “header-text” instead of 5px , Galen also give you the exact value

= Header =
    header-logo:
->      left-of header-text 5 px
->      :   "header-logo" is 22px left of "header-text" instead of 5px

========================================
----------------------------------------
========================================
Failed tests:
    specs/homepage.gspec

Suite status: FAIL
Total tests: 1
Total failed tests: 1
Total failures: 1
There were failures in galen tests

8- The reports folder will be created in the project folder and you can check the result by click on report.html

9- The results will be displayed as the following images :

When click on the error message a screenshot will displaying

10- We will change the value to be from 5 to 22 px in the validation part

= Header =
    header-logo:
        left-of header-text 5 to 22 px

Run the test again and it will PASS 😉

11- We will start to write our first test script for Galen in homepage.test.js we will add the following code:

// add devices and browsers that you need with sizes

var devices = {
  tablet: {
    deviceName: "mobile",
    size: "500x700"
  },
  desktop: {
    deviceName: "desktop",
    size: "1366x768"
  }
};

var browsers = {
  
  chrome: {
    browserName: "chrome"
  }
};


// run test for all devices and browsers
forAll(devices, function () {
  forAll(browsers, function () {
    test("Test on ${browserName} on ${deviceName}", function (device, browser) {
    var driver = createDriver("http://testapp.galenframework.com/ ", device.size, browser.browserName);

    // Checking layout on the page
    checkLayout(driver, "specs/homepage.gspec", device.deviceName);

    // Quiting the browser
    driver.quit();
    });
  }); 
});

12- And we will add more specs in homepage.gspec file

@objects
    header          #header .middle-wrapper
        logo            img
        caption         h1
    menu            #menu   .middle-wrapper


= Header =
    header:
        height ~69px

        @on desktop
            centered horizontally inside screen

        @on mobile
            inside screen 0px left right

    header.logo:
        inside header 0px left, 8 to 15px top bottom
        width 48px
        height 48px

    header.caption:
        right-of header.logo ~22px
        @on desktop
            text is "Sample Website for Galen Framework"
        @on mobile
            text is "Sample Website"

= Menu =
    menu:
         below header 1 px
         aligned vertically all header

13- And now you can run your test with this command

galen test tests/homepage.test.js --htmlreport reports 

13- The test script will run 2 times

Run test suites in Parallel

galen test tests/homepage.test.js --htmlreport reportss --parallel-tests 2

Galen Java Tests

Also you can use Galen with Java + Maven +TestNG , check this link for more information Galen Java Test

Galen with SauceLabs and BrowserStack

You can perform Automated Layout Testing using Galen Framework on BrowserStack.

Galen with Travis CI

Also I integrated Galen with Travis CI and running the tests on every pull request or every code commit.

This is the GitHub Repository for the code

References

http://galenframework.com/docs/all/

Thank you and Good luck

Happy Testing 🙂

Get Ready to become automation Guru!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.