Unleash a cloud of minions to do your bidding! Making CSS changes to existing projects is hard. Big refactors are even harder. Small changes to one component can impact others, creating unintended visual regressions. It sucks. It creates friction, discouraging you from changing *anything* lest you break something that already works. Imagine a utopian future where as soon as a developer commits CSS changes, robots go through every page of the website taking screenshots, looking for differences. Those robots exist. And they'd love to meet you. In this talk, you'll learn how to implement both personal and designer/developer team workflows for automated visual testing. We'll cover the basics of setting up Huxley, Facebook's new system for visual regression testing, and some related technologies. We'll also cover best practices—such as ways of spinning-up remote workers in the cloud for taking screenshots. This talk is an introduction to the world of continuous integration for designers and front-end developers.

2. Welcome to…

3. HUXLEY &
THE FLYING
ROBOT MONKEYS

4. Improvisational comedians
train to think laterally.

5. Humans instinctively
focus on details.

7. “Does that look
clean to you?”

8. Humans are
visual testers.

10. Delegation.

11. HUXLEY &
THE FLYING
ROBOT MONKEYS
presentation by
S E A N M O U B R Y

12. S E A N M O U B R Y
← I look like this
on Twitter.
!
You can follow me:
@moubry

13. I work at

14. Sabre Corporation is a leading technology provider
to the global travel and tourism industry.
!
Sabre processed over $100 billion of travel spend in 2013.
!
Sabre is headquartered in Southlake, Texas and employs
~10,000 people in ~60 countries around the world.

15. View the details of your trip
plus relevant messages
Quickly view all items
in your itinerary
Store all past and upcoming
trips in one place

19. HISTORY

20. Most human beings have an infinite
capacity for taking things for granted.
!
That we do not learn very much from
the lessons of history is the most
important of all the lessons of history.
!
—Aldous Huxley

21. Hammers, shovels & cars. Text editors, email clients & Photoshop.
Classic Tools

22. These are tools that you don’t actively use. You
tell them—or schedule them—to do work, and
they return with the results when they’re done.
!
task runners
build tools
compilation
!
cron, grunt, gulp, rake, etc.
Asynchronous Tools

23. Monkeys Are
Asynchronous Tools

25. Grunt is like a
middle manager.

27. They run on their own.
True Automation

29. Flying Monkeys

30. Little monkeys
as messengers
shuttling files
between servers.

31. Big monkeys
as warriors
pounding on
your app.

32. The Wicked Witch
is like a
flying middle
manager.

33. Travis!
travis-ci.com
Jenkins!
jenkins-ci.org
Inventor:
Kohsuke
Kawaguchi
@kohsukekawa
Inventor:
Sven
Fuchs
@svenfuchs
vs.
Flying Middle Managers

34. Hammers (ClassicTools)
↓
Monkeys (AsyncTools)
↓
Flying Monkeys (CloudTools)

36. We want robots.
Robots love their jobs!

38. q
The Inventor

39. There’s always
a wizard behind
the curtain.

40. The Inventor: Ben Alman
@cowboy

41. Knowing the inventor is part of
!
!
!
!
!
!
!
!
!
!!
!
the experience of using open source.

42. Figure 1. — flying robot monkey

43. Selenium

44. Selenium
The modern era of web testing
began at ThoughtWorks in 2004.
Jason
Huggins
@hugs
Paul
Hammant
@paul_hammant

45. How do you describe a login page?
zeplin.io

46. How do you describe a login page?
zeplin.io
It signs me in.!
!
!
It shows an error
if the password is wrong.

47. A test!
written in Ruby!
run by Selenium.!
!
Runs before
each test →
!
!
Test #1
success case →
!
Test #2
error case →
!
!
(This is cool.)

48. A test!
written in Ruby!
run by Selenium.!
!
Runs before
each test →
!
!
Test #1
success case →
!
Test #2
error case →
!
!
(This is cool.)
This is how I see this file
when I first open it:

49. Hosted Solutions

50. End of
HISTORY lesson.
Monkeys are our best friends.

51. The Dream
of
Testing

52. Watches your
source code
Deploys your
website!

53. WRONG.

54. Everything into your
development
environment

55. The New Wave

57. Complete Code Coverage
Modular, Flexible, Extensible Code
Reduce Feedback Loop
Increase Productivity
Gain Confidence

58. Image diffing

59. Screenshotting

60. OVERWHELMED
BY TOOLS

62. HUXley

63. HUXleyby Pete Hunt
@floydophone

64. HUXley1. Watches you browse
2. Takes screenshots
3. Tells you when they change

66. Plug it into our
development workflows.
We want to…

67. Demo

68. Lessons Learned

69. Lessons Learned

70. Prerequisites
Things you need to know about:
!
1. Selenium
2. Command line
3. Source control (Git)

71. Prerequisites
Things you need to know about:
!
1. Selenium
2. Command line
3. Source control (Git)

74. Prerequisites
Things you need to know about:
!
1. Selenium
2. Command line
3. Source control (Git)

76. Up and Running with
HUXleyNode
Java
Selenium
Firefox
GitHub for Mac

87. Huxleyfile.json

88. How to Hux

90. Figure 2. — mind blown

91. Things are
gonna be
so awesome
for me now.

92. And yet…

93. • It’s premiere feature is interaction recording
• But loading up the app is slow
• And playing back interactions is slow
• And running against an app is super brittle
• So if an external service is slow you get a false positive!
!
These are terrible things that have been true
for automated testing
on the web
for the past 10 years.
!
!
Huxley does not fix that.
How Huxley Sucks

96. Pattern Libraries

97. Pattern Libraries

98. Pattern Libraries

99. Pattern Libraries

100. Pattern Libraries

101. Pattern Libraries

102. Pattern Libraries

103. Styledocco example

107. The component relies
on styles cascading down
from its parent.
WHAT WENT WRONG

108. WHAT WENT WRONG

109. MODULARIZATION

110. OOCSS
ACSS
BEM
SMACSS
Object Oriented CSS
by Nicole Sullivan
!
Atomic CSS
by Brad Frost
!
Block Element Modifier
by Vitaly Harisov, et al.
!
Scalable Modular Architecture
by Jonathan Snook
MODULARIZATION
TECHNIQUES

111. YES →
!
NO →
Generated Pattern Library
Use KSS or Styledocco.
!
!
!
!
!
In-Context Pattern Library
Use this as a baseline to
refactor your code into a more
modular state.
ASK YOURSELF
ARE YOU MODULAR?

113. The Rules at
TripCase

114. Patterns are
born into the library.
!
They graduate to the app.
I.

115. Every pattern
belongs in the library.
!
Even the one-offs.
II.

116. No tests should ever fail.
!
Patterns document what the
system looks like right now.
III.

117. SUMMARY
Humans are visual testers.
Robots are better at catching regressions.
!
Automate manual processes.
Consider doing it in the cloud.
!
Comparing screenshots
is a great way to catch regressions.

118. CALL TO ACTION
Get the Huxley example project
working on your computer.
!
Setup Huxley with
one of your projects.
!
Refactor with confidence.

119. moubry.com/hux

121. Questions?

130. Thomas Henry Huxley!
Evolutionary biologist
!
Contemporary of
Charles Darwin.
!
Controversialist (known as
“Darwin’s bulldog”).
!
Coined the term
“agnostic”.

131. So, what?

132. CHANGE
We have to learn to manage change.
!
Everything changes.
You will change.
So will the business, your bosses, the
customers, and the requirements.

133. CHANGE
C3P0 outlasted his inventor.
!
So will your code, probably.
!
Leave them something that
will take care of itself.
Leave them tests, documentation,
and now screenshots.