visual testing using phantomcss

Visual TestingUsing PhantomCss

Vishnu Narang@vishnu_narang

Shridhar Deshmukh@_shree33

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

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.

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...

breaking CSS is easy, testing it is hard.

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.

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

What is PhantomCss?

● Tool for Automated Visual Testing.

● Used for Web Apps, Live style guides and responsive layouts.

How it works?

● PhantomJs for headless webkit.● CasperJs for screenshots.● ResembleJs for image comparison.

Example

padding: 11px 19px; padding: 11px 20px;

Installation (based on Mac OS)

npm install phantomjs

...And start visual regression testing

git clone https://github.com/Huddle/PhantomCSS.git

brew install casperjs

● Layout related issues.

Demo

Demo

● Layout related issues.

● Selector based tests.

● Layout related issues.

● Selector based tests.

● Action based tests.

Demo

Best Practices

● Name your screenshots carefully

● Use same OS/Browser for both runs

● Test only when you need

● Don’t always take fullpage screenshots

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.

Advanced Features

● Making it deterministic using network monitoring and wait time. (github.gist)

● Parallel execution using multi-threading (sbt) + PhantomCss

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.

THANKS

Youtube Video of this talk.