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.

--

--

--

A Python developer with 5 years of broad expertise in Django, Flask, JavaScript, Back-end Development, and web scraping/automation areas.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Introduction to Terraform

Managing Pod configuration using ConfigMaps and Secrets in Kubernetes

Good to be bad

Configuring Reverse  Proxy and update it’s configuration  file automatically on each time new…

Dagger, but for 3 year olds — Part 2

How To Power Down Your Data Center

[Leetcode] Insert Interval

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rizwan Butt

Rizwan Butt

A Python developer with 5 years of broad expertise in Django, Flask, JavaScript, Back-end Development, and web scraping/automation areas.

More from Medium

How SAML 2.0 Authentication works

Deploy Cloud Management Gateway as a Virtual Machine Set in Configuration Manager 2111— wildcard…

High Availability Framework to adopt for Failure and Disaster Recovery | Kuberneteslab

CPU Scheduling Process