front end testing
Awesome Tools and Techniques
Testing on the Front-lines
- What do we want to test?
- Why do we want to automate it?
- How do we do it?
What to Test
- Expected Content
- Expected Behaviour
- Performance Benchmarks
- Visual rendering and "correctness"
- Usability Heuristics?
Why automate?
- Different environments
- Over 9000 browser/device combos
- Every change could break something
- Humans are slow and forgetful
But not everything can be automated (or can it?)
How to Test
Visual Rendering and "Correctness"
- Known "correct" renders
- Living style-guide
- General tests
Tools for Testing
Visual Rendering and "Correctness"
- GhostStory - Story-based (Cucumber) tests
- CSSCritic and PhantomCSS - Tests pages against known "correct" screenshots
- Fighting-Layout-Bugs - Tests for general visual bugs
- Animated gifs of cross-browser/device screenshots
- Awesome round-up of testing tools based on research
- Hack your own using PhantomJS and/or ImageMagick and/or other magick
How to Test for UX?
1. Well-defined heuristics, eg:
- All buttons must be no smaller than 40px
- All text must have sufficient contrast
- Focus-states must appear visually different
2. Automate the heuristic evaluations
- USEFul - An existing research paper on this
What Next?
