Reading Time: <15 minutes

What’s up Guys! Welcome to automationcalling.com

I have been wondering!!! why most of companies prefer automation only on Functionality in either desktop browsers or mobile browsers rather than Automating UI Design Layout, Responsive Site, Color/Font/Alignment verification, UI page and Image comparison. When we say cross browser automation, here we perform end to end test in different browsers compatible to ensure doesn’t break anything , meaning the test automation verifies only functionality of the application rather than identifying flaws in UI related issues.

Tools like Selenium and any license provider, it’s possible to check rgb color, font and related to properties. In my opinion, these tools are not much efficient to verify UI design related properties like Responsive Site, Layout etc., and not provide concrete solution for all UI design challenges.

In reality, it could be either product management or upper management ask questions why your Test Automation doesn’t find alignment issues? although automation progress says 99% :-). It’s really important to understand there are difference between UI Test Automation (Functional) and UI Layout/Responsive Site Automation.

I agree! there are some confusions in understanding what is exactly UI Automation?. In Software IndDustry, the UI Automation terminology mostly indicates Desktop/Mobile browser automation, mostly focus on Functional flow of application for eg., actions like enter key in text field, drag and drop, right click and double clicks etc., playing with GUI components as well as verifying acutal result by comparing expected results like hard coded values, dynamic value with database or Rest API etc.,By performing all these action we can achieve functional/end to end automation in UI side.

On the Other End, have you ever thought testing UI itself?

• is Width and Height of Textbox or any UI object size is correct?
• is logo aligned properly at top left pane?
• is logo size different in Responsive Site?
• All your GUI component showsup correctly in different browsers and devices?
• is your text aligned correctly?
• Are you able to compare image with Pixel by Pixel or compromise with Certain errors?
• Is your left/right or Above/Below object correctly aligned with center object?
• Are you able to verify all your CSS property is correct? when compare with previous releases
• Are you able to play with color scheme?
• Unchanged UI design layout and it’s properties remains same for all releases?
• Is it possible to identify UI design changes in nightly build? to find early feed backs.
• How exactly we can show failures of UI related issues?
• Is it possible to integrate existing JavaScript or Java based framework? instead of developing silo framework for UI automation.

To answering all these questions, today I come up with topic called “Galen Framework” library, end of this page I provide sample framework of UI Layout automation which supports desktop/Mobile browser and SauceLabs, which you can play with that.

Who exactly need to prefer UI Layout Automation?

• Ecommerce/Online Store Site
• Gaming Applications
• Commercial Applications
• Massive customer usage across multiple devices.

Benefits of Galen Framework:

• Easy Integration with Java or Javascript based on project.
• Support and generate In-Build Html report/Heat Map comparison.
• Easy and simple code to compare all responsive site
• Easy integration with Selenium JS/Java and Protractor etc.,
• Great Documentation
• Human readable language with format of Basic and Advance Spec Language.
• Supports in Selenium Grid and Cloud option like Browser stack and SauceLab.
• Layout test cases should be scripted in spec file. Best practice is one spec for one page.

Getting Started:

Galen Framework is a test framework which was originally introduced for testing layout of web-applications in a real browser. Nowadays it became a fully functional testing framework with rich reporting and test management system. It supports both JavaScript and Java tests.

Installation:

Note: Installation can be done different way. This blog is about sample framework integration with Java/Galen/Selenium/SauceLab. Hence, I preferred Maven option.

Maven Support:

<dependency>
    <groupId>com.galenframework</groupId>
    <artifactId>galen-java-support</artifactId>
    <version>2.3.7</version>
</dependency>

Who can use it?:

• UX Engineer
• UI Developer
• UI Tester

Implementing Spec File:

As I  mentioned above, Spec file must be created based on individual pages. Implementation strategy is based on basic and advance and it’s purely dependents on requirements.

To familiarization with spec file scripts: Please visit this page: http://galenframework.com/docs/reference-galen-spec-language-guide/

for eg., Simple Spec file to verify Google Logo part of Selenium test:

Run test and HTML Report:

As part of description in this page http://galenframework.com/docs/reference-java-tests/ Basically, checkLayout Method is important to validate Layout automation by supplying specfile and list of @On Statement.

For eg., you need to supply “desktop” or “Mobile” or both desktop and mobile (in collection – list)

public void verifyLayout(WebDriver driver, String specFile, List deviceType) {
    try {
        layoutReport=Galen.checkLayout(driver, SPECPATH+specFile, deviceType);
    }catch (Exception e)
    {
        e.printStackTrace();
    }
}

In the above examples: I supply selenium driver, specfilename and device type (whether Mobile, Desktop etc.,)

After executing test, it produce the in-build html report with Heat Map comparison. Please refer below image:

Sample Framework Implementation:

Libraries: Selenium+Cucumber JVM+Galen

Sample Feature File Implementation Style:

Technique remain same as part of BDD style. The only idea is loading spec file in feature file. In case any failures in Layout automation both cucumber test runner as well as inbuild HTML report generated by Galen get failed.

Scenario: Verification of Galen Test App page in desktopBrowser
  Given I launch desktop browser with url http://testapp.galenframework.com
  When I load gspec file welcomePage.gspec
  Then Test Info Basic gspecTest with desktop browser and Report Info desktop type is updated

Component	Description
commonutil	Helper class/Methods for Selenium and Galen
driverfactory	Initalizing Webdriver for local and Cloud (SauceLabs)
Step definition	All cucumber feature file step definition implemented here
testsuites	Some samples with Java + TestNG for practice to implement for Hybrid Model
features	Feature files can be added here
specs	Multiple spec file for multiple page with basic scripts

please clone for futher play with framework: https://github.com/automationcalling/uidesignlayoutautomation.git

Note: To play with SauceLab, you need to add your saucelabs username and saucelabs key in your system environment variable. You can try create trial license to achieve this.

Drawbacks and Limitation:

1. Galen doesn’t test everything. It does what  you specify in spec file.
2. Testing with Galen in large application more than 100 of pages it’s difficult to maintain
3. In case DOM changes (not generic works) in different browser, have to maintain different spec for browser specific.
4. Galen support image comparison but you must add jpg/png  file explicitly in your spec.
5. Galen is not proper visual testing tool unlike Applitools.
   1. Galen tests the layout, it first fetches the locations of elements, like left and top and its size. From there, it already knows the boundary box of every element. What it does, it just checks the boundary box and that’s it. That is why Galen framework is not, how you say it, is not like proper visual testing tool
6. There are some CONS when compare with Applitools.

Conclusion:

Galen is a nice tool for Layout and Responsive site automation, This is helpful for UX Designer, UI Developer and Tester to find UI bugs before customer. Galen is one of the best open source tool in the market which works perfect with Selenium Java and other JS Project. If you are looking exact visual testing tool then this is not right for your requirement, however it will support image comparison with pixel that need to be added explicitly in your spec file. To handling large application, you should have best practice and strategy to write customized spec file using Advance technique.

Overall, Galen is awesome tool and really worth to try for your POC and implement part of your project.

References & credits:

http://galenframework.com/

https://joecolantonio.com/testtalks/144-automated-responsive-design-testing-using-galen-ivan-shubin/

Please subscribe to my website for more updates!