web acceptance testing revisited - callista enterprise · web$acceptance$tes-ng$revisited$...

48
Web Acceptance Tes-ng Revisited © 2012 Callista Enterprise | www.callistaenterprise.se 1 Web Acceptance Testing Revisited Björn Beskow| [email protected] | 20120118

Upload: others

Post on 30-May-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  1  

Web  Acceptance  Testing  Revisited  

Björn  Beskow|  [email protected]  |  2012-­‐01-­‐18  

Page 2: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  2  

Testing  Graphical  User  Interfaces  is  ...  

…  still  a  challenge  

Page 3: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Client  Server  era  

3  

Page 4: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  4  

Page 5: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  5  

Page 6: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  6  

Page 7: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  7  

Page 8: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

WWW  

8  

Page 9: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  9  

Client

Server

Page 10: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  10  

Page 11: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  11  

Page 12: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  12  

Page 13: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  13  

Page 14: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  14  

Page 15: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  15  

…  except  for  the  GUI  …  

Page 16: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Web  2.0  

16  

Page 17: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  17  

Page 18: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

“Flickr  deploys  10  times  a  day  -­‐  why  don’t  you?”    

18  

Page 19: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  19  

Page 20: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  20  

Page 21: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Huston,  we  have  a  problem  …  

21  

Page 22: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

 …  and  hence  we  need  yet  some  layers  of  abstraction!  

•  Specifica-ons  

•  DOM  Abstrac-on  

•  Browser  Automa-on  

22  

Page 23: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Selenium:  A  framework  for  Browser  Automation  •  The  Selenium  engine  

executes  tests  directly  in  a  browser,  just  as  real  users  do.  

•  The  Selenium  1.0  test  engine  is  implemented  in  JavaScript,  and  thus  run  in  most  browser  (Internet  Explorer,  Mozilla,  Firefox,  Opera,  Safari  …)  on  most  pla^orms.  

Page 24: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Selenium  +  WebDriver  =  Selenium  2.0  

•  First  produc-on-­‐ready  version  in  July  2011  •  Greatly  enhanced  model  compared  to  Selenium  1.0  – Object-­‐based  API  for  DOM  Interac-on  – Browser  Driver  Implementa-ons  – Advanced  User  Interac-ons    

24  

Page 25: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

At  the  heart  of  Selenium:  Selenese  

Page 26: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Selenium  2.0  Tool  Chain  

•  Selenium  IDE  •  Browser  Drivers    •  Remote  WebDriver    •  Selenium  Server  (Selenium  RC/  WebDriver)    •  Selenium  Grid    

26  

Page 27: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Browser  Drivers  •  Na-ve  implementa-ons  of  the  WebDriver  API  

– Firefox  – Chrome  –  Internet  Explorer  – Opera  – Headless  (HtmlUnit)  –  iOS  – Android  – …  

27  

Page 28: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Selenium  Remote  Driver  

28  

RemoteWebDriver

Page 29: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Selenium  Grid  

29  

Grid Node1 ...

Grid Hub

Optional Machine Boundary

Optional Machine Boundary

Grid Node2 Grid Noden-1 Grid Noden

Page 30: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

DOM  Abstraction:  Geb  

•  Brings  together  – The  power  of  Selenium  /  Web  Driver  – The  elegance  of  JQuery  – The  robustness  of  the  Page  Object  pagern  – The  flexibility  and  pure  joy  of  Groovy  

30  

Page 31: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Navigator  API  

•  JQuery-­‐like  expressions  provide  a  concise  and  effec-ve  way  to  navigate  the  DOM  

$("p", text: contains(”Timecard"))$("input", name: "username").value("bjorn")$("div.message").text()

31  

Page 32: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Page  Objects  

•  Use  proper  object-­‐orienta-on  techniques  to  avoid  brigleness  and  duplica-on  

$("input", name: "username").value("bjorn")$("input", name: "password").value("secret")$("input", name: "submit").click()

32  

Page 33: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Page  Objects  

•  Use  proper  object-­‐orienta-on  techniques  to  avoid  brigleness  and  duplica-on  

page.login("bjorn", "secret")

33  

Page 34: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  34  

Page 35: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  35  

Page 36: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  36  

Page 37: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Geb  Page  deSinition  

class LoginPage extends Page {static url = "/timecard-grails/auth/login”static at = { title == "Login" }static content = { username { $("input", name: "username") } password { $("input", name: "password") } login { $("input", name: "submit") } message(required: false) { $("div.message").text() }}def login(name, passwd) { username.value(name) password.value(passwd) login.click()}

}  

37  

Page 38: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Geb  Page  deSinition:  navigation  

class LoginPage extends Page {

static url = "/timecard-grails/auth/login”static at = { title == "Login" }static content = { username { $("input", name: "username") } password { $("input", name: "password") } login { $("input", name: "submit") } message(required: false) { $("div.message").text() }}def login(name, passwd) { username.value(name) password.value(passwd) login.click()}

}  

38  

Page 39: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Geb  Page  deSinition:  at  predicate  

class LoginPage extends Page {static url = "/timecard-grails/auth/login”

static at = { title == "Login" }static content = { username { $("input", name: "username") } password { $("input", name: "password") } login { $("input", name: "submit") } message(required: false) { $("div.message").text() }}def login(name, passwd) { username.value(name) password.value(passwd) login.click()}

}  

39  

Page 40: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Geb  Page  deSinition:  logical  content  

class LoginPage extends Page {static url = "/timecard-grails/auth/login”static at = { title == "Login" }

static content = { username { $("input", name: "username") } password { $("input", name: "password") } login { $("input", name: "submit") } message(required: false) { $("div.message").text() }}def login(name, passwd) { username.value(name) password.value(passwd) login.click()}

}  

40  

Page 41: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Geb  Page  deSinition:  actions  

class LoginPage extends Page {static url = "/timecard-grails/auth/login”static at = { title == "Login" }static content = { username { $("input", name: "username") } password { $("input", name: "password") } login { $("input", name: "submit") } message(required: false) { $("div.message").text() }}

def login(name, passwd) { username.value(name) password.value(passwd) login.click()}

}  

41  

Page 42: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  42  

Business  people  wants  to  express  required  behaviour,  not  necessarily  write  tests  

SpeciSications  

Page 43: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  43  

Spock  

•  Another  BDD  framework  for  the  Java  pla^orm  

•  Based  on  Groovy  

Page 44: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  44  

Example  Task  Task:  Login  is  required  for  -me  repor-ng    Given  a  user  When  he  navigates  to  the  -me  repor-ng  page  Then  he  has  to  log  in                  

Page 45: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  45  

Example  Task  Task:  Regular  days    Given  a  white-­‐collar  employee  When  he  arrives  at  8:00  and  leaves  at  17:00  Then  his  result  for  that  day  is  0.                  

Page 46: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  

Spock  speciSication  class TimeReportTest extends GebSpec { def "White-collar time reporting, regular day"() {

given: to HomePage registerTime.click() waitFor { at LoginPage } login("bjorn", "secret")expect: at TimeReportPagewhen: arriveAt("08:00") leaveAt("17:00")then: at ResultsPage flex == "0"

}}  

46  

Page 47: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  47  

Demo!  

Page 48: Web Acceptance Testing Revisited - Callista Enterprise · Web$Acceptance$Tes-ng$Revisited$ ©$2012$CallistaEnterprise$|$$ Client$Serverera$ 3

Web  Acceptance  Tes-ng  Revisited   ©  2012  Callista  Enterprise  |  www.callistaenterprise.se  48  

Time  for  Questions!