huxley and the flying robot monkeys

Post on 18-Jun-2015

193 Views

Category:

Design

1 Downloads

Preview:

Click to see full reader

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.

top related