Automated Layout testing using Galen framework

Sperasoft workshop presentation 2016: Automated Layout testing using Galen framework

Transcript

1. Automated Layout Testing Using Galen Framework
2. 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
3. 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 verifies 4. Galen can export all test reports to html file for demonstrative results
4. 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
5. 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.
6. Structure of GSPEC file @objects # Common elements loginButton xpath //div[@id=‘login’] forgotPassword id uidForgotPasswordLink content css #content div # Desktop elements signInLink id signInLink = Main section = # @on tablet_portrait, mobile_landscape, desktop, @on * forgotPassword: inside content
7. Advanced objects definition You 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
8. Web elements verification. Ranges You can verify the width and height of element as follows: width 10 px | height 10 px width 50 to 100 px | height 50 to 100 px width > 30 px | height > 30 px width < 40 px | height < 40 px width ~ 10 px | height ~ 10 px Also, Galen can check relative values by using ‘%’ symbols: width 50 % of screen/width
9. 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 px above button 5 to 10 px near button 10px left near button 5px bottom left inside container aligned vertically left text ends “galen!" absent
10. 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
11. 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”)))
12. 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");
13. Galen Framework. HtmlBuilder
14. Galen Framework Visit Sperasoft online: www.sperasoft.com www.facebook.com/Sperasoft www.twitter.com/Sperasoft