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!
Moataz Nabil 