Slide 1

Slide 1 text

Automated Testing & CSS Kevin Lamping, Rackspace Front-end Engineer @klamping

Slide 2

Slide 2 text

When I change the CSS

Slide 3

Slide 3 text

“Insanity: doing the same thing over and over again and expecting different results.”

Slide 4

Slide 4 text

“Insanity: doing the same thing over and over again and enjoying it.”

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

“Despite CSS being so hard to maintain, it's often the part of the FE stack people are least interested in protecting from tech debt.” @necolas

Slide 12

Slide 12 text

The Tools Wraith, Hardy, StyleDocco

Slide 13

Slide 13 text

Wraith

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

+

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Installation $ curl -fsSL https://raw.github.com/bbc-news/wraith/ go/install | bash $ cd wraith $ bundle install

Slide 19

Slide 19 text

Demo

Slide 20

Slide 20 text

Wraith - Recap •Easy, simple set up •Nice site to view diffs •Entire screen comparison is bad for dynamic sites •No IE Testing •Need two sites with same content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Installation $ npm install -g hardy

Slide 24

Slide 24 text

Demo

Slide 25

Slide 25 text

Selector Maps selectors.js module.exports = { "standard paragraph": "section > p" }; test.feature Then "standard paragraph" should have "color" of "rgb(68, 68, 68)"

Slide 26

Slide 26 text

selectors.js module.exports = { "standard paragraph": "section > p" }; test.feature Then "standard paragraph" should have "color" of "rgb(68, 68, 68)" Selector Maps

Slide 27

Slide 27 text

CSS Testing Steps Then "section > p" should have "color" of "rgb(68, 68, 68)"

Slide 28

Slide 28 text

CSS Testing Steps Then should have of

Slide 29

Slide 29 text

CSS Testing Steps Then should have of than

Slide 30

Slide 30 text

CSS Testing Steps Then should have offset of

Slide 31

Slide 31 text

CSS Testing Steps Then should look the same as before

Slide 32

Slide 32 text

Demo

Slide 33

Slide 33 text

Basic Steps Given I visit "http://csste.st/"

Slide 34

Slide 34 text

Basic Steps Given the window size is by

Slide 35

Slide 35 text

Basic Steps Then I enter into

Slide 36

Slide 36 text

Basic Steps Then I submit the form

Slide 37

Slide 37 text

Demo

Slide 38

Slide 38 text

Custom Steps

Slide 39

Slide 39 text

Hardy - Recap •Cross-browser coverage •Computed styles & specific shots •Site scripting built-in •No nice diff page •More work to set up •Have to repeat CSS •Pay attention to ' and "

Slide 40

Slide 40 text

StyleDocco

Slide 41

Slide 41 text

/* # Buttons Provides extra visual weight and identifies the primary action in a set of buttons. ``` Primary button> Primary ``` */

Slide 42

Slide 42 text

Demo

Slide 43

Slide 43 text

StyleDocco - Recap •No login/scripting needed •Allows for pseudo-class testing •Content is (mostly) static •Not the actual site

Slide 44

Slide 44 text

Get Involved! http://csste.st Thanks!