Acceptance Testing of Web UI
3 likes4,672 views
This document discusses acceptance testing of web UIs using Selenium WebDriver, Thucydides and Groovy. It recommends developing automated acceptance tests using a page object model with steps classes to make tests more readable and reusable. JavaScript object proxies are also proposed to simplify interacting with page elements implemented in JavaScript. Tests should be mapped to user stories and acceptance criteria to ensure the right functionality is validated.
![groovy vs java
getSelectedRowColumns()
[«RE: defect ...», «Andrii Shapovalov», «Wed Oct 13:59:04 ...»]](https://image.slidesharecdn.com/acceptancetestingofwebcomponents-final-121123121610-phpapp01/85/Acceptance-Testing-of-Web-UI-31-320.jpg)
Acceptance Testing of Web UI
- 1. ACCEPTANCE testing of web ui using webdriver, thucydides and groovy story volodymyr tsukur // follow me : twitter.com/flushdia or email to [email protected]
- 2. team & tech lead @ partner @ vladimir tsukur 10+ years dev experience
- 3. BASED ON REAL PRODUCT DEV
- 4. App #1. Media logger
- 6. COMMON UI
- 7. TEAMS media logger journalist COre / COMMON UI editor producer
- 8. CUSTOMERS OF CORE UI media logger journalist COre / COMMON UI editor producer
- 9. APPS RELEASE 6 months FEATUREs 4.5 months 1 2 3 4 5 6 7 8 9 10 11 12 1.5 months REGRESSION
- 10. WHAT’s IMPORTANT FOR CORE? DELIVER FREQUENTLY DELIVER STABLE COMPONENTS
- 11. CORE DELIVERY EVERY TWo WEEKS 1 2 3 4 5 6 7 8 9 10 11 12
- 12. COMPLEXITIES REQUIREMENTS NOT ALWAYS DETAILED * NOT ENOUGH FOCUS ON AUTOMATION FROM THE BEGINNING OF THE PROJECT TESTERS NOT fluent in automation, NEED ASSISTANCE
- 13. AS A RESULT ... LONG MANUAL WRONG STUFF TESTING CYCLES DELIVERED * MISSED BUGS APPS TEAMS SLOWED DOWN
- 14. WE CAN DO BETTER! TEAM
- 16. STEP 1: discuss user story QA PO DEV Acceptance criteria
- 17. STEPS 2 & 3: distill and develop QA automated Acceptance tests DEV Acceptance FEATURE criteria IMPLEMENTATION (driven by unit and integration tests)
- 18. STEP 4: demo automated Acceptance tests PO DONE! approval FEATURE IMPLEMENTATION
- 19. important: developers help qa with technical stuff
- 20. important: customer plays the game customer dev team
- 21. ENFORCED BY dod STORY NOT RESOLVED IF automated acceptance testing is not DONE
- 22. INITIALLy SLOWED DOWN but then accelerated again! iteration #n iteration #n+1 ... iteration #n+M ...
- 23. benefits * early requirements less bugs clarification and common understanding more APPS TEAMS automation not delayed
- 24. not used in prototyping
- 25. technical stuff
- 26. tooling testng
- 27. WHY ? «... Selenium is a suite of tools to automate web browsers across many platforms ...»
- 28. WHY ? «... tool that let’s you use WebDriver-based tests to write more flexible and more reusable WebDriver-based tests, and also to generate documentation about your acceptance tests ...»
- 29. WHY testng ? WHY not ? * more flexible listener ecosystem * * project-specific testng extensions already available
- 30. why groovy? dynamic, compact syntax jvm-compatible powerful processing primitives no-brainer for javists
- 31. groovy vs java getSelectedRowColumns() [«RE: defect ...», «Andrii Shapovalov», «Wed Oct 13:59:04 ...»]
- 32. getSelectedRowColumns() java
- 33. getSelectedRowColumns() groovy
- 35. getSelectedRowColumns() groovy dynamic types easy collection processing closures use variables in string literals implicit return statement ‘public’ visibility is the default
- 36. layered architecture tests steps page objects 1. 2. 3. webdriver ...
- 37. example USER story As an asset list user I want to rename asset so that the name of the asset corresponds to its content
- 38. acceptance criteria * i can do in-place editing of the single asset * I can enter edit mode using keyboard shortcuts * i can submit new name and see the change right away * i can abort RENAMING while in edit mode and see that the name stays intact
- 39. acceptance tests
- 40. do first things first!
- 41. our first test Asset list view should enter edit mode when user presses and should accept changes when user presses while in edit mode
- 42. our first test
- 43. test steps injected automatically
- 44. test steps
- 45. test steps
- 46. test steps
- 47. test steps
- 48. test steps
- 49. test steps
- 50. test steps
- 51. test steps
- 52. test steps state is recorded when step is called
- 53. asset navigation steps page object
- 54. asset navigation steps * high-level and readable api free from webdriver specifics
- 55. asset navigation steps page object * high-level and readable api free from webdriver specifics * interact with page object(s)
- 56. asset navigation steps * high-level and readable api free from webdriver specifics * interact with page object(s) * reused between tests
- 59. story / feature mapping
- 60. test report
- 61. test report
- 64. what we like steps mapping to features and stories reporting with screenshots utilities for webdriver
- 65. what we lack of testng support no dynamic page fragments direct safari support
- 66. page objects
- 67. componentize your UI domain model
- 68. composite views TABS asset list view TAB
- 69. keep page object api high-level
- 70. minimum-to-no use of webdriver api in page object api minimal exposure of 1 internals api is strictly domain 2 focused
- 71. fluency
- 72. locating page objects how to find required component among multiple instances (e.g. «projects»)?
- 73. @Findby with default search context does not fit because it has whole- page context use loadable component or «custom loadable component»
- 74. locating page objects + create page object with domain-specific arguments + use builder.init to wire-up elements
- 75. locating page objects @findby is in the context of root element builder locates root element and optionally sets it to a field
- 76. graphene page fragments in scope of @root
- 77. ‘tools’ project QA QA Media logger JOURNALIST QA QA page objects + steps + editor framework producer
- 78. Delivery: + page object web component steps object
- 80. ideally tests are not aware of implementation details, e.g. JS APIs present on the page ... but use of these APIs may significantly simplify development of ui tests
- 81. how to use js in groovy / java?
- 82. webdriver’s execute script return / pass dom elements only, other objects are serialized to string
- 83. how to easily map js objects to java runtime? how to simplify java-to- javascript interop without explicit calls to #executescript?
- 84. let’s invent js object proxy factory TEAM
- 85. simple proxy
- 86. simple proxy
- 87. proxy from external source $root/javascriptobject.js search by convention
- 90. chaining
- 91. mapping to extjs objects
- 93. extjs grid interop associated with grid component
- 94. js proxies in page objects page objects may be bound to JS proxy by interface js proxy serves as javascript logic adapter
- 95. js proxies in page objects bound automatically by method return type 1:1 mapping between page object and js proxy
- 96. js proxies good part map by interface, abstract class or through fully dynamic proxy link external js source supports field access and call chaining
- 97. very powerful if you know how to use it
- 98. js proxies beware! performance impact do not overuse hide behind page objects to keep reusability
- 99. special credit to http://www.vladstudio.com THANKS. FOR YOUR ATTENTION [email protected] https://twitter.com/flushdia
- 100. references http://www.extremeprogramming.org/rules/functionaltests.html http://seleniumhq.org/ http://code.google.com/p/selenium/ http://thucydides-webtests.com/ http://thucydides.wakaleo.com/ http://www.thucydides.info
- 101. references http://arquillian.org/blog/tags/graphene/ http://testng.org/doc/index.html http://groovy.codehaus.org/