Introduction to Galen FrameworkGalen 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
- 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 -
If you do not use npm, download the latest Galen Framework archive, extract the package and follow the installation instructions.
sudo npm install -g galenframework-cli
Manual InstallationInstall 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 -
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.
galen check loginPage.gspec --url http://examples.com --size 1024x768 --include desktop --htmlreport reports
Configuring GalenTo 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 -
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=Drivers/geckodriver $.webdriver.chrome.driver=Drivers/chromedriver $.phantomjs.binary.path=Drivers/phantomjs/bin/phantomjs
$.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.
= 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).
- 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 SpecsEach 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
@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 -
- Below and Above
- Width and Height
- Color scheme
- Multiple objects with same specs
- FOR Loop
- For Each Loop
- IF statement
header: height 50px width 375px header-logo: height 33px width 41px
Sections and Tagging in Galen SpecsSections 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.
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 -
= Header section = header: height 50px width 375px header-logo: height 33px width 41px
@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)
Spec inside verifies that an element is visually inside another element.
hamburger: absent Inside
site-nav-button: inside site-nav 10px top
Guide to Ranges in GalenThe 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 GalenA 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 SuitesTo 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 ParameterizationOnce 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 ReportingGalen 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.
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.
Concluding Galen FrameworkIn 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.
- Explore more about Building Automated Testing Pipeline with GitLab CI
- Get in Touch for End-End Testing Solutions Management and Security Solutions