Visual regression testing for Drupal using Gemini

Common practice: testing a lot of pages after small changes in CSS files. Gemini gets you rid of this waste of time. Let’s see how

By ADCI Soutions

Regression testing allows to find bugs caused by the previous changes. This is especially noticeable in the front end. It is common practice — when developers have to test a lot of pages after small changes in CSS files.

I believe that is just a waste of time. We should automate such processes. Although computer vision and AI may be able to solve this problem, nowadays it is difficult to use such technologies. Therefore we will just compare images. For this, you need screenshots of the original and modified pages. There are a lot of tools which allow you to do this not manually. But I prefer to use Gemini.

Gemini is a tool for visual regression testing developed by Yandex. It works with Chrome, Firefox, IE8+ and Opera 12+. Also, it supports some WebDrivers: Selenium Server, Chrome Driver, PhantomJS and cloud WebDrivers, like BrowserStack or SauceLabs.

To install, run this command:

Also, you must have WebDriver and png-img utility.

Pay special attention to config parameters. I would like to highlight a few of the most important ones:

• rootUrl (required) — a URL of your website which will be tested
• gridUrl — a WebDriver URL for making screenshots
• screenshotsDir — a directory to save screenshots
• tolerance — maximum allowable deviation between two screenshots
• windowSize — browser window’s dimensions
• screenshotMode — image capture mode (fullpage or viewport)

Gemini is configured using .gemini.yml file, but you can override all settings via command-line flags.

How to work with Gemini

At the beginning, you have to run you WebDriver. For example, if you use PhantomJS, execute this command:

Because you currently don’t have the reference images with which the following screenshots will be compared, you need to capture them. Just run

and Gemini will generate new reference images for your tests. After that you can compare them with the current state of the pages.

If your tests are failed, Gemini will generate new images in the “reports” folder which will display differences.

How to write Gemini tests

It’s very easy. You need to create a new test file (for example, test.js) and define gemini.suite method in it. Let’s look at a simple example:

The first argument of this method is a name of your test suite. Then we describe a page that we want to test (the homepage in this example), an element on this page and a new state to capture.

How to extend Gemini

Gemini supports the plugin system which can extend its functionality. You can find many useful plugins in this repository. If there is nothing that you need, writing a new one is also very easy.

Gemini plugin is just an npm package. Look at this code:

You need to define one function which will receive 2 arguments: a Gemini object and necessary options.

Afterwords

I hope this article was useful for you and now you understand how easy visual regression testing is. You will no longer need to look through all pages. Now you just can enjoy the development process.

Originally posted at the ADCI Solutions website.

The author is Erlan Aytpaev, Team Lead at ADCI Solutions

Years of experience made Erlan an outstanding full-stack professional who is constantly learning new technologies and adopting them in our company. He claims that each new project teaches him to look at usual things from a different angle.

Follow us on social networks: Twitter | Facebook | LinkedIn

Visual regression testing with BackstopJS_The larger a project, the more time you will spend on regression testing after each change. BackstopJS is a tool which…_codeburst.io