Automated Layout Testing Using Galen Framework

Galen Framework

1. Galen framework offers a simple solution for testing page layout

2. It uses Selenium Web Driver for getting element’s position in browser. Galen receives element’s position, width and height. After that, Galen verifies elements relative to each other on the page.

3. It has flexible Java support

4. Galen has its own file format, with the help of which you can describe complex layout

Galen Framework & Java Support

1. Simplest usage of Galen framework is to extend GalenTestNgTestBase class

2. You can pass your own Selenium Web Driver instance to Galen.checkLayout() method

3. Galen can take screenshots of pages, which it verifies4. Galen can export all test reports to html file for demonstrative results

Structure of GSPEC file

Objects definition

Groups definition

Variables definition

Declare section(s)

Declare common

tag ‘*’

Declare necessary

tags

Add web elements

verifications

Add comments, if needed

Structure of GSPEC file

‘@objects’ – keyword for locators definition. Each .gspec file should normally starts with this keyword. There are 3 available locators for describing web element on page: xpath, id and css.

‘= Main section =‘ - section definition. Sections are very useful for understanding the structure of gspec file. There are some callback methods in ValidationListener interface, which connected with section’s events.

‘@on’ – verification filter or tag. If some verifications have conditions, you can mark them with tag and pass it to Galen.checkLayout() method.

Structure of GSPEC file

@objects# Common elementsloginButton xpath //div[@id=‘login’]forgotPassword id uidForgotPasswordLinkcontent css #content div # Desktop elementssignInLink id signInLink

= Main section = # @on tablet_portrait, mobile_landscape, desktop, @on * forgotPassword: inside content

Advanced objects definitionYou can define one or more web elements into a specific group, as shown below:

@objects header css #header menu css #menu content css #content footer css #footer @groups

skeleton_elements header, menu, content, footer

= Skeleton = &skeleton_elements: inside screen 0px left right

Web elements verification. RangesYou can verify the width and height of element as follows:

width 10 px | height 10 pxwidth 50 to 100 px | height 50 to 100 pxwidth > 30 px | height > 30 pxwidth < 40 px | height < 40 pxwidth ~ 10 px | height ~ 10 px

Also, Galen can check relative values by using ‘%’ symbols:width 50 % of screen/width

Web elements verification. Common

There are a lot of keywords for page layout verification, such as: ‘near’, ‘below’, ‘above’, ‘inside’, ‘aligned’, ‘text’, ‘contains’, ‘color-scheme’ and etc.

textfield: right-of button 5 pxabove button 5 to 10 pxnear button 10px left near button 5px bottom left inside containeraligned vertically lefttext ends “galen!" absent

Web elements verification. Variables

Galen provides possibility to use common values for different specs@set

commonHeaderMargin 10 to 20px contentMargin ~ 20px

= Header = header_icon: inside header ${commonHeaderMargin} top left

= Content = article-description: inside main ${contentMargin} left right

Web elements verification. Addition

1. You can also use loops for object groups (e.g. @forEach [&mainframe] as item)

2. You can also create your own verification functions and use them with ‘|’ symbol (e.g. @rule should be squared width 100% of ${objectName}/height)3. You can also create your own JavaScript functions and use them as verification attribute

4. You can also declare conditional checks using JavaScript expressions (e.g. @if $(isVisible(“banner-1”)))

Galen Framework. HtmlBuilder

Galen also provides possibility for saving validation results to external HTML file.

GalenTestInfo test =GalenTestInfo.fromString("Login page on mobile device test");

test.getReport().layout(layoutReport, "check layout on mobile device");

tests.add(test);new HtmlReportBuilder().build(tests,"target/galen-

html-reports");

Galen Framework. HtmlBuilder

Galen Framework

Visit Sperasoft online:

www.sperasoft.comwww.facebook.com/Sperasoft

www.twitter.com/Sperasoft