PhantomCSS - Complete UI Testing

88afe3c92fb36a7c5186555f5803cc01?s=47 James Cryer
October 31, 2013

PhantomCSS - Complete UI Testing

PhantomCSS has become an essential tool at Huddle for developing and refactoring UI with visual tests. This talk explains the background of why I built PhantomCSS and how this fits in with conventional ideas of unit testing and test-driven development.

https://github.com/Huddle/PhantomCSS

Presented at http://www.frontendlondon.co.uk/ on 31st Oct 2013

88afe3c92fb36a7c5186555f5803cc01?s=128

James Cryer

October 31, 2013
Tweet

Transcript

  1. P H A N T O M C S S

    C O M P L E T E U I T E S T I N G
  2. PhantomCSS is a CasperJS module for automating visual regression testing

    with PhantomJS and Resemble.js. For testing Web apps, live style guides and responsive layouts
  3. Test coverage of UI without implementation coupling. Tests that reflect

    the designer model, not the developer model. Graphical idioms not functional primitives.
  4. Developed at Huddle. Tools that help people in business work

    together to create and share content. At its core, a thick client web application for files.
  5. More than 40 features, up to 4 views per feature.

    :hover :active :focus :valid
  6. • Our Selenium end-to-end tests were our only UI tests.

    We needed fast UI tests, independent of end-to-end • Jasmine tests supported and hindered JavaScript development in equal measure. We wanted to refactor our app without needing to change all the tests • Refactoring CSS involved manual regression testing. We wanted automated CSS tests • Our Selenium end-to-end tests were our only UI tests. We needed fast UI tests, independent of end-to-end • Jasmine tests supported and hindered JavaScript development in equal measure. We wanted to refactor our app without needing to change all the tests • Refactoring CSS involved manual regression testing. We wanted automated CSS tests
  7. Unit Service UI Test Pyramid - M I K E

    C O H N , S U C C E E D I N G W I T H A G I L E ( 1 )
  8. Unit Service UI/end-to-end Not a test pyramid UI tests are

    slow, without clear separation of functional tests
  9. UI/Unit Service E2E Test Pyramid UI tests should be fast!

  10. Unit tests provide fast automated assertions of expected state or

    behaviour. Each test runs independently of each other. A unit test for UI should test the expected result of JS, HTML and CSS as a single concern S Y S T E M U N D E R T E S T J A VA S C R I P T H T M L C S S F I X T U R E I N T E R FA C E
  11. Tests for rendered UI provide implicit coverage of CSS, HTML

    and JavaScript regardless of technology choices – M A R T I N F O W L E R ( 2 ) “A classic test only cares about the final state - not how that state was derived. ” J A VA S C R I P T H T M L C S S F I X T U R E I N T E R FA C E
  12. Isolating the system under test makes feedback faster and tests

    less fragile. Without speed and confidence, code is perceived to be less malleable and tests become worthless J A VA S C R I P T H T M L C S S F I X T U R E I N T E R FA C E
  13. casper.addListener('page.initialized', function(){! ! phantomxhr.fake({! ! ! url: "/api/coffee/list",! ! !

    responseBody: {! ! ! ! types: [! ! ! ! ! {name: 'Espresso'},! ! ! ! ! {name: 'Latte'},! ! ! ! ! {name: 'Cappuccino'}! ! ! ! ]! ! ! }! ! });! ! ! casper.removeListener('page.initialized');! });! ! casper.! ! start( “http://my.coffee.local” ).! ! then(function(){! ! ! casper.click('#coffee-machine-button');! ! ! ! ! ! casper.waitForSelector('#myModal:not([style*="display: none"])',! ! ! ! function success(){! ! ! ! ! phantomcss.screenshot('#myModal', 'coffee machine dialog');! ! ! ! },! ! ! ! function timeout(){! ! ! ! ! casper.test.fail('Should see coffee machine');! ! ! ! }! ! ! );! ! }); casper.addListener('page.initialized', function(){! ! phantomxhr.fake({! ! ! url: "/api/coffee/list",! ! ! responseBody: {! ! ! ! types: [! ! ! ! ! {name: 'Espresso'},! ! ! ! ! {name: 'Latte'},! ! ! ! ! {name: 'Cappuccino'}! ! ! ! ]! ! ! }! ! });! ! ! casper.removeListener('page.initialized');! });! ! casper.! ! start( “http://my.coffee.local” ).! ! then(function(){! ! ! casper.click('#coffee-machine-button');! ! ! ! ! ! casper.waitForSelector('#myModal:not([style*="display: none"])',! ! ! ! function success(){! ! ! ! ! phantomcss.screenshot('#myModal', 'coffee machine dialog');! ! ! ! },! ! ! ! function timeout(){! ! ! ! ! casper.test.fail('Should see coffee machine');! ! ! ! }! ! ! );! ! }); Create an API stub to feed fake data to the UI Generate a screenshot and compare to existing
  14. None
  15. Write a failing test Hack the code to make the

    test pass Refactor the code Keep hacking until it looks good Add a visual test Visual tests can support TDD and refactoring of the entire UI not just the styling – K E N T B E C K , T E S T- D R I V E N D E V E L O P M E N T ( 3 )
  16. 1. Succeeding with Agile: Software Development Using Scrum - Mike

    Cohn 2. http://martinfowler.com/articles/mocksArentStubs.html - Martin Fowler 3. Test-Driven Development - Kent Beck
  17. P H A N T O M C S S

    C O M P L E T E U I T E S T I N G https://github.com/Huddle/PhantomCSS @ J A M E S C RY E R