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 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 files. Regression testing CSS 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 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. screenshots 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. Gemini To install, run this command: Also, you must have and png-img utility. WebDriver 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) is configured using .gemini.yml file, but you can override all settings via command-line flags. Gemini How to work with Gemini At the beginning, you have to run you WebDriver. , if you use PhantomJS, execute this command: For example 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 will generate new reference images for your tests. After that you can compare them with the current state of the pages. Gemini If your tests are failed, will generate new images in the “reports” folder which will display differences. Gemini How to write Gemini tests 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: It’s very easy. The first argument of this method is a name of your . 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. test suite How to extend Gemini supports the plugin system which can extend its functionality. You can find many useful plugins in . If there is nothing that you need, writing a new one is also very easy. Gemini this repository is just an npm package. Look at : Gemini plugin this code You need to define one function which will receive a Gemini object and necessary options. 2 arguments: Afterwords I hope this article was useful for you and now you understand how easy is. You will no longer need to look through all pages. Now you just can enjoy the development process. visual regression testing 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 _The larger a project, the more time you will spend on regression testing after each change. BackstopJS is a tool which…_codeburst.io Visual regression testing with BackstopJS
