Speaker: Soumyajit Basu, Deepshikha Singh Responsive web design is all about crafting sites that provide an optimal viewing and interaction experience across different devices. This becomes all the more important in the light of Google boosting the ratings of sites that are mobile friendly if the search was made from a mobile device. This has the net effect of penalizing sites that are not mobile friendly. In this session, we will discuss the challenges in testing responsive websites, and how to overcome those by using the tools available online. We are going to take a closer look at Galen, and how it can automate responsive web design testing. Why Galen? Galen is an open source framework built for responsive websites. It provides the feasibility to test the various pages on screen sizes and browsers. The test and spec files can be written in plain English which makes it easier for the business people to understand and contribute. This can also be used as a guide for the UI developers where they build the layout based on the spec files agreed by the business. Who's This For? - Web Developers - UI/UX developers - Testers  What's In It For You? -Understanding the nuances of Responsive Web Design - Knowing the variety of tools used to test responsive websites - How to approach Responsive Web Design testing - What is Galen and how to use it - Hands-on demo of Galen So the session slides and other webinars or Test Automation: http://srijan.net/webinar/automating-visual-regression-using-galen

1. Automating Visual Regression
using ‘Galen’
Soumyajit Basu | QA-L2 | @SoumyajitBasu19
Deepshikha Singh| QA Lead | @shikha140791
#SrijanWW | @srijan

2. #SrijanWW |
@srijan
Problems in Layout Testing
• Manual efforts are high.
• Possible chances of missing key areas of regression.
• Not possible to validate regressions in every kind of devices.

3. #SrijanWW |
@srijan
Why Galen Framework ?
• Layout Testing made easier.
• Leveraging browser capabilities to measure responsiveness.
• Reduces manual effort of validating responsiveness in multiple
devices.
• Helps in validating visual features across different browsers.

4. #SrijanWW |
@srijan
Pros and Cons with Galen
• Pros:
• Open Source.
• Easy to install.
• Error Reporting with screenshots for Pass & Fail.
• Easy to Write/Read syntax.
• Multiple Browsers support.
• Supports Functional Testing.
• Cons:
• Lack of support for Test Editor.
• Code maintenance is costly when there are lot of UI changes.

5. #SrijanWW |
@srijan
Sample web page layout

6. #SrijanWW |
@srijan
How it works?
• Describe any layout using special syntax – Spec Language.
• It uses Selenium3.0
• For interacting with elements on page and getting their locations and
dimensions.
• Once it sees that something is wrong
• Reports the error
• Makes a screenshot and highlights the misbehaving element on it.
• How it Runs?
• Open a page in browser
• Resizes it to specified size
• Test the layout according to user-defined specs

7. #SrijanWW |
@srijan
Getting Started with Galen
• Define Galen Specs
• Objects Definition
• Object specs
• Run individual Spec files
• Inject JavaScript code
• Create Test suite
• Run Test suite

8. #SrijanWW |
@srijan
Objects Definition
@objects
Header id header
Logo-box css .logo-box
Search-bar xpath //input[@class=‘searchBar’]
• Indentation is 1 to 8 spaces but not tab.
• xpath is not preferable unless css cannot be used.
• Syntax for Object definition depends on the Galen Framework
version. ( Ref: http://galenframework.com/docs/specslang-2.0-difference/)

9. #SrijanWW |
@srijan
Object Specs
=Test Global Header=
@ on desktop
Header:
height 40px
width 900px
centered horizontally inside screen
@ on mobile, desktop
Logo-box:
css color is “rgba(51, 51, 51, 1)”
css background-color is “rgba(120, 190, 32, 1)”
Search-bar:
below: header 0px

10. #SrijanWW |
@srijan
Object Specs ( cont.…)• Object Definition
• http://galenframework.com/docs/reference-galen-spec-language-guide/#Objectdefinition
• Multiple objects definition
• http://galenframework.com/docs/reference-galen-spec-language-
guide/#Multipleobjectsdefinition
• Object Groups
• http://galenframework.com/docs/reference-galen-spec-language-guide/#ObjectGroups
• Many more:
• Tagging and Sections
• Variables
• Conditional checks ( If, Else)
• Loops ( For, ForEach)
• Element locations relative to other elements
• http://galenframework.com/docs/reference-galen-spec-language-guide/#SpecsReference

11. #SrijanWW |
@srijan
Run Individual Spec file
galen check homepage.gspec
--url "http://example.com"
--size "640x480"
--javascript "some.js"
--include "mobile,all"
--exclude "toexclude"
--htmlreport "htmlreport-dir"
--testngreport "testng-report.xml"
--jsonreport "jsonreport-dir"
--junitreport "junit-report.xml“
Example:
galen check specs/galen.spec --url "http://www.example.com" --size "1366x768" --include
"desktop" --htmlreport "reports"

12. #SrijanWW |
@srijan
Test Suite
• Grouping Test Specs
• Create Global Variables
• Import Test Suites
• Run Specs on different browsers
• Run in Selenium Grid
• Parameterization
• Disabling tests

13. #SrijanWW |
@srijan
Test Suite Syntax@@ set
domain http://www.example.com
@@table devices
@@parameterized using devices
Home page on ${device} device
selenium chrome ${domain} ${size}
check specs/galen.spec --include "${tags}"
|Device| |Tags| |Size|
|Mobile| |Mobile| |400x600|
|Tablet| |Tablet| |720x480|
|Desktop| |Desktop| |1364x800|

14. #SrijanWW |
@srijan
Run Test Suite
• galen test mytest01.test
--htmlreport "htmlreport-dir"
--testngreport "report/testng.xml"
--jsonreport "jsonreport-dir"
--junitreport "junit-report.xml"
--parallel-tests 4
--filter "Home page on * device“
• Example:
galen test tests/galen.test --htmlreport "reports"

15. #SrijanWW |
@srijan
Reports
• Report for individual Test cases
• Screenshots for each Test case (Pass/Fail)
• Report for Test suite executed

16. #SrijanWW |
@srijan
Capabilities of Galen
• Testing relative location of elements in web page.
• Checking visible text.
• Integration with Selenium Grid.
• Inject JavaScript into code.
• Color scheme testing.
• Integration with Appium.
• Can be integrated with Browser Stack, Sauce labs.

17. #SrijanWW |
@srijan
Additional Features
• Creating Page Dump
• Creates information about all test objects on page with image
samples.
• Image Comparison
• Java API
• JavaScript API
• Galen Extras
• Advanced expressions which extends Galen specs language.

18. #SrijanWW |
@srijan
Installation
• System Requirements:
• Java 1.7 or higher.
• Text Editor.
• Drivers for Respective browsers.
• Galen Framework binary
• http://galenframework.com/download/
• Add Galen folder to “PATH” environment variable.

19. #SrijanWW |
@srijan
References
Tutorials
http://mindengine.net/
Documents
http://galenframework.com/docs/all/
Sample Project
http://galenframework.com/docs/tutorial-first-project/
Galen Spec Language
http://galenframework.com/docs/reference-galen-spec-language-
guide/

20. #SrijanWW |
@srijan
Thank You