Responsive Design Testing with Galen Framework

Introduction to 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. Programming Language Support?

Basic Syntax
JavaScript Tests
Java & Selenium Webdriver

A key practice for extreme programming; it suggests that the code is developed or changed exclusively by the unit testing. Click to explore about, Test Driven Development Tools

How to adopt Galen Framework?

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.

Manual Installation

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 -


sudo ./install.sh

To check whether Galen is successfully installed to execute the following command -


galen -v.

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.

Configuring Galen

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 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.

In case if the page is not directly accessible, Galen enables you to perform some operations on the website first. As it depends on Selenium, all operations related to typing, clicking, injecting client-side JavaScript can be done very quickly. 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

What are the benefits of Galen Framework?

The benefits of Galen Framework are listed below:

A human-readable language with two variants of syntax (basic and advanced Galen Spec Language).
Opportunity to write tests in different languages (Galen Test Suite Syntax, JavaScript, Java API).
Detailed HTML-reports.
Great documentation.

The process of testing an integrated system to verify that it meets specified requirements. Click to explore about, System Testing Tools and its Best Practices

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.

What is Galen Specs?

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 -

Object definition in Galen Specs

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

What is Object Specs?

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 -

Ranges
Near
Below and Above
Inside
Width and Height
Aligned
Text
Color scheme
Image
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 in Galen Specs

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

What is Absent Specification in Galen Specs?

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 in Galen

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 in Galen

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.

Understanding Parameterization

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 Reporting

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.

Build and Deploy Continuous Delivery Pipeline with Jenkins -From the Article,Setting up Continuous Delivery with Jenkins

In case if you are unfamiliar with Galen Framework, it is a tool for responsive and functional testing and cross-browser layout testing, with its testing language, i.e., Galen Specs. It is based on Selenium WebDriver and additionally has a rich JavaScript API that gives you a chance to work with WebDriver specifically. Because you have control over WebDriver, so you can run your tests in any browser, in the cloud ( BrowserStack, SauceLabs, PerfectoMobile, etc.) or on real mobile devices using Appium.

What are the 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.

Managed services for Enterprises to facilitate Automated Security Alerts, Single Click Deployments and Monitoring Solutions. Click to Talk to our Technology Specialists

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.