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

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


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





WORKSHOP




VTDD


Given a design
iterate through the design parts
(header, splash, ...)

create the spec for each part
then
create the markup and css  that pass the test


Download binary



Workshop repo

Each iteration is a release/tag

 


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


    Ivan Shubin

    the creator of the framework




    Galen Framework

    By Javier Arques

    Galen Framework

    Automating UI testing with Galen Framework

    • 2,041