huxley and the flying robot monkeys

134

Upload: sean-moubry

Post on 18-Jun-2015

193 views

Category:

Design


1 download

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

Page 1: Huxley and the Flying Robot Monkeys
Page 2: Huxley and the Flying Robot Monkeys

Welcome  to…

Page 3: Huxley and the Flying Robot Monkeys

HUXLEY & THE FLYING

ROBOT MONKEYS

Page 4: Huxley and the Flying Robot Monkeys

Improvisational comedians train to think laterally.

Page 5: Huxley and the Flying Robot Monkeys

Humans instinctively focus on details.

Page 6: Huxley and the Flying Robot Monkeys
Page 7: Huxley and the Flying Robot Monkeys

“Does that lookclean to you?”

Page 8: Huxley and the Flying Robot Monkeys

Humans are visual testers.

Page 9: Huxley and the Flying Robot Monkeys
Page 10: Huxley and the Flying Robot Monkeys

Delegation.

Page 11: Huxley and the Flying Robot Monkeys

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

Page 12: Huxley and the Flying Robot Monkeys

S E A N M O U B R Y

← I look like this on Twitter. !

You can follow me: @moubry

Page 13: Huxley and the Flying Robot Monkeys

I w o r k a t

Page 14: Huxley and the Flying Robot Monkeys

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.

Page 15: Huxley and the Flying Robot Monkeys

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

Page 16: Huxley and the Flying Robot Monkeys
Page 17: Huxley and the Flying Robot Monkeys
Page 18: Huxley and the Flying Robot Monkeys
Page 19: Huxley and the Flying Robot Monkeys

HISTORY

Page 20: Huxley and the Flying Robot Monkeys

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

Page 21: Huxley and the Flying Robot Monkeys

Hammers, shovels & cars. Text editors, email clients & Photoshop.

Classic Tools

Page 22: Huxley and the Flying Robot Monkeys

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

Page 23: Huxley and the Flying Robot Monkeys

Monkeys Are Asynchronous Tools

Page 24: Huxley and the Flying Robot Monkeys
Page 25: Huxley and the Flying Robot Monkeys

Grunt is like a middle manager.

Page 26: Huxley and the Flying Robot Monkeys
Page 27: Huxley and the Flying Robot Monkeys

They run on their own.

True Automation

Page 28: Huxley and the Flying Robot Monkeys
Page 29: Huxley and the Flying Robot Monkeys

Flying Monkeys

Page 30: Huxley and the Flying Robot Monkeys

Little monkeys as messengers shuttling files

between servers.

Page 31: Huxley and the Flying Robot Monkeys

Big monkeys as warriors

pounding on your app.

Page 32: Huxley and the Flying Robot Monkeys

The Wicked Witch is like a

flying middle manager.

Page 33: Huxley and the Flying Robot Monkeys

Travis!travis-ci.com

Jenkins!jenkins-ci.org

Inventor:KohsukeKawaguchi@kohsukekawa

Inventor:SvenFuchs@svenfuchs

vs.

Flying Middle Managers

Page 34: Huxley and the Flying Robot Monkeys

Hammers (Classic Tools) ↓

Monkeys (Async Tools) ↓

Flying Monkeys (Cloud Tools)

Page 35: Huxley and the Flying Robot Monkeys
Page 36: Huxley and the Flying Robot Monkeys

We want robots.

Robots love their jobs!

Page 37: Huxley and the Flying Robot Monkeys
Page 38: Huxley and the Flying Robot Monkeys

q

The Inventor

Page 39: Huxley and the Flying Robot Monkeys

There’s always a wizard behind

the curtain.

Page 40: Huxley and the Flying Robot Monkeys

The Inventor: Ben Alman @cowboy

Page 41: Huxley and the Flying Robot Monkeys

Knowing the inventor is part of !

!

!

!

!!!!!

!!

!

the experience of using open source.

Page 42: Huxley and the Flying Robot Monkeys

Figure 1. — flying robot monkey

Page 43: Huxley and the Flying Robot Monkeys

Selenium

Page 44: Huxley and the Flying Robot Monkeys

SeleniumThe modern era of web testing

began at ThoughtWorks in 2004.

JasonHuggins @hugs

PaulHammant

@paul_hammant

Page 45: Huxley and the Flying Robot Monkeys

How do you describe a login page?

zeplin.io

Page 46: Huxley and the Flying Robot Monkeys

How do you describe a login page?

zeplin.io

It signs me in.!!

!

It shows an errorif the password is wrong.

Page 47: Huxley and the Flying Robot Monkeys

A test!written in Ruby!run by Selenium.!!Runs before each test → !!Test #1 success case → !

Test #2 error case → !!

(This is cool.)

Page 48: Huxley and the Flying Robot Monkeys

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:

Page 49: Huxley and the Flying Robot Monkeys

Hosted Solutions

Page 50: Huxley and the Flying Robot Monkeys

End of HISTORY lesson.

Monkeys are our best friends.

Page 51: Huxley and the Flying Robot Monkeys

The Dream of

Testing

Page 52: Huxley and the Flying Robot Monkeys

Watches your source code

Deploys your website!

Page 53: Huxley and the Flying Robot Monkeys

WRONG.

Page 54: Huxley and the Flying Robot Monkeys

Everything into your development environment

Page 55: Huxley and the Flying Robot Monkeys

The New Wave

Page 56: Huxley and the Flying Robot Monkeys
Page 57: Huxley and the Flying Robot Monkeys

Complete Code Coverage

Modular, Flexible, Extensible Code

Reduce Feedback Loop

Increase Productivity

Gain Confidence

Page 58: Huxley and the Flying Robot Monkeys

Image diffing

Page 59: Huxley and the Flying Robot Monkeys

Screenshotting

Page 60: Huxley and the Flying Robot Monkeys

OVERWHELMED BY TOOLS

Page 61: Huxley and the Flying Robot Monkeys
Page 62: Huxley and the Flying Robot Monkeys

HUXley

Page 63: Huxley and the Flying Robot Monkeys

HUXleyby Pete Hunt @floydophone

Page 64: Huxley and the Flying Robot Monkeys

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

Page 65: Huxley and the Flying Robot Monkeys
Page 66: Huxley and the Flying Robot Monkeys

Plug it into our development workflows.

We want to…

Page 67: Huxley and the Flying Robot Monkeys

Demo

Page 68: Huxley and the Flying Robot Monkeys

Lessons Learned

Page 69: Huxley and the Flying Robot Monkeys

Lessons Learned

Page 70: Huxley and the Flying Robot Monkeys

Prerequisites

Things you need to know about: !

1. Selenium 2. Command line 3. Source control (Git)

Page 71: Huxley and the Flying Robot Monkeys

Prerequisites

Things you need to know about: !

1. Selenium 2. Command line 3. Source control (Git)

Page 72: Huxley and the Flying Robot Monkeys
Page 73: Huxley and the Flying Robot Monkeys
Page 74: Huxley and the Flying Robot Monkeys

Prerequisites

Things you need to know about: !

1. Selenium 2. Command line 3. Source control (Git)

Page 75: Huxley and the Flying Robot Monkeys
Page 76: Huxley and the Flying Robot Monkeys

Up and Running with

HUXleyNode Java

Selenium Firefox

GitHub for Mac

Page 77: Huxley and the Flying Robot Monkeys
Page 78: Huxley and the Flying Robot Monkeys
Page 79: Huxley and the Flying Robot Monkeys
Page 80: Huxley and the Flying Robot Monkeys
Page 81: Huxley and the Flying Robot Monkeys
Page 82: Huxley and the Flying Robot Monkeys
Page 83: Huxley and the Flying Robot Monkeys
Page 84: Huxley and the Flying Robot Monkeys
Page 85: Huxley and the Flying Robot Monkeys
Page 86: Huxley and the Flying Robot Monkeys
Page 87: Huxley and the Flying Robot Monkeys

Huxleyfile.json

Page 88: Huxley and the Flying Robot Monkeys

How to Hux

Page 89: Huxley and the Flying Robot Monkeys
Page 90: Huxley and the Flying Robot Monkeys

Figure 2. — mind blown

Page 91: Huxley and the Flying Robot Monkeys

Things are gonna be

so awesome for me now.

Page 92: Huxley and the Flying Robot Monkeys

And yet…

Page 93: Huxley and the Flying Robot Monkeys

• 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

Page 94: Huxley and the Flying Robot Monkeys
Page 95: Huxley and the Flying Robot Monkeys
Page 96: Huxley and the Flying Robot Monkeys

Pattern Libraries

Page 97: Huxley and the Flying Robot Monkeys

Pattern Libraries

Page 98: Huxley and the Flying Robot Monkeys

Pattern Libraries

Page 99: Huxley and the Flying Robot Monkeys

Pattern Libraries

Page 100: Huxley and the Flying Robot Monkeys

Pattern Libraries

Page 101: Huxley and the Flying Robot Monkeys

Pattern Libraries

Page 102: Huxley and the Flying Robot Monkeys

Pattern Libraries

Page 103: Huxley and the Flying Robot Monkeys

Styledocco example

Page 104: Huxley and the Flying Robot Monkeys
Page 105: Huxley and the Flying Robot Monkeys
Page 106: Huxley and the Flying Robot Monkeys
Page 107: Huxley and the Flying Robot Monkeys

The component relies on styles cascading down

from its parent.

WHAT WENT WRONG

Page 108: Huxley and the Flying Robot Monkeys

WHAT WENT WRONG

Page 109: Huxley and the Flying Robot Monkeys

MODULARIZATION

Page 110: Huxley and the Flying Robot Monkeys

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

Page 111: Huxley and the Flying Robot Monkeys

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?

Page 112: Huxley and the Flying Robot Monkeys
Page 113: Huxley and the Flying Robot Monkeys

The Rules at TripCase

Page 114: Huxley and the Flying Robot Monkeys

Patterns areborn into the library.

!

They graduate to the app.

I.

Page 115: Huxley and the Flying Robot Monkeys

Every patternbelongs in the library.

!

Even the one-offs.

II.

Page 116: Huxley and the Flying Robot Monkeys

No tests should ever fail. !

Patterns document what the system looks like right now.

III.

Page 117: Huxley and the Flying Robot Monkeys

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.

Page 118: Huxley and the Flying Robot Monkeys

CALL TO ACTION

Get the Huxley example project working on your computer.

!

Setup Huxley withone of your projects.

!

Refactor with confidence.

Page 119: Huxley and the Flying Robot Monkeys

moubry.com/hux

Page 120: Huxley and the Flying Robot Monkeys
Page 121: Huxley and the Flying Robot Monkeys

Questions?

Page 122: Huxley and the Flying Robot Monkeys
Page 123: Huxley and the Flying Robot Monkeys
Page 124: Huxley and the Flying Robot Monkeys
Page 125: Huxley and the Flying Robot Monkeys
Page 126: Huxley and the Flying Robot Monkeys
Page 127: Huxley and the Flying Robot Monkeys
Page 128: Huxley and the Flying Robot Monkeys
Page 129: Huxley and the Flying Robot Monkeys
Page 130: Huxley and the Flying Robot Monkeys

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

Page 131: Huxley and the Flying Robot Monkeys

So, what?

Page 132: Huxley and the Flying Robot Monkeys

CHANGE

We have to learn to manage change. !

Everything changes.

You will change.

So will the business, your bosses, the customers, and the requirements.

Page 133: Huxley and the Flying Robot Monkeys

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.

Page 134: Huxley and the Flying Robot Monkeys