Gemini is a utility for regression testing the visual appearance of web pages.
Gemini allows you to:
Work with different browsers:
Test separate sections of a web page
outline properties when calculating element position and size
Ignore some special case differences between images (rendering artifacts, text caret, etc.)
Gather CSS test coverage statistics
Gemini was created at Yandex and is especially useful to UI library developers.
npm install -g gemini npm install -g selenium-standalone selenium-standalone install
.gemini.js file in the root of your project:
moduleexports =rootUrl: ''gridUrl: ''browsers:chrome:desiredCapabilities:browserName: 'chrome';
Write a test and put it in the
gemini folder in the root of your project:
You have written a new test and should save a reference image for it:
selenium-standalone in a separate tab before running the tests:
Run gemini tests:
WebDriver server implementation. There are several options:
Selenium Server — for testing in
different browsers. Launch with the
selenium-standalone start command.
ChromeDriver — for
testing in Google Chrome. Launch with the
chromedriver --port=4444 --url-base=wd/hub command.
PhantomJS — launch with the
phantomjs --webdriver=4444 command.
To install the utility, use the npm
npm install -g gemini
Global installation is used for launching commands.
Gemini is configured using a config file at the root of the project. Gemini can use one of the following files:
Let's say we want to run our tests only in the locally installed
In this case, the minimal configuration file will only need to have the root URL
of your web app and the WebDriver capabilities of
rootUrl: http://yandex.combrowsers:PhantomJS:desiredCapabilities:browserName: phantomjs
Also, you need to run
PhantomJS manually in
If you are using a remote WebDriver server, you can specify its URL with the
rootUrl: http://yandex.comgridUrl: http://selenium.example.com:4444/wd/hubbrowsers:chrome:desiredCapabilities:browserName: chromeversion: "45.0"firefox:desiredCapabilities:browserName: firefoxversion: "39.0"
You can also set up each browser to have its own node:
rootUrl: http://yandex.combrowsers:chrome:gridUrl: http://chrome-node.example.com:4444/wd/hubdesiredCapabilities:browserName: chromeversion: "45.0"firefox:gridUrl: http://firefox-node.example.com:4444/wd/hubdesiredCapabilities:browserName: firefoxversion: "39.0"
See the details of the config file structure and available options.
Each of the blocks that are being tested may be in one of the determined states. States are tested with the help of chains of step-by-step actions declared in a block's test suites.
For example, let's write a test for a search block at yandex.com:
We are creating a new test suite
yandex-search, assuming that we will capture the
.search2__input element from the root URL
http://yandex.com. We know that the
block has two states:
plain— right after the page is loaded
with text— with the
hello geminitext inserted into
States are executed one after another in the order in which they are defined, without the browser reloading in between.
See the details of test creation methods.
To complete the test creation procedure, you need to take reference shots using the following command:
gemini update [paths to test suites]
To launch a test (to compare the current state of a block with a reference shot), use the command:
gemini test [paths to test suites]
See the details of interaction with CLI and available options.
You can use the
Gemini graphical user interface instead of the command line. It
is located in the gemini-gui package
and must be installed additionally:
npm install -g gemini-gui
Handy preview of reference shots
Clear real-time demonstration of the differences between a reference shot and the current state of a block
Easy to update reference shots
To see the difference between the current state of a block and a reference picture more clearly, use the HTML reporter - plugin for gemini. This plugin produces HTML report, which displays reference image, current image and differences between them, for each state in each browser. When all tests are completed, you will see a link to HTML report.
To use Gemini in your scripts or build tools, you can use the experimental programmatic API.
To learn more about all events in Gemini, see the events documentation.