1. ACCEPTANCE testing of web ui
using webdriver, thucydides and groovy
story
volodymyr tsukur // follow me : twitter.com/flushdia or email to flushdia@gmail.com

2. team &
tech lead @
partner @
vladimir tsukur
10+ years dev experience

3. BASED ON REAL PRODUCT DEV

4. App #1. Media logger

5. APP #2. JOURNALIST

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

15. CHANGE
AUTOMATED
ACCEPTANCE
TESTING

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

34. getSelectedRowColumns()

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

57. asset renaming steps

58. asset renaming steps

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

79. javascript object proxies

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

88. elements in proxies

89. multiparams and fields

90. chaining

91. mapping to extjs objects

92. extjs grid interop

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
FLUSHDIA@gmail.com
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/