Package Exports
- phantomcss-angular-utils
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (phantomcss-angular-utils) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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.