Embed Size (px)
Citation preview
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.
