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