Layout Testing using Galen

Photo by Galen

Application automation for features testing is normal these days but Layout testing seemed always a complex task. So in this article I’ll give you a short intro about how you can achieve layout testing too in a simpler way using Galen.

Galen Framework offers a simple solution for layout testing like test location of objects relatively to each other on page. Using a special syntax and comprehensive rules you can describle any layout you can imagine.

This can also help you in testing responsiveness of an application. As it states:

Galen Framework is designed with responsiveness in mind. It is easy to set up a test for different browser sizes. Galen just opens a browser, resizes it to a defined size and then tests the page according to specifications.

Let’s dive into an example and get idea of it’s usage. Galen can be used with JavaScript or Java. Here in this example I’ll use JavaScript. So in this example, I’ll test the layout of http://galenframework.com/.

Create a galen specs file named homePage.gspec and define layout rules in it

@objects
    galen-logo-image  xpath   //div[@class='navbar-header']//a//img

= Logo Image =
    galen-logo-image:
        visible
        width 20 to 30px
        height 20 to 30px
        inside screen 5 to 15px left

So as you can see the above file content, it has rules to check the galen logo is present in nav-bar, width and height of logo, and it’s left position relative to screen. You can get the available rules from Galen Spec Rules.

Now let’s create the test file named homePage.test.js and use above gspec file to assert the layout rules.

var baseURL = "http://galenframework.com/";

beforeTest(function (testInfo) {
    var driver = createDriver(baseURL,
        "1024x768",
        "chrome");

    session.put("driver", driver);
});

test("Validate Home Page Logo", function(){
    var driver = session.get("driver");
    checkLayout(driver, "homePage.gspec");
});

afterTest(function (testInfo) {
    var driver = session.get("driver");
    driver.quit();
});

As you can see, in beforeTest creating a chrome browser session with defined screen size and then using it in test method where gspec file is passed to checkLayout event of galen API for defined layout rules assertion. You can run this test file using following command:

galen test .\homePage.test.js

and it’s output will be as followed:

You can also generate an html report using following command

galen test .\homePage.test.js --htmlreport reports

and html output report will be as followed:

You can get the full source code from: https://github.com/rizwanbutt314/galen-demo

The purpose of this article is just to get you in touch with this awesome tool Galen which makes your life easier in layout testing.

If you have any questions, please feel free to leave a comment below.