gemini

Gemini

We are using Gemini for visual regression testing to avoid bugs and minimize unintended side-effects caused by refactoring/adjustments of code.

Gemini allows you to:

• Test with different browsers at the same time:
  • Google Chrome (tested in latest version)
  • Mozilla Firefox (tested in latest version)
  • Internet Explorer 8+
  • Opera 12+
• Test separate sections of a web page
• Gather CSS test coverage statistics

— https://gemini-testing.github.io/

Setup

Have a look into the ./tests folder. There is a simple and self-explanatory example test for the button-primary component.

If you run the test out-of-the-box¹ it should pass 👍.

If you make any changes to the styles of that component, that will affect the visual appearance, the test will fail 👎.

In case the new styles are correct and should be the new master version, you need to update the reference images that Gemini has created for the test. Therefor simply run npm run test:visual:update.

ℹ️ See the official documentation for additional information and instructions.

¹ Make sure the rootUrl is correct.

Commands

# run visual regression tests (doesn’t update styleguide beforehand)
npm run test:visual

# capture or update reference images
npm run test:visual:update

Note: All commands above internally use the ./bin/gemini bash script. Every parameter you add to those scripts will be passed directly to the real Gemini binary.

For example:

# run tests with different root url
npm run test:visual -- --root-url http://example.com

# produce an html file with reference image, current image and differences
# between them, for each state in each browser.
npm run test:visual -- --reporter html

# only run tests belonging to the buttons group
npm run test:visual -- --grep /buttons/

ℹ️ See Gemini commands and Gemini configuration#Overriding settings for additional information and instructions.

gridonic.ch ・ gridonic.github.io ・ @gridonic