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
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
galen -v.
galen check loginPage.gspec --url http://examples.com --size 1024x768 --include desktop --htmlreport reports
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
$.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).
- 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
@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
- FOR Loop
- For Each Loop
- IF statement
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
@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
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 JenkinsIn 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.- Explore more about Building Automated Testing Pipeline with GitLab CI
- Get in Touch for End-End Testing Solutions Management and Security Solutions
