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:
npm install -g geminiAlso, 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:
phantomjs --webdriver=4444Because you currently don’t have the reference images with which the following screenshots will be compared, you need to capture them. Just run
gemini updateand Gemini will generate new reference images for your tests. After that you can compare them with the current state of the pages.
gemini testIf 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:
gemini.suite('my-test-website', (suite) => {
suite.setUrl('/')
.setCaptureElements('footer')
.capture('plain');
});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:
module.exports = function(gemini, options) {
console.log('Hello, %s' options.name);
};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.
