Manual testing? No way!

Stop  -  Wait  -  Automate

JS Quality Assurance

Markup & CSS Quality Assurance

Easy to break, hard to track

Machines should decide!

What we want

  • Testing in different browsers
  • Testing in different viewports
  • Comparing page fragments
  • Manipulate with page before taking screenshot

Huxley

https://github.com/facebookarchive/huxley
  • No need to write tests
  • Testing in different states
  • Only full page screenshots
  • Only one browser

PhantomCSS

https://github.com/Huddle/PhantomCSS
  • Fragments
  • Testing in different states
  • Only in PhantomJS
  • Manipulations with page using CasperJS

PhantomFlow - Decision trees

https://github.com/Huddle/PhantomFlow
  • Enables a more expressive way of describing user interaction paths within tests
  • Uses PhantomCSS
  • Only in PhantomJS
  • Supports TDD and BDD for web applications and responsive web sites
  • Supports visual regression workflows, quick inspection & rebasing via UI.

Backstop.js

https://github.com/garris/BackstopJS
  • Great for testing simple applications
  • Declarative description
  • Only in PhantomJS

Wraith

https://github.com/BBC-News/wraith
  • Uses either PhantomJS, CasperJS or SlimerJS
  • Fragments
  • Spider mode

WebDriverCSS

https://github.com/webdriverio/webdrivercss
  • Uses Selenium Grid
  • Testing for different browsers in different states
  • Intergration with SauceLabs, BrowserStack
  • Fragments, excludes

Gemini

https://github.com/bem/gemini
  • Compatibility with different browsers
  • Intergration with SauceLabs, BrowserStack
  • Fragments
  • CSS test coverage statistics

Automated

Advice

  • Use static data
  • CSS Regression Testing is not a replacement of functional JS testing