README
phantomcss-angular-utils
PhantomCSS is awesome. Performing visual regression testing on UIs allows us to test areas that would be hard to verify with unit or even end-to-end testing. Out of the box, it provides a great tool to compare screenshots against a baseline. Its effectiveness is reduced, however, when we try to compare screens against dynamic content. Imagine the following scenarios:
- Testing the UI of a blog for changes against its CSS or layout. Since the text is dynamic, it is easy to get false positives on the automated test cases.
- Testing a UI that has ads or dynamic banners. Without occluding the dynamic content, we yet again face a situation where our automation will fail, reporting false positives.
If only there was a tool that allows us to remove the variability of dynamic content...
Enter phantomcss-angular-utils. It provides a set of directives that allow us to control the UI of an application. With it, we can perform the following tasks:
- Replace DOM nodes with a standard lorem-ipsum text node. This allows us to test CSS rules on text, with the guarantee that the content of the node will always be the same.
- Hide DOM nodes while preserving the layout. This allows us to hide UIs without causing a re-ordering of elements, removing the challenges posed by embedding dynamic content.