using ‘galen’ and ‘wraith’ automating visual regression · problems in layout testing...
TRANSCRIPT
![Page 1: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/1.jpg)
Automating Visual Regression using ‘Galen’ and ‘Wraith’
Deepshikha Singh| QA Lead | @deeps_qa
![Page 2: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/2.jpg)
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.
![Page 3: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/3.jpg)
Why do we need Wraith?• Difficult to spot• Hard to spot pixel differences with naked eye• Difficult to identify missing element(s) on a page• Time consuming• Can occupy a large amount of time for the QA team• Support for various browsers• Support for responsive tests• Support for mobile and tablets
![Page 4: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/4.jpg)
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.
![Page 5: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/5.jpg)
How does Wraith works? ● Capture Screenshots
○ Built-in capture software○ Install it as a dependency
● Create baseline shots directory○ To compare against
● Compare two pages○ Screenshot comparison
● Provide readable output○ Highlights the differences in specific color○ Outcome as Pass or Fail
![Page 6: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/6.jpg)
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.
![Page 7: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/7.jpg)
Sample web page layout
![Page 8: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/8.jpg)
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
![Page 9: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/9.jpg)
Getting Started with Galen• Define Galen Specs
• Objects Definition• Object specs
• Run individual Spec files• Inject JavaScript code• Create Test suite• Run Test suite
![Page 10: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/10.jpg)
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/)
![Page 11: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/11.jpg)
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
![Page 12: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/12.jpg)
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
![Page 13: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/13.jpg)
Run Individual Spec filegalen 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"
![Page 14: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/14.jpg)
Test Suite• Grouping Test Specs• Create Global Variables• Import Test Suites• Run Specs on different browsers• Run in Selenium Grid• Parameterization• Disabling tests
![Page 15: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/15.jpg)
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}"
![Page 16: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/16.jpg)
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"
![Page 17: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/17.jpg)
Reports• Report for individual Test cases
• Screenshots for each Test case (Pass/Fail)
• Report for Test suite executed
![Page 18: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/18.jpg)
Quick Testing with Wraith● Testing Modes
○ Capture
○ History
○ Spider
● Gallery and Output
○ Generates a diff.png and a data.txt
○ Generates gallery.html cont...
![Page 19: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/19.jpg)
Quick Testing with Wraith
● Hook “before_capture”
○ Supported in Casper mode
○ Allows to test interactive content
![Page 20: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/20.jpg)
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.
![Page 21: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/21.jpg)
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.
![Page 22: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/22.jpg)
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.
![Page 23: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/23.jpg)
ReferencesTutorials
http://mindengine.net/
Documentshttp://galenframework.com/docs/all/
Sample Projecthttp://galenframework.com/docs/tutorial-first-project/
Galen Spec Languagehttp://galenframework.com/docs/reference-galen-spec-language-guide/
![Page 24: using ‘Galen’ and ‘Wraith’ Automating Visual Regression · Problems in Layout Testing •Manual efforts are high. •Possible chances of missing key areas of regression. •Not](https://reader033.vdocument.in/reader033/viewer/2022042403/5f182cde420c2a542c33396b/html5/thumbnails/24.jpg)
Thank You