Visual Regression Testing with PhantomCSS
If you worked on large, serious projects, you probably already felt the importance of automated testing during the development process. Depending on experience, this awareness may come suddenly like a big bang or gradually, but it becomes second nature. Automated testing can take different forms: this is unit testing, when individual isolated pieces of code are checked, and integration or functional testing, when the interaction of individual parts in the system is checked. But this article is not devoted to a review of automated testing in general, but to one specific type of it, which appeared relatively recently – visual regression testing.
Visual regression testing takes an alternative approach to testing web pages. Instead of just making sure that some element or text is present in the DOM, the test opens the page and verifies that the particular block looks exactly the way you want. Just to make sure you understand the difference, let me give you an example. Imagine that you want your site to greet its visitors with a friendly message:
<div> Hello,% username%! </div>
To make sure that this functionality works, you can (and should) check the code that generates the message, make sure that it substitutes the correct value. You can also write a functional test using Selenium or Protractor to make sure that the element is present on the page and contains the correct text. But this is not enough. We want to check not only that the element contains the correct text, but also that it looks correct, for example, is not hidden with display: none or has the correct color. There are several tools for this, but today we will look at one of them – PhantomCSS.
What is PhantomCSS?
PhantomCSS is a tool for Node.js to perform visual regression testing. It is open source and is developed by the guys from Huddle. PhantomCSS allows you to launch a browser, open a page and take a screenshot of the entire page or a specific element on the page. This screenshot will be saved as a base image for future use. When you change something on the site, you can start PhantomCSS again. He will take another screenshot and compare it with the original one. If no differences are found, the test is passed. If the screenshots do not match, the test is considered failed, a new image is created showing the differences. Such a tool is ideal for testing changes in CSS.
PhantomCSS is built on the basis of several components:
CasperJS is a tool for interacting with the PhantomJS or SlimerJS browser. It allows you to open a page and interact with it, for example, click on a button or enter a value. In addition, CasperJS provides its own framework for testing and the ability to take a screenshot of the page.
PhantomJS 2 or SlimerJS are two headless browsers, each of which can be used in PhantomCSS. A headless browser is a regular browser without a user interface.
Resemble.js is a library for comparing images.
PhantomCSS can use PhantomJS and SlimerJS together, but in this article we will use PhantomJS.
Let’s start testing
Let’s create a tiny test project to see how we can use this tool in practice. To do this, we need a web page that we will test, and a simple Node.js web server for CasperJS to be able to open pages.
Test project setup
Create an index.html file with the following contents:
<! doctype html>
<div class = “tag tag-first”> The moving finger writes, and having written moves on. </div>
<div class = “tag tag-second”> Nor all thy piety nor all thy wit, can cancel half a line of it. </div>
To install the web server, initialize the npm project and install the http-server package.
npm install http-server –save-dev
To start the server, create a simple npm script. Add the scripts block to package.json:
Now you can execute the npm start command in the project directory and the index page will be available at http://127.0.0.1:8080. Start the server and leave it to work. We need him.
Installing PhantomCSS is very simple, all you need to do is add a few dependencies to the project.