Galen_Sage_PPT_v01.pptx

© 2018 The Sage Group plc or its licensors. All rights reserved.
Visual Regression
Testing. Galen framework.
Kiran Kumar Shivane
Senior QA Automation Engineer
Kirankumar.Shivane@sage.com

• Visual Testing – what it is?
• Problem - Need of Visual Testing
• Solution - Galen & Overview.
• How to automate tests.
• Demo
• Q&A
Agenda

• Risk of Regression on every release to track UI Issues.
• Approximately 14-19% are UI Defects out of 100%.
• Sage intact UI team reports 10+ Defects on every release
.
• 6 to 10+ major Escalation on every quarter.
• Reduces 100% Manual UI testing efforts.
• Reduces 15% Overall testing efforts
• It is incredibly ‘faster’, ‘flexible’ and ‘pixel-perfect’.
• Significant time gains and the risk of regression reduced
• One method could replace many lines of code in
Selenium
Problem

Functional Automation and Manual Visual Testing
• Automated functional testing tools are poorly suited for finding visual bugs.
• For manual testers, visual testing behaves a lot like this spot-the-difference game.
• It took me about 3 minutes to spot all six. Or you can cheat and look at the answers 

Why can’t func Automation test cover visual issues?
If you used traditional checkpoints in a functional testing tool like Selenium
Webdriver, Cypress, WebdriverIO, or Appium, you’d have to check the following for each of those
21 visual elements:
1.Visible (true/false), Upper-left x,y coordinates, Height, Width, Background color,
21 visual elements x 5 assertions per element = 105 lines of assertion code
Imagine you need to test your app on:
5 operating systems, 5 popular browsers, 2 screen, 10 standard mobile device
“21 combo of browsers X 2 orientations of the ten mobiles (2×10)=20 +18 desktop display
resolutions”
798 Screen Configurations x 100 Screens in-app = 79,800 Screen
Configurations to test

Solution
• Visual testing using Galen framework.
• Checking UI on Multiple environments, screen sizes, OSes,
and browsers etc.,

Cross Browser & Cross Platform

Advantages
• Cross browser testing, Cross Platform, Cross Device testing.
• Easy to Write/Read syntax, Opensource, Integration with Appium.
• Testing internationalization on the website.
• Error Reporting with screenshots for Pass & Fail
• Color scheme testing & Checking visible text.
• Testing relative location of elements in web page.
• Can be integrated with Selenium Grid, Browser Stack, Sauce labs,
Jenkins for CI execution.
• Code maintenance is easy when there are no lot of UI changes.

Value adds ofGalen
Developers
• When developer changes the css, New views are implemented.
• With each check-in of front-end code.
• After unit testing and API testing, and before functional testing
• When dev want to verify bug related to UI is fixed for various
devices
with various resolutions.
Testers
• When QA wants to verify web app layout stays responsive.
• UI Displayed correctly on all kind of devices with various resolution.
• When sprint testing is going on along with Functional Validations.
• Ideally as part of your CI/CD pipeline running in Jenkins.
• When changes happens in UI like text alignment, font family, color,
image size, font size etc. changes.
How often? On days ending with “y”.
🙂

How itworks?
• Describe any layout using special syntax – Spec Language.
• It uses Selenium
• 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

Open-source Tools
• Galen framework widely used Opensource Tool.
• Phantom CSS
Commercial Tools
• Applitools – Used by Sony, SAP, MasterCard.
• Crossbrowsertesting Visual Testing - From Smart Bear
Cost: $849/mo to $1249/mo & More.
Competitive Advantages.

Demo
Integrated with existing ia-selenium framework
Link:
https://intacct.box.com/s/4ep8d73lwjhxwjdvewvcypndx4idllns

Q&A

Thank You

Differences:
1. Arm is Longer.
2. Leg is Moved.
3. Paw is not showing.
4. Stripe is wider.
5. Fence is different.
6. Arm is longer.

Getting Started
Technically
• Define Galen
Specs
• Objects Definition
• Object specs
• Run individual Spec
files
• Inject JavaScript code
• Create Test suite
• Run Test suite

Objects
Definition
@object
s
Header id header
Logo-box css .logo-box
Search-
bar
xpath //input[@class=‘searchBa
r’]
• 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/)

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,

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

Test
Suite
• Grouping Test Specs
• Create Global Variables
• Import Test Suites
• Run Specs on different
browsers
• Run in Selenium Grid
• Parameterization
• Disabling tests

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"

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|

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"

Report
s
• Report for individual Test cases
• Screenshots for each Test case
(Pass/Fail)
• Report for Test suite executed

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.

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.

Reference
s
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/

Galen_Sage_PPT_v01.pptx

Recommended

Recommended

More Related Content

Featured

Featured (20)

Galen_Sage_PPT_v01.pptx