Tools like Selenium, an outstanding tool for UI test automation, and Arquillian, an award-winning integration testing framework, offer a base for high-quality tests which are crucial for a web app development. However writing UI tests and covering server-side logic leaves many questions open: * Does Selenium cover everything? Page transitions, simple JavaScript interaction and a portion of DOM. Is it really enough? * Mocking requests for testing server-side code is pain. Is it necessary? * Are you able to detect that your component’s visual representation changes? * Does investigating these changes involve a disproportionate amount of effort? * Isn’t manual test development too expensive?

1. Arquillian: Effective Tests
FROM THE CLIENT TO THE SERVER
Lukas Fryc

2. Testing
Testing
Testing
Testing #Agile
Testing
Testing
#TDD Testing
Testing
Testing
Testing “You can hear about testing
Testing from everywhere!”

3. “But image testing of
large enterprise
application.”
Enterprise Java Web Application

4. “In such case, it's not
easy to define how the
tests should look like.”
Testing...

5. “How would you complete
equation?
What word do you
imagine when someone
says testing?”
Testing = ?

6. “My favorite is...”
Testing = Pain

7. “It's even possible to
change equation and
make the testing
enjoyable?”
Testing = Enjoyable!

8. No one saves the World?

9. “There is one: he is brave
and comes from far deep
space...”

10. “And brings heavy gear
for fighting with alien
bugs...”

11. “...and he is proud to
share his powerful gear
with us!”

12. “At first, he comes with
Ability to split one big
deployment into many
small, testing as little as
components as possible
in separation.”

13. “And he makes sure
these deployments work
on various of earth
application servers.”

14. “...and once he deploys
the deployment into
container, he makes sure
you have all the goodness
from inside available
using dependency
injection.”

15. “...and that's all backed
with strong development
tools.”

16. “That all, and you can run
it just from your IDE, re-
using what you already
now.”
JUnit TestNG

17. Testing Revolution

18. Ike brings tests to the Server

19. But what about the Client?

20. The little bit of Theory...

25. “Let's have ideal testing
pyramid in mind,
otherwise...”

26. Enough Theory!

27. Let's bring tests to the Client

28. “But it isn't as simple as
in Java - many different
environments.”

29. “Fortunately there is tool
which allows you to write
tests in unified API for all
those browsers.”

30. “And the even supports
mocked browsers with
same API.”

31. Oh, such a great tool!

32. Let's invade client!

33. “Ouch, we need some
abstraction!”

34. “Even if we use favorite
programmatic approach,
we can end up with many
tests which takes days to
pass and quickly turns
out into maintanance
burden!” Java
C#
Python
Ruby
PHP
Perl

35. At least, the app is covered...

36. “But this is what actually
Selenium see.”

37. Black Box

38. “Selenium is able to test
transitions between
pages.”
Page Transitions

39. “...and a portion of all the
page source code –
JavaScript handlers,
selected CSS and DOM
changes as reaction to
user interaction.”
A little bit of...
DOM / JavaScript / CSS

40. Let's change the game...

41. Right tool for the Job

42. “Let's take the an
outstanding UI
automation tool...”

43. “And add your favorite
language.”

44. “And little bit of Alien
technology.”

45. “His name is Drone and
he is proud member of
Arquillian crew!”
Arquillian Drone

46. “He is basically ...”
Hard-Worker

47. “Drone comes to bring
the browser to your test.”

48. Let Ike invade the Client

49. “But something else is
needed to make your
tests green.”

50. “Something enough
strong to handle all the
inconsistencies.”

51. “Let's deploy that to the
browser page and see
what happens!”

52. Strong type-safe API

53. Proven to handle AJAX

54. Invades the Client

55. Cross-Cutting Concerns

56. Arquillian Graphene

57. “We are still writing low-
level interaction
commands, right?”
Isn't that too low-level?

58. “Let's look for something
on higher level.”
Reusable Abstractions

59. “Introducing well-known
Selenium pattern:”
Page Objects

60. “Let's imagine you
have page with all the
elements and you
express them as
fields in the class.”

62. “You can even use
fluent API for page
transitions, since
each method can
return next page as
the result.”

63. “But for modern AJAX-
based application, it's
simply not enough.”

64. “Let's think a little
about that:
In enterprise
applications, you
rather reuse UI
components.”

65. “What about creating
the model of these
components from
their user's point of
view?”

66. Component Objects

67. Arquillian Graphene
Component Objects

68. Review what we have

69. “Now, we can simply
write tests on proper
level of abstraction
with minimum
efforts.”

70. 3 Missing
Pieces

71. “What is missing here?”
JUnit
TestNG

72. How to avoid manual...?

73. “We can automatically
snap screen-shots of the
whole pages and
compare them with
historical data – it's
proven that rendering on
one particular browser
and platform, images will
be binary same.”
Screen-shot Comparison

74. Automated Visual Verification

75. The Music of the Future?

76. “It is music of the
future, but there is
project which already
focuses efforts there.”
Arquillian RushEye

77. “2 parts are missing now:
server is already covered
with unit and integration
tests, but what about the
same tests for client?”
JUnit
TestNG

78. “Unit testing of client
is even more
important than unit
testing of server,
since it suffers from
environment
diversity.”
Unit Testing Client

79. “But once those unit
tests are written, how
to automate them?
Without automation,
they are not tests.”
Yet another tool to configure?

80. “Let's use the
configuration what we
have for Drone – let
him instantiate a
browser, which will
run the unit tests.”
Reuse the Automation Setup

81. “For writing actual
tests, you can use
your favorite JS client
testing tool.
We are actually
working on
integration with
QUnit.”
QUnit

82. “And once the client is
covered too, only
integration tests for client
are missing.”
JUnit
TestNG

83. “The integration
testing of client is
actually making sure
it communicates with
server as expected.”
Client / Server Round-Trip

84. Take client on the Tour to Server!

85. “We have browser and
test on one side and
server on opposite side.”

86. “With UI automation, we
are sending request from
client to the server.”

87. “And server generates
response.”

88. Black Box!

89. “On the other hand, when
we are testing server
from its JVM, we are
mocking requests, which
invokes verification
code.”

90. Don't mock me!

91. “Let's make the
connection between client
and server live.”

92. “Once the requests goes
to the server, the test
code is serialized and
sent as part of the
request.”

93. “Server de-serializes the
testing code from request
and uses it for verification
of the server state in
several lifecycle phases.”

94. “And then is the testing
object sent back to the
client, which can validate
it.”

95. “Client can verify the
response and send
another request.”

96. Crazy idea?

97. “But it already works!”
JSFUnit

98. “Now, we are covered!”
JUnit
TestNG

100. Client Invasion

101. It's all?

102. It can't be without some buzz....

103. Let's go Mobile!

104. “Drone can actually
replace all the browsers.”

105. “And use Android driver
for connecting to mobile
device.”

106. “Additionally, Android
extension can start the
emulator or connect to
real device, which is
perfect addition for
running in continuous
integration systems.”

107. Arquillian Android

108. “Drone brings your
Android browser just into
your test.”

110. Arquillian

111. Experience the future now

112. But I must to know more...

113. http://bit.ly/arq-preview

114. http://bit.ly/arq-users

115. Join us...

116. http://github.com/arquillian

117. http://bit.ly/arq-devs

118. http://bit.ly/jboss-testing

119. #jbosstesting @ irc.freenode.net

120. #Arquillian

121. Enjoy the Testing!

122. @LFryc
Lukas Fryc
http://bit.ly/lfryc

123. Photographs and pictures used in this
presentation are authored by various authors
and released under the Creative Commons
license
http://www.flickr.com/photos/nickrussill/150410613/
http://www.flickr.com/photos/audreyjm529/1240909256/
http://www.flickr.com/photos/jo-h/6200225665/
http://www.flickr.com/photos/stevendepolo/3796415185/
http://www.flickr.com/photos/ucdaviscoe/6303100423/
http://www.flickr.com/photos/sportbusiness/3542445412/
http://watirmelon.com/2012/01/31/introducing-the-software-
testing-ice-cream-cone/