Responsive Design Testing with Galen Framework?
Galen Framework is automated testing for responsive websites. Galen Framework is an open source layout and functional testing framework for websites, written in Java, to test the look and feel of responsive websites. It has its special language Galen Specs for describing the positioning and alignment of elements on a Web page. It is based on Selenium and executed via Selenium Grid for cross-browser testing.
In case you do not have resources to set up a Selenium Grid you can also run Galen tests with BrowserStack or Sauce Labs. Actually, with Sauce Labs and BrowserStack you can even run your tests against real mobile devices like Android or iPhone so you don’t need to emulate the mobile layout by resizing a browser. Read our latest blogs to know more.
Programming Language Support?
- Basic Syntax
- Java & Selenium Webdriver
How to Adopt Responsive Design Testing Galen Framework?
Prerequisite – To execute Galen the Java version should be 1.8.
NPM based installation: Set up Galen Framework is quite easy. You execute the following command to get it installed via npm. For npm based installation, type in the command –
sudo npm install -g galenframework-cli
If you do not use npm, download the latest Galen Framework archive, extract the package and follow the installation instructions.
Install on OS X and Linux
Download the archive file from the Download Page and extract it in any directory. Now go to the extracted directory of the galen and execute the following command –
To check whether Galen is successfully installed to execute the following command –
The above command will print the installed version of Galen inside your system.
Galen Framework installed, launched in various ways. For example, you can use the check command to launch a quick test of a single page. For this command, you need to give a .gspec file with your layout validations, and afterward, you can invoke it like this –
galen check loginPage.gspec --url http://examples.com --size 1024x768 --include desktop --htmlreport reports
This command will launch a browser and open the specified URL in that specified browser, resize the browser window to mentioned (1024 × 768) pixels and execute all the validations declared in the loginPage.gspec file. Thus, you will get a detailed HTML report.
To configure the Galen, create a project directory and execute the following command inside that directory:galen config.
Create a galen.config file in the project directory containing the configurational parameters for Galen. Now you need to configure the ChromeDriver for Chrome and the GeckoDriver for Firefox. To execute your tests in the headless mode, you can run it using Phantom Js.
To configure the drivers you can use the following syntax –
$.webdriver.gecko.driver=Drivers/geckodriver $.webdriver.chrome.driver=Drivers/chromedriver $.phantomjs.binary.path=Drivers/phantomjs/bin/phantomjs
In the case of the drivers, instead of using the driver executables for Firefox, chrome, and phantomjs, also you can install them in your local device. Since I am utilizing a Mac, I will be using Homebrew to install these drivers.
To execute your tests on Firefox browser, you will require the geckodriver. Geckodriver installed by using brew install geckodriver. This will install the recent stable version of gecko driver in the system.
To execute your tests on Chrome browser, you will require the Chrome driver. Chrome driver installed by using brew install Chrome driver, install the recent stable version of chrome driver in the system.
To execute your tests headlessly, you will require the Phantomjs driver which can be installed in your system using brew install Phantomjs.
Once this is done now you just need to give the path of the driver in your galen.config file. This will look something like this –
$.webdriver.gecko.driver=/usr/local/bin/geckodriver $.webdriver.chrome.driver=/usr/local/bin/chromedriver $.phantomjs.binary.path=/usr/local/bin/phantomjs
How Responsive Design Testing Galen Framework Works?
Galen operates in the following manner –
- Galen will open a page in the browser.
- Resizes the browser to a specifically mentioned size.
- Tests the layouts with GalenSpecs.
Galen specs is the language in which the specifications of responsiveness defined according to different devices. Implementation of Page specifications using Galen Framework –
= Main section = header: height 100px inside screen 0px top width 100% of screen/width menu: height 50 to 60px width 100% of screen/width below header ~ 0px search-button: inside menu 20 to 50px left, 0 to 10px top @on mobile search-button: width 100px @on desktop search-button: width 150px
Benefits of Galen Framework
- A human-readable language with two variants of syntax (basic and advanced Galen Spec Language).
- Detailed HTML-reports.
- Great documentation.
Why Layout and Responsive testing matters?
In the advanced world, there are frequent releases of some new mobile devices and the browsers. So, the probability of a break in layout is more on mobile devices. This increases the tester’s responsibility to confirm that the application will work in most of the devices globally.
When you see a webpage on mobile devices, the design of the site will change. For example, on a mobile device, there is a menu symbol, and when you click that symbol, all the categories or links will be listed. But when you see the same site in desktop, all the categories and links will be listed on the landing page itself.
In a mobile device, there is a break in the layout when the user shifts from portrait view to landscape view.
Based on the various browsers and its versions there are also minor changes in the designs like the design of the drop-down menu.
For a few mobile devices such as in iPhone, the file upload options may not work correctly due to a configuration based on the browsers.
The responsive webpage testing procedure must be designed in such a way to ensure that the website works as expected on various devices and various platforms.
Galen Specs Overview
Galen specs language is very adaptable and gives you the chance to express exactly how you need your website to carry on different devices and different browsers. There are two important parts in page specs file –
Each Galen spec file usually starts with object definition. It is the place where you will give names to page objects and also define the so-called locators – the way for Galen to find an element on the test page. The available locators are –
- id – searches by id for an object in DOM
- CSS – to find objects uses CSS selectors
- XPath – uses XPath expressions
The object definition defined with the keyword @objects and all the objects declared below it. The object definition characterized as follows –
@objects header-logo css div.ss-header-left a img logo header css div.ss-header-container div s-main id main
Object Specs Overview
The object specs consist of the specifications of the page object. In Object specs, certain rules defined for every object such as which object should display inside other objects.
Some of the rules used for Object Specifications as below –
- Below and Above
- Width and Height
- Color scheme
- Multiple objects with same specs
Condition Statements –
- FOR Loop
- For Each Loop
- IF statement
You can consider your object specifications to be an assertion. Object specifications are the validation metrics for the page objects. Based on the object specifications the validation for the visual regression is carried out.
header: height 50px width 375px header-logo: height 33px width 41px
Sections and Tagging
Sections declared with the = symbol in the beginning and at the finish of the line. Likewise in Galen, you can have multiple sections within each other. This will allows you to structure your test code so that it is easier to read the specs.
= Header section = header: height 50px width 375px header-logo: height 33px width 41px
Quite often you have to declare different specs for different conditions (e.g., various devices like mobile, tablet, desktop, etc.). You can specify tags in your spec document, so it is less demanding to deal with your layout testing. You can wrap all your checks inside @on statement like this –
@on mobile header-mobile: height 50px width 375 to 410px @on desktop header-desktop: height 40px width 1024px
Absent Specification Overview
One of the simplest specification in Galen. It does not take any parameters. It is used to check that the element is either absent on the page (in HTML code) or available however not visible (e.g., style display: none)
hamburger: absent Inside
Spec inside verifies that an element is visually inside another element.
site-nav-button: inside site-nav 10px top
Guide to Ranges
The basis for all specs is a so-called “range.” The range is a format of defining limits for any value. With the range, you may express that the expected value should be exactly ‘0’, or greater than ‘0’, less than ‘0’ etc. For instance
- The value between the range width 375 to 400px
- Greater than width > 40 px
- Less than width < 40 px
- Greater than or equals width >= 40 px
- Less than or equals width <= 40 px
- Approximate width ~ 100 px
Disabling a test
A test can be disabled in Galen using the @@ disable annotation.
@@ disabled Homepage http://example.com 640x480 Check homepage.gspec Login page http://example.com/login 640x480 check homepage.gspec
Galen Test Suites
To give more adaptability and maintainability to the users, Galen came up with another simple format for defining the test suites. They are just a set of pages checked with the appropriate test specifications. Aside from this it additionally makes the test execution much smoother.
Once you start thinking to test the responsive design for your web application, you will also look into parameterization. For instance, you want to run your tests against different browsers or different devices. It should be possible by writing a data table and marking the test with “parameterized” special instruction.
Galen offers two ways of reporting –
- Html Reports – gives an excellent overview of all test suites with complete reports, screenshots and highlighted errors.
- Reporting Errors – Generate the Html reports where you can see all your test objects.
- Image Comparison – Compares images and shows differences.
- ScreenShots – Highlight the misaligned elements.
- Testing Reports – They can be utilized for embedding Galen in a CI tool like Jenkins.
Best Practices for Layout and Responsive testing
Testers should analyze all requirements and the analytics and should prepare a list of the priority on devices and browsers that needs to be tested.
- To test the visibility and usability of the elements in the smaller browsers.
- To test the site in the devices used such as iPhone 5,iPhone 6, iPhone7, iPad, and Android devices.
- If the physical/real device is not available, you can create an account in Saucelabs/Browserstack, and you can test your application in the respective virtual devices. Both of the platforms support N number of devices as well as browsers with the various OS.
- Click on each link and check the alignment in both the landscape and portrait views.
- On the desktop device, check the web elements by shrinking and expanding the browser. Please note that some of the elements may disappear as when you switch from desktop view to mobile view. In the mobile devices, test the site by switching from portrait to landscape.
- To verify the hover functionality to ensure that the selected elements get highlighted.
- To verify if the padding is correct. Also, check the images, frames, and text should not collide with border.
- Ensure the ajax requests are loading with loading symbol, else the end user might think the page has stopped responding.
- In the Chrome browser, we have an option to switch the page from desktop view to device view and provide a list of the devices for testing and debugging the responsive design.
Concluding Galen Framework
In conclusion, it’s always more useful to let the automation do the detection work, and people do the final scrutiny without the annoying part of flipping through a lot of images. All methods tend to complement each other.
Testing Responsive web design on different browsers and different devices is a challenge, and furthermore obviously beneficial over the long run. We found that using Galen and Selenium makes the task much more relaxed and results in more maintainable test suites. In this article, we concentrated on using Selenium and Galen to test layout of a web application, including a brief introduction to write and utilize specification documents and tips for quickly testing the app code on various browsers.
Also, prepare test data across multiple environments is a predictable pain point of test automation. Integrating your test automation framework to a database or web services infrastructure enables your test cases to set up required data before running dynamically.
Advanced planning in the following additional regions can reward effort after some time:
Running the tests can take a quite long while, especially to run against different browsers. Map out how many browsers you have to hook up to your Selenium grid to complete tests in a reasonable time.
How useful was this post?