AUTOMATING UI TESTING WITH
GALEN FRAMEWORK
UI TESTING SUCKS
GALEN FRAMEWORK
- write simple human readable tests
-
test in different sizes
-
test in real devices - Selenium, Sauce Labs
@ mobile, tablet navigation width: 100% of main/width below: main 0px @ desktop navigation width: 300px near: main 0px right
SPECS
Object definition
=======================================
search-panel id search-bar
search-panel-input xpath //div[@id='search-bar']/input[@type='text']
search-panel-button css #search-bar a
=======================================
==================================
menu-item-* css #menu li a
==================================
In this case Galen will find all elements on page and will give them names
menu-item-1
,
menu-item-2
,
menu-item-3
,
menu-item-4
Ranges
# Exact range
width: 100px
# The value between range
width: 50 to 200 px
# Greater than
width: > 40 px
# Less than
width: < 40 px
# Approximate
width: ~ 100 px
width: ~ 95 % of screen/width
height: > 40 % of screen/height
width: 30 to 100 % of viewport/width
TAGS
@ mobile
--------------------------
menu
height: 300 px
@ desktop
--------------------------
menu
height: 40 px
@ Section 1. Header | mobile, tablet
----------------------------------------------------
header
width: 100% of screen/width
height: 100px
@ ^ | desktop
----------------------------------------------------
header
width: 90% of screen/width
height: 50px
Near
textfield
near: button 10px left
Below/Above
caption
above: description 10 to 20 px
description
below: caption 10 to 20 px
Inside
Make sure that the object you compare to has width and height defined
button
inside: container 10 px top left
Aligned
# By top and bottom edges
menu-item-1
aligned horizontally all: menu-item-2
Text
greeting
text is: Welcome user@example.com to our cool website!
text starts: Welcome
text ends: website!
text contains: to our cool
text matches: Welcome .* to our cool website!
Centered inside
button
centered horizontally inside: box
Absent
comments
absent
Visible
comments
visible
Components
=====================================
user-profile-* css .user-profile
=====================================
@ all
--------------------------------------
user-profile-*
component: user-profile.spec
==================================
user-name css .user-name
user-pic css .user-pic
user-age css .user-age
==================================
@ all
---------------------------------
user-pic
inside: parent 10px top left
width: 50px
height: 50px
user-name
inside: parent 10px top
near: user-pic 10px right
user-age
below: user-name 5px
near: user-pic 10px
Color
login-form
color scheme: 10% white, 4 to 5 % black, < 30% #f845b7
Image
menu-item-1
image: file imgs/menu-item-1.png, error 12px
All checks
- absent
- near
- above
- below
- inside
- aligned
- centered
- color scheme
- component
- visible
- text
- on
- width
- height
- contains
- image
TEST SUITE SYNTAX
Single page test
galen check homepage.spec
--url "http://example.com"
--size "640x480"
--javascript "some.js"
--include "mobile,all"
--exclude "toexclude"
--htmlreport "htmlreport-dir"
--testngreport "report/testng.xml"
Reports
Example
Running tests
galen test mytest01.test
--htmlreport "htmlreport-dir"
--testngreport "report/testng.xml"
--parallel-suites 4
--filter "Home page on * device"
- htmlreport - path to folder in which Galen should generate html reports
- testngreport - path to xml file in which Galen should write testng report
- parallel-suites - amount of threads for running tests in parallel
-
recursive - flag which is used in case you want to search for all
.test
files recursively in folder - filter - a filter for a test name
Basic format
Home page on a small mobile device
http://example.com/home 320x600
check homepage.spec --include "mobile,all"
Variables
@@ set domain example.com
Home page on a small mobile device
http://${domain}/home 320x600
check homepage.spec --include "mobile,all" --exclude "nomobile"
Cookies Handling
Homepage on mobile device
http://example.com/ 400x600
cookie "MyFeature1=allowed; path=/"
check homepage.spec --include "all,mobile"
Javascript injection
Popup on Home Page
http://example.com/ 640x480
inject open-popup.js
check homepage-popup.spec
open-popup.js
$("popup").show();
Parameterization
@@ parameterized
| deviceName | tags | size |
| Mobile | mobile | 320x600 |
| Tablet | tablet | 640x480 |
| Desktop | desktop | 1024x800 |
Home page on ${deviceName} device
http://example.com/ ${size}
check homepage.spec --include "${tags}"
- Home page on Mobile device
- Home page on Tablet device
- Home page on Desktop device
Tables
@@ table devices
| deviceName | tags | size |
| Mobile | mobile | 320x600 |
| Tablet | tablet | 640x480 |
| Desktop | desktop | 1024x800 |
@@ parameterized using devices
Home page on ${deviceName} device
http://example.com/ ${size}
check homepage.spec --include "${tags}"
@@ parameterized using devices
Login page on ${deviceName} device
http://example.com/login ${size}
check login.spec --include "${tags}"
SELENIUM
INTEGRATION
SET UP SELENIUM
Download selenium server and IE Driver
Set up a hub (hubConfig.json)
java -jar C:\selenium-grid-node\selenium-server-standalone-2.44.0.jar -role hub -hubConfig C:\selenium-grid-node\hubConfig.json
Set up a node (localNodeConfig.json)
java -Xrs -jar C:\selenium-grid-node\selenium-server-standalone-2.44.0.jar -role node -host %COMPUTERNAME% -nodeConfig C:\selenium-grid-node\localNodeConfig.json -Dwebdriver.chrome.driver="C:\selenium-grid-node\chromedriver.exe" -Dwebdriver.ie.driver="C:\selenium-grid-node\IEDriverServer.exe"
Grid console
http://localhost:4444/grid/console
@@ Set
domain localhost:8000
gridUrl http://localhost:4444/wd/hub
@@ parameterized
| browser | browserName |
| internet explorer | Internet Explorer 11 |
| firefox | Firefox |
| chrome | Chrome |
@@ parameterized
| device | size |
| mobile | 400x600 |
| desktop | 1200x700 |
Home page in ${browserName} browser
selenium grid ${gridUrl} --browser "${browser}" --page "http://${domain}" --size ${size}
check specs/workshop.spec --include "${device}"
WORKSHOP
VTDD
Download binary
Workshop repo
1. HEADER
Start from tag v0.1
Finished v0.2
2. Splash
From v0.2
To v0.3
3. Articles
using component
From v0.3
To v0.4
4. Footer
From v0.4
To v0.5
5. OPENED MENU
JS injection
From v0.5
To v0.6
6. CROSS BROWSER
Launch tests in real browsers
Use these config files
THANKS TO
the creator of the framework
Galen Framework
By Javier Arques
Galen Framework
Automating UI testing with Galen Framework
- 2,213