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/

Transcript

1. Watai Web Application Testing Automation In!astructure 1 Matti Schneider @matti_sg
2. Testing 2
4. 3 unit
5. 4 unit
6. 4 unit functional
7. 5 unit functional
8. 5 unit functional integration
9. 6 unit functional integration
11. functionality 7
12. functionality 7 correctness
13. functionality 7 correctness consistency
14. Web Applications 8
16. Toto 9
17. Toto 10
18. Toto 10
27. 13 Selenium
28. 14 Selenium
29. WatiX 14 Selenium
30. 15 Selenium WatiX
31. 16 Selenium WatiX Cucumber
32. 16 Selenium WatiX Cucumber • – • – • –
33. 16 Selenium WatiX Cucumber • – • – • – not maintainable!
34. 17 Watai
35. open-source declarative & DRY WebDriver Node.js Widget Feature Data 18 Watai
36. open-source declarative & DRY WebDriver Node.js Widget Feature Data 18 Watai
37. Widget Feature 19 • — • — • — • — Data
38. Widget Feature 20 • — • — • — • — Data
41. SearchBar 21
42. SearchBar field button 21
43. SearchBar field button Toto 21
44. SearchBar field button Toto search fill click 21
45. SearchBar field button search 22
46. SearchBar field button search 22
47. ZeroClick SearchBar field button search 22
48. header ZeroClick SearchBar field button search 22
49. header ZeroClick SearchBar field button search <div id="zero_click_heading"> 22
50. header ZeroClick SearchBar field button search id : zero_click_heading <div id="zero_click_heading"> 22
51. 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
52. 23 Widgets
53. SearchBar ZeroClick • component model 23 Widgets
54. SearchBar field button ZeroClick header • component model • elements list 23 Widgets
55. SearchBar field button ZeroClick header • component model • elements list • selectors map id : … name : … css : … 23 Widgets
56. SearchBar field button ZeroClick header search • component model • elements list • selectors map • semantic actions id : … name : … css : … fill, click… 23 Widgets
57. 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
58. SearchBar field button search name: … css: … fill, click… Watai Web { Widget 24 Widgets
59. SearchBar field button search name: … css: … fill, click… Watai Web { elements: { Widget 24 Widgets
60. SearchBar search fill, click… Watai Web { elements: { field: { name: 'q' }, button:{ css: input[type=submit] } }, Widget 24 Widgets
61. SearchBar fill, click… Watai Web { elements: { field: { name: 'q' }, button:{ css: input[type=submit] } }, search: function(term) { Widget 24 Widgets
62. SearchBar Watai Web { elements: { field: { name: 'q' }, button:{ css: input[type=submit] } }, search: function(term) { this.field = term; this.field.submit(); } } Widget 24 Widgets
63. { 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
64. Widget Feature 26 • — • — • — • — Data
65. Feature 27 • — • — • — • — Widget Data
66. SearchBar 28
67. SearchBar Toto search 28
69. header ZeroClick 29
70. __ = Toto ? header ZeroClick 29
71. 30 Features
72. • expected behaviour “Looking up an ambiguous term should make a Zero Click Info box appear.” 30 Features
73. SearchBar search • expected behaviour • sequence of actions Toto “Looking up an ambiguous term should make a Zero Click Info box appear.” 30 Features
74. 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
75. 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
76. SearchBar search Toto header ZeroClick “Meanings of Toto” “Looking up an ambiguous term should make a Zero Click Info box appear.” 31 Features
77. SearchBar search Toto header ZeroClick “Meanings of Toto” “Looking up an ambiguous term should make a Zero Click Info box appear.” { 32 Features
78. SearchBar search Toto header ZeroClick “Meanings of Toto” “Looking up an ambiguous term should make a Zero Click Info box appear.” { description: 32 Features
79. SearchBar search Toto header ZeroClick “Meanings of Toto” { description: "Looking up an ambiguous term should make a Zero Click Info box appear.", 32 Features
80. 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
81. 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
82. 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
83. 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
84. “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
85. { 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
86. { 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
87. { 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
88. Feature 34 • — • — • — • — Widget Data
89. Data 35 • — • — • — • — Feature Widget
90. Data 36
91. SearchBar search Data Toto header ZeroClick “Meanings of Toto” 36
92. SearchBar search Data Toto header ZeroClick “Meanings of ” Toto 37
93. SearchBar search Data Toto header ZeroClick “Meanings of ” Toto 37
94. SearchBar search Data header ZeroClick “Meanings of ” term = "Toto" term term 37
95. SearchBar search Data header ZeroClick “Meanings of ” term = "Toto" term term • factorizes values 37
96. SearchBar search Data header ZeroClick “Meanings of ” term = "Toto" term term • factorizes values • increases maintainability 37
97. SearchBar search Data header ZeroClick “Meanings of ” term = "Toto" term term • factorizes values • increases maintainability • allows for import 37
98. term = "Toto" SearchBar search term header ZeroClick “Meanings of term” 38 Data
99. SearchBar search term header ZeroClick “Meanings of term” term = "Toto" 38 Data
100. term = "Toto" term = "Toto" SearchBarData.js 39 Data
101. 40 • — • — • — • — Feature Widget Data
102. 41 • — • — • — • — Feature Widget Data
103. 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
104. { 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
105. { 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
106. { 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:… }
107. { 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:… }
108. 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
109. DuckDuckGo 46 Test suite
110. • plaintext files DuckDuckGo 46 Test suite
111. • plaintext files • easy to version & share DuckDuckGo 46 Test suite
112. • plaintext files • easy to version & share • interpreted by Watai DuckDuckGo 46 Test suite
113. Demo 47
114. 48 Installing
115. • Selenium 48 Installing
116. • Selenium • Node.js > npm install watai > npm install watai 48 Installing
117. • Selenium • Node.js • Watai 48 Installing
118. 49 Documentation
119. • installation • troubleshooting • walkthrough • reference 49 Documentation
120. • installation • troubleshooting • walkthrough • reference 49 Documentation
121. bit.ly/watai 50
122. (homemade) build automation 79% code coverage Promises/A bit.ly/watai 50
123. 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