Huxley and the Flying Robot Monkeys

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.

http://moubry.com/hux

Transcript

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 (Classic Tools) ↓ Monkeys (Async Tools) ↓ Flying Monkeys (Cloud Tools)
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. HUXley by Pete Hunt @floydophone
64. HUXley 1. 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 HUXley Node 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.