Galen Framework

AUTOMATING UI TESTING WITH

GALEN FRAMEWORK

JAVIER ARQUES

Softonic Workshop 2014

UI TESTING SUCKS

manually

comparing screenshots

What about RWD?

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

screen/viewport

    width: ~ 95 % of screen/width
    height: > 40 % of screen/height
    width: 30 to 100 % of viewport/width

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

horizontally top/bottom /all

vertically left/right/all

# 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

horizontally/vertically/all

button
    centered horizontally inside: box

Absent

comments
    absent

Visible

comments
    visible

Components

=====================================
user-profile-*  css   .user-profile
=====================================

@ all 
--------------------------------------

user-profile-*
    component: user-profile.spec

Important! In component spec file you also have to specify all tags as Galen also filters specs in it. If you don’t specify tags and use “include” filter from command line then those checks in component spec file will not be picked up


==================================
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

(like a for)

@@ 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}"

generates ...

Home page on Mobile device
Home page on Tablet device
Home page on Desktop device

Tables

reuse parameterized tests

@@ 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

Download Chrome 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}"