Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Watai

 Watai

Web Application Testing Automation Infrastructure

Web integration testing today sucks. This session will introduce you to the current state of web testing, its different levels, and will present a new software solution to solve the current limitations.

https://github.com/MattiSG/Watai/

Matti Schneider

October 11, 2012
Tweet

More Decks by Matti Schneider

Other Decks in Programming

Transcript

  1. 3

  2. 7

  3. 9

  4. 11

  5. 11

  6. 12

  7. 12

  8. 12

  9. 12

  10. 12

  11. 13

  12. 21

  13. 21

  14. header ZeroClick SearchBar field button search id : zero_click_heading css

    : #zero_click_heading xpath : //div@id="zero_click_heading" ... <div id="zero_click_heading"> 22
  15. SearchBar field button ZeroClick header • component model • elements

    list • selectors map id : … name : … css : … 23 Widgets
  16. SearchBar field button ZeroClick header search • component model •

    elements list • selectors map • semantic actions id : … name : … css : … fill, click… 23 Widgets
  17. SearchBar field button ZeroClick header search • component model •

    elements list • selectors map • semantic actions • abstraction layer id : … name : … css : … fill, click… Watai Web Widget 23 Widgets
  18. SearchBar field button search name: … css: … fill, click…

    Watai Web { elements: { Widget 24 Widgets
  19. SearchBar search fill, click… Watai Web { elements: { field:

    { name: 'q' }, button:{ css: input[type=submit] } }, Widget 24 Widgets
  20. SearchBar fill, click… Watai Web { elements: { field: {

    name: 'q' }, button:{ css: input[type=submit] } }, search: function(term) { Widget 24 Widgets
  21. SearchBar Watai Web { elements: { field: { name: 'q'

    }, button:{ css: input[type=submit] } }, search: function(term) { this.field = term; this.field.submit(); } } Widget 24 Widgets
  22. { elements: { field: { name: 'q' }, button:{ css:

    input[type=submit] } }, search: function(term) { this.field = term; this.field.submit(); } } { elements: { field: { name: 'q' }, button: { css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } SearchBarWidget.js 25 Widgets
  23. 29

  24. • expected behaviour “Looking up an ambiguous term should make

    a Zero Click Info box appear.” 30 Features
  25. SearchBar search • expected behaviour • sequence of actions Toto

    “Looking up an ambiguous term should make a Zero Click Info box appear.” 30 Features
  26. SearchBar search • expected behaviour • sequence of actions •

    implicit waits Toto “Looking up an ambiguous term should make a Zero Click Info box appear.” 30 Features
  27. SearchBar search • expected behaviour • sequence of actions •

    implicit waits • expected state descriptions Toto header ZeroClick “Meanings of Toto” “Looking up an ambiguous term should make a Zero Click Info box appear.” 30 Features
  28. SearchBar search Toto header ZeroClick “Meanings of Toto” “Looking up

    an ambiguous term should make a Zero Click Info box appear.” 31 Features
  29. SearchBar search Toto header ZeroClick “Meanings of Toto” “Looking up

    an ambiguous term should make a Zero Click Info box appear.” { 32 Features
  30. SearchBar search Toto header ZeroClick “Meanings of Toto” “Looking up

    an ambiguous term should make a Zero Click Info box appear.” { description: 32 Features
  31. SearchBar search Toto header ZeroClick “Meanings of Toto” { description:

    "Looking up an ambiguous term should make a Zero Click Info box appear.", 32 Features
  32. SearchBar search Toto header ZeroClick “Meanings of Toto” { description:

    "Looking up an ambiguous term should make a Zero Click Info box appear.", scenario: [ 32 Features
  33. header ZeroClick “Meanings of Toto” { description: "Looking up an

    ambiguous term should make a Zero Click Info box appear.", scenario: [ SearchBarWidget.search, "Toto", 32 Features
  34. header ZeroClick “Meanings of Toto” { description: "Looking up an

    ambiguous term should make a Zero Click Info box appear.", scenario: [ SearchBarWidget.search, "Toto", 32 Features
  35. header ZeroClick “Meanings of Toto” { description: "Looking up an

    ambiguous term should make a Zero Click Info box appear.", scenario: [ SearchBarWidget.search, "Toto", { 32 Features
  36. “Meanings of Toto” { description: "Looking up an ambiguous term

    should make a Zero Click Info box appear.", scenario: [ SearchBarWidget.search, "Toto", { 'ZeroClickWidget.header': 32 Features
  37. { description: "Looking up an ambiguous term should make a

    Zero Click Info box appear.", scenario: [ SearchBarWidget.search, "Toto", { 'ZeroClickWidget.header': "Meanings of Toto" 32 Features
  38. { description: "Looking up an ambiguous term should make a

    Zero Click Info box appear.", scenario: [ SearchBarWidget.search, "Toto", { 'ZeroClickWidget.header': "Meanings of Toto" } ] } 32 Features
  39. { description: "Looking up an ambiguous term should make a

    Zero Click Info box appear.", scenario: [ SearchBarWidget.search, "Toto", { 'ZeroClickWidget.header': "Meanings of Toto" } ] } { description: "Chercher un mot ambigu devrait ouvrir une boîte zero- click", scenario: [ SearchBarWidget.search, "Toto", { 'ZeroClickWidget.header': "Meanings of Toto" } ] } SearchBarFeature.js 33 Features
  40. SearchBar search Data header ZeroClick “Meanings of ” term =

    "Toto" term term • factorizes values 37
  41. SearchBar search Data header ZeroClick “Meanings of ” term =

    "Toto" term term • factorizes values • increases maintainability 37
  42. SearchBar search Data header ZeroClick “Meanings of ” term =

    "Toto" term term • factorizes values • increases maintainability • allows for import 37
  43. Feature Widget Data term = "Toto" SearchBarData.js { elements: {

    field: { name: 'q' }, button: { css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } SearchBarWidget.js { description: "Chercher un mot ambigu devrait ouvrir une boîte zero- click", scenario: [ SearchBarWidget.search, "Toto", { 'ZeroClickWidget.header': "Meanings of Toto" } ] } SearchBarFeature.js { elements: { field: { name: 'q' }, button: { css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } ZeroClickWidget.js 42
  44. { elements: { field: { name: 'q' }, button: {

    css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } { description: "Chercher un mot ambigu devrait ouvrir une boîte zero- click", scenario: [ SearchBarWidget.search, "Toto", { 'ZeroClickWidget.header': "Meanings of Toto" } ] } term = "Toto" { elements: { field: { name: 'q' }, button: { css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } DuckDuckGo 43
  45. { elements: { field: { name: 'q' }, button: {

    css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } { description: "Chercher un mot ambigu devrait ouvrir une boîte zero- click", scenario: [ SearchBarWidget.search, "Toto", { 'ZeroClickWidget.header': "Meanings of Toto" } ] } term = "Toto" { elements: { field: { name: 'q' }, button: { css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } DuckDuckGo https://duckduckgo.com ? 43
  46. { elements: { field: { name: 'q' }, button: {

    css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } { description: "Chercher un mot ambigu devrait ouvrir une boîte zero- click", scenario: [ SearchBarWidget.search, "Toto", { 'ZeroClickWidget.header': "Meanings of Toto" } ] } term = "Toto" { elements: { field: { name: 'q' }, button: { css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } DuckDuckGo { baseURL: 'https:// duckduckgo.com/', // see all allowed values at http://code.google.com/p/ selenium/wiki/DesiredCapabilities driverCapabilities: { browserName: 'firefox' } } config.js https://duckduckgo.com 44 { baseURL:…, browser:… }
  47. { elements: { field: { name: 'q' }, button: {

    css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } { description: "Chercher un mot ambigu devrait ouvrir une boîte zero- click", scenario: [ SearchBarWidget.search, "Toto", { 'ZeroClickWidget.header': "Meanings of Toto" } ] } term = "Toto" { elements: { field: { name: 'q' }, button: { css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } DuckDuckGo { baseURL: 'https:// duckduckgo.com/', // see all allowed values at http://code.google.com/p/ selenium/wiki/DesiredCapabilities driverCapabilities: { browserName: 'firefox' } } config.js https://duckduckgo.com 44 { baseURL:…, browser:… }
  48. DuckDuckGo { elements: { field: { name: 'q' }, button:

    { css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } { description: "Chercher un mot ambigu devrait ouvrir une boîte zero- click", scenario: [ SearchBarWidget.search, "Toto", { 'ZeroClickWidget.header': "Meanings of Toto" } ] } term = "Toto" { elements: { field: { name: 'q' }, button: { css: input [type=submit] }, search: function(term) { this.field = term; return this.field.submit(); } } { baseURL: 'https:// duckduckgo.com/', // see all allowed values at http://code.google.com/p/ selenium/wiki/DesiredCapabilities driverCapabilities: { browserName: 'firefox' } } config.js DuckDuckGo 45
  49. • plaintext files • easy to version & share •

    interpreted by Watai DuckDuckGo 46 Test suite
  50. Thanks! Questions? • Image credits • From The Noun Project

    • Code: d • Gear: Johan H. W. Basberg • Cursor: Yellow • Desktop computer: The Noun Project • Server: Daniel Campos • Folder, document: Apple • All software icons © their respective owners • DuckDuckGo logo © DuckDuckGo • Thanks • Fabien Massol • Laurent Basset • Caroline Demoulin • Muriel Janel • Hillel Nabedrick • Anouchka Labonne • Nicolas Dupont • Santiago Suarez Ordoñez • SauceLabs 51 Matti Schneider — @matti_sg