Automated layout testing using Galen Framework

Automated layout testing using Galen Framework

• 1.
  Automated Layout TestingUsing Galen Framework
• 2.
  Galen Framework 1. Galenframework 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 GSPECfile 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 GSPECfile ‘@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 GSPECfile @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 Youcan 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 Galenalso 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 Sperasoftonline: www.sperasoft.com www.facebook.com/Sperasoft www.twitter.com/Sperasoft