huxley and the flying robot monkeys
DESCRIPTION
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.TRANSCRIPT
Welcome to…
HUXLEY & THE FLYING
ROBOT MONKEYS
Improvisational comedians train to think laterally.
Humans instinctively focus on details.
“Does that lookclean to you?”
Humans are visual testers.
Delegation.
HUXLEY & THE FLYING
ROBOT MONKEYSp r e s e n t a t i o n b y
S E A N M O U B R Y
S E A N M O U B R Y
← I look like this on Twitter. !
You can follow me: @moubry
I w o r k a t
Sabre Corporation is a leading technology providerto 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.
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
HISTORY
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
Hammers, shovels & cars. Text editors, email clients & Photoshop.
Classic Tools
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
Monkeys Are Asynchronous Tools
Grunt is like a middle manager.
They run on their own.
True Automation
Flying Monkeys
Little monkeys as messengers shuttling files
between servers.
Big monkeys as warriors
pounding on your app.
The Wicked Witch is like a
flying middle manager.
Travis!travis-ci.com
Jenkins!jenkins-ci.org
Inventor:KohsukeKawaguchi@kohsukekawa
Inventor:SvenFuchs@svenfuchs
vs.
Flying Middle Managers
Hammers (Classic Tools) ↓
Monkeys (Async Tools) ↓
Flying Monkeys (Cloud Tools)
We want robots.
Robots love their jobs!
q
The Inventor
There’s always a wizard behind
the curtain.
The Inventor: Ben Alman @cowboy
Knowing the inventor is part of !
!
!
!
!!!!!
!!
!
the experience of using open source.
Figure 1. — flying robot monkey
Selenium
SeleniumThe modern era of web testing
began at ThoughtWorks in 2004.
JasonHuggins @hugs
PaulHammant
@paul_hammant
How do you describe a login page?
zeplin.io
How do you describe a login page?
zeplin.io
It signs me in.!!
!
It shows an errorif the password is wrong.
A test!written in Ruby!run by Selenium.!!Runs before each test → !!Test #1 success case → !
Test #2 error case → !!
(This is cool.)
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:
Hosted Solutions
End of HISTORY lesson.
Monkeys are our best friends.
The Dream of
Testing
Watches your source code
Deploys your website!
WRONG.
Everything into your development environment
The New Wave
Complete Code Coverage
Modular, Flexible, Extensible Code
Reduce Feedback Loop
Increase Productivity
Gain Confidence
Image diffing
Screenshotting
OVERWHELMED BY TOOLS
HUXley
HUXleyby Pete Hunt @floydophone
HUXley1. Watches you browse 2. Takes screenshots 3. Tells you when they change
Plug it into our development workflows.
We want to…
Demo
Lessons Learned
Lessons Learned
Prerequisites
Things you need to know about: !
1. Selenium 2. Command line 3. Source control (Git)
Prerequisites
Things you need to know about: !
1. Selenium 2. Command line 3. Source control (Git)
Prerequisites
Things you need to know about: !
1. Selenium 2. Command line 3. Source control (Git)
Up and Running with
HUXleyNode Java
Selenium Firefox
GitHub for Mac
Huxleyfile.json
How to Hux
Figure 2. — mind blown
Things are gonna be
so awesome for me now.
And yet…
• 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
Pattern Libraries
Pattern Libraries
Pattern Libraries
Pattern Libraries
Pattern Libraries
Pattern Libraries
Pattern Libraries
Styledocco example
The component relies on styles cascading down
from its parent.
WHAT WENT WRONG
WHAT WENT WRONG
MODULARIZATION
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
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 YOURSELFARE YOU MODULAR?
The Rules at TripCase
Patterns areborn into the library.
!
They graduate to the app.
I.
Every patternbelongs in the library.
!
Even the one-offs.
II.
No tests should ever fail. !
Patterns document what the system looks like right now.
III.
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.
CALL TO ACTION
Get the Huxley example project working on your computer.
!
Setup Huxley withone of your projects.
!
Refactor with confidence.
moubry.com/hux
Questions?
Thomas Henry Huxley!Evolutionary biologist !Contemporary of Charles Darwin. !Controversialist (known as “Darwin’s bulldog”). !Coined the term “agnostic”.
So, what?
CHANGE
We have to learn to manage change. !
Everything changes.
You will change.
So will the business, your bosses, the customers, and the requirements.
CHANGE
C3P0 outlasted his inventor. !
So will your code, probably. !
Leave them something thatwill take care of itself.
Leave them tests, documentation,
and now screenshots.