P H A N T O M C S S W I T H I N W E B U I A R C H I T E C T U R E

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

Test coverage of UI without implementation coupling. Tests that reflect what the user sees, not what the developer writes

• Manual testing is a time consuming process • The risk of regression is higher with responsive layouts and complex applications • CSS refactoring is necessary for long life projects • Visual regression identification can often be difficult and subjective W H Y ?

casper.start( url ).then(function(){ casper.click(‘button’); phantomCSS.screenshot( ‘.modal’, ‘Modal dialog’ ); });

- More logs casperjs test demo/testsuite.js --verbose —log-level=debug - Use SlimerJS instead of PhantomJS casperjs test demo/testsuite.js --engine=slimerjs - Use debugger; statements with Webkit remote console casperjs test demo/testsuite.js —remote-debugger-port=9000 CO M M A N D L I N E

CO M M A N D L I N E

• Write the test • Run the test • Check the baseline image • Git ignore the ‘diff’ images • Commit the baseline image B A S I C WO R K F LO W

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 PhantomCSS provides implicit test coverage of behaviour, template and style regardless of technology choices.

– M A R T I N F O W L E R “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 Visual regression tests can also be Unit tests. They’re fast, and can be run individually and in any order.

Isolating the system under test makes feedback faster and tests less fragile. Confidence in tests makes applications easier and cheaper to change, extend and refactor 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

Visual regression testing as isolated Unit tests is core to Huddle’s front-end Web application architecture 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

Developed at Huddle; tools that help people gather, review, create and share content. A complex Javascript Web application

1532 visual tests in total Visual Functional

• Simple UI components do not speak directly with backend services • Complex UI components handle request/response with backend services. They are composed of other complex and simple UI components. • Complex and simple components require different test strategies, but both benefit from PhantomCSS coverage S I M P L E & C O M P L E X U I C O M P O N E N T S

S I M P L E & C O M P L E X U I C O M P O N E N T S Encapsulated behaviours with declarative inputs

S I M P L E & C O M P L E X U I C O M P O N E N T S Variations are generated automatically for both documentation and tests

S I M P L E & C O M P L E X U I C O M P O N E N T S External dependencies are faked in code

S I M P L E & C O M P L E X U I C O M P O N E N T S Fake setups can be evaluated from tests as well as in a hot-reload development environment

S I M P L E & C O M P L E X U I C O M P O N E N T S Fake setups can be evaluated from tests to support visual regression testing with PhantomCSS

https://github.com/huddle/phantomcss @ J A M E S C RY E R P H A N T O M C S S W I T H I N W E B U I A R C H I T E C T U R E