Understanding Visual Regression Tests with PhantomCSS in best manner

Introduction Visual Regression Tests

Imagine you are developing a layout, worrying about every detail in order to leave it exactly as the designer defined it. Once completed and delivered, the need arises for a small change. Add a registration button in the login form. This change of adding the registration button ended\\s up modifying the style of other components of the page. To avoid uncomfortable situations with the client, we can rely on automated tests that compare pixel by pixel of a page, making any change crystal clear. Visual regression tests capture the photo of a site (or part of it) and use it as a basis for comparing it with upcoming versions. Whenever they find any difference, the test is deemed to have failed. There are several tools to run this type of test, but in this article, we will talk specifically about one, PhantomCSS.

What is PhantomCSS?

PhantomCSS is a combination of three tools:

• PhantomJS or SlimerJS are headless browsers that allow access to web pages and capture photos.
• CasperJS is a tool that allows you to navigate and interact with the pages rendered by the browser. With it, we can simulate clicks, fill out forms, and perform JavaScript functions.
• ResembleJS is a library that compares images.

How Does the Practice Apply?

We created a repository on GitHub where it is very simple to see how tests with PhantomCSS work. All you need to do is download it and execute the following commands:

• First npm install to download the project dependencies;
• npm start to start HTTP server;
• npm test whenever you want to run the tests.

After running the test you can see that a screenshots folder has been created. Inside it is the photo of the page which will be used as a base. Now that we’ve seen the login form ready, we can make the change to add the sign-up button. To make it easier to leave the COMMENTED HTML and CSS codes, remove the comments and run the test again. With the changes made, we can see that our test failed and the failures folder was created. In it, we can see exactly the differences between one version and another. The changes should have been made only on the buttons, but it is quite clear that it also changes the link forgot my password. In this case, we quickly identified unexpected behavior with the help of visual regression testing. But what if we make a change of purpose? If something expected as in the case of buttons? In this case, we can run the command with an additional attribute:

npm test --rebase

Now we will use the current photo as the basis for the next tests.

Conclusion

Now that we know the visual regression tests we can use them in the development of our applications, creating and modifying components of the interface without fear of breaking others.

Also Read: Guide To Visual Regression Testing & it's Tools