APACHE SLING & FRIENDS TECH MEETUP

BERLIN, 25-27 SEPTEMBER 2017

Responsive Website Testing with Galen and Selenium

Andres Pegam, pro!vision GmbH
About the Speaker

▪ pro!vision since 2008

▪ AEM dev, QE dev
▪ Galenium lead

Andres Pegam

https://www.pro-vision.de

2
The History

3
The History of Galenium

Selenium
(2011)

Galenium
(2017)

Galen
(2013)

4
The History of Galenium

Many projects
Volkswagen Bentley AMG Others

Brand DBS .COM CC Brand …

5
The History of Galenium

Many developers
Dirk
Martin Wehner Andres Pegam Others
Tschentscher

Multi-
invented Open
Selenium threaded Galen Maven
the name sourced on …
integration WebDriver integration integration
“Galenium” GitHub
handling

6
The Challenge

7
The Challenge

Regression test
• Development needed • Not enough
• Content • Several manual testers
• Upgrade iterations as • Not enough
bugs are fixed time
New version of Resources are
website scarce

8
The Players

9
The Players

Java Galen

Maven Galenium

TestNG Selenium

10
Galen

11
Galen - Intro

▪ Layout oriented specifications

▪ Constraints, Image Comparison
▪ Uses Selenium to drive browsers
▪ Interaction in JS with interface to Selenium
▪ Still relatively unknown
▪ Web: http://galenframework.com

12
Galen - Basics

Objects Specs Suites

Test cases
Via CSS Constraints
based on
selectors for objects
specs

13
Galen - Examples

Example Object Definitions:

nav-item-
content logo navigation
*

div.content img#logo div ul.nav div ul.nav li

14
Galen - Examples

Example Specs:
content logo navigation nav-item-*
aligned
below: left of: contains: nav-
horizontally all:
navigation navigation item-*
logo

width: 100% width: 100%

width of width: 120px width of
viewport viewport

15
Galen - Outro

More Galen Features

• Image • Ranges • Control
Comparison • Tagging loops
• JS tests • Groups • Switches
• Variables • Object • Custom
• Warnings Corrections rules

16
Galenium

17
Galenium - Technologies

Technologies Maven
TestNG
Selenium
Galen
ExtentReports
18
Galenium - Parts

Galenium Context Selectors

• Access data without inheritance • Define objects
• Thread safety • Use in Galen and Selenium

The Parts
Differences and Sampling Reporting
• Image Comparison • Test case centric
• Text Comparison • Logging and Tagging

19
Galenium - Context

Test report
Verification strategy

Test name
Assertion

Galenium Custom
Web driver
Context values

threadsafe

20
Galenium – Differences and Sampling

Browser

User Size

Differences
Count Element

Index Page

21
Galenium – Differences and Sampling

Differences file path example:

Browser
Size ./Browser/Size/Element.png
Firefox Element
1440
Chrome Stage ./firefox/1440/stage.png
480
Stage ./chrome/480/stage.png

22
Galenium – Differences and Sampling

WWW
Sample Verification

Expected Actual

23
Galenium - Reporting

▪ ExtentReports 2.0
▪ Specialized test reporting
▪ Can tag test cases
▪ Open Source
▪ Integrated via SLF logback

24
Galenium - Selectors

Element
name

Very central
Selector
concept!
CSS
string

25
Galenium - Selectors

By Locator

Selector

26
Galenium - Process

Galenium process
Input Test Output

•Objects •Functional •Galen Report

•Testcases •Layout •ExtentReport
•Galen Specs •Sampling •TestNG Report
•Sample Data •New Sample
Data

27
Demo

28
Playground Session

Today 15:30 till 18:00

UI and Testing

29
References

▪ Demo project
https://github.com/adaptto/2017-responsive-website-testing-galen-selenium
▪ Galenium Website
http://qa.wcm.io/galenium/index.html
▪ Galen Framework
http://galenframework.com/
▪ Selenium
http://www.seleniumhq.org/

30
Questions or Lunch?

31