Visual Testing Using PhantomCss The document discusses using PhantomCss for visual testing of a marketing website that needed to support right-to-left languages like Arabic. Implementing right-to-left support easily breaks existing CSS, so a testing strategy was needed. PhantomCss was chosen because it allows taking screenshots and comparing them to detect visual regressions caused by CSS changes. It demonstrates using PhantomCss to test layout, selectors, and user interactions across browsers and platforms. Best practices and advanced features like parallelization and deterministic runs are also covered.

1. Visual Testing
Using PhantomCss
Vishnu Narang
@vishnu_narang
Shridhar Deshmukh
@_shree33

2. Why did we use it?
What was our use case?

3. Our use case.
● We are on a project, working on a multi-national,
multi locale marketing website. Each page of the
website is made up of modules. Each module can be
used on many pages with different content.
● Recently, we got a unique requirement. We needed to
go live in middle-east countries for which we needed
to support Right-to-Left (RTL) languages like Arabic.

4. Our use case. ..cont
● Not only does the content flow from right to left,
even the layout and the interactions needed to flow
from right to left.
● Obviously, we needed to change lots of CSS/HTML in
our common code to support this.
While implementing this, we realised one thing...

5. breaking CSS is easy, testing it is hard.

6. Breaking css is easy, testing it is hard...
● Every time you make a change in common css code for a
website, you always have the possibility that something else
breaks on some other page.
● In our case, changing css for RTL for some module sometimes
broke it’s LTR variation on some pages.
● We had to plan a CSS testing strategy.

7. CSS testing options..
● Jasmine:
We used jasmine for our javascript tests. But nothing stopped us from using it for CSS
“Unit” tests.
We would only test the following for elements:
○ Is it floated Left or Right
eg: expect($el).toHaveCss({float: right});
○ Does it have Left: auto or greater than zero.
eg: expect($el).toHaveCss({left: auto});
○ Is it on the left or right of another element.
eg: expect(rightElOffset).toBeGreaterThan(leftElOffset); right Element
(rightEl)
left Element
(leftEl)
$el(left: auto)
$el

8. What is PhantomCss?
● Tool for Automated Visual Testing.
● Used for Web Apps, Live style guides and
responsive layouts.

9. How it works?
● PhantomJs for headless webkit.
● CasperJs for screenshots.
● ResembleJs for image comparison.

10. Example
padding: 11px 19px; padding: 11px 20px;

11. Installation (based on Mac OS)
npm install phantomjs
...And start visual regression testing
git clone https://github.com/Huddle/PhantomCSS.git
brew install casperjs

12. ● Layout related issues.
Demo

13. Demo
● Layout related issues.
● Selector based tests.

14. ● Layout related issues.
● Selector based tests.
● Action based tests.
Demo

15. Best Practices
● Name your screenshots carefully
● Use same OS/Browser for both runs
● Test only when you need
● Don’t always take fullpage screenshots

16. When not to use it?
● Right at the start of your project when the
pages keep changing.
● On a small project with very few pages.
● When you have a better tool to do your
job.

17. Advanced Features
● Making it deterministic using network
monitoring and wait time. (github.gist)
● Parallel execution using multi-threading
(sbt) + PhantomCss

19. References & Resources
● Official Repo: https://github.com/Huddle/PhantomCSS
● Our Modified version:
https://github.com/vishnun/visual_testing_using_phantomcss
● github gist for network monitoring:
https://gist.github.com/vishnun/23c66b0bc6b6194cf5cc
● More tools and wrappers:
grunt-phantomcss, PhantomXHR, PhantomFlow and grunt-
phantomflow.

20. THANKS
Youtube Video of this talk.