Screenshot Testing

Screenshot tests run on CI using Saucelabs. Each branch's stories are compared against their baseline to detect any regressions.

Adding new tests

New tests are added automatically. When adding a new story, push your changes to CI. If there are no other errors, CI will push a commit with the new screenshots to your branch.

Updating tests

To update tests, delete the baseline image of the test you want to update and push your deletion. CI will add a commit with the updated image.

Baseline images are located in the __screenshots__ subfolder for each story.

Running tests locally

Generated screenshots require some additional setup to work locally. Rely on CI to generate images for you if you can instead.

Because we don't have a SauceLabs tunnel set up, if you want to run these commands locally, you will need to make an endpoint publicly available. ngrok makes it easy.

1. Install ngrok (yarn global add ngrok)
2. On a separate process, run yarn start to start the local server
3. Run ngrok http 9001 to get a publicly available URL
4. Visit that URL to confirm it's working (it should look like: https://f81c31a2.ngrok.io)

To access SauceLabs, you'll need an account there, you can create one for free. Once created, add the username as an environment variable at SAUCE_USERNAME and the access key from User Settings at SAUCE_ACCESS_KEY.

Now we should be able to run image tests locally (but on SauceLabs) with:

Bash

yarn test:image -- --url ${ngrokUrl}/iframe.html