React Image Regression Test Example

A demo project for the React Grid component, that is tested by Travis on different platforms provided by Sauce Labs.

<Container wrap={{phone: true, tablet: true, desktop: true}}>
    <Item span={{phone: 12, tablet: 6, desktop: 3}}>Content</Item>
    <Item span={{phone: 12, tablet: 6, desktop: 3}}>Content</Item>
    <Item span={{phone: 12, tablet: 6, desktop: 3}}>Content</Item>
</Container>

Tests

The component is tested in three different browsers for three different window sizes. Reference images are checked in gemini/screens directory.

Gemini is used for the image regression tests.

beefy is used to serve fixtures via gemini-beefy plugin.

gemini-sauce is used to connect to Sauce Labs.

Setup

Register with Sauce Labs and put your username and access key into environment variables SAUCE_USERNAME and SAUCE_ACCESS_KEY. Then clone this repo and run npm install.

Commands

npm test runs gemini tests on Sauce Labs
npm run gather gathers gemini reference images
npm run gui starts gemini gui
npm start runs dev server