This project showcases using Percy for automated image-based tests.
Run 3 types of tests via CI:
- Jest
- Automatically generated Visual Storybook tests via Percy for all stories. Anytime a story changes visually, the CI server should block the build.
- Visual app tests via Cypress and Percy. Declare a visual test in Cypress via a single command:
cy.percySnapshot()
.
npm i
npm start
This project was bootstrapped with Create React App.
- Run create-react-app:
npx create-react-app percy-demo
- Add Storybook:
npx -p @storybook/cli sb init
- Add Percy for Storybook:
npm i --save-dev @percy/storybook
- Add "snapshot" npm script to run Percy against Storybook
- Create a new project on Percy's site called
percy-demo
. - Select the
percy-demo
project. Under integrations tab, click "GitHub", then connect my GitHub account. - Link the Percy project to this GitHub repo under the organizations->integrations tab on the Percy site.
- Create pull request in GitHub. Add TravisCI to GitHub repo by clicking "several apps are available" under "Continuous integration has not been set up" in the PR. Select TravisCI.
- Add PERCY_TOKEN to TravisCI environment variables.
- Add .travis.yml
npm i cypress @percy/cypress
- Add to cypress/support/commands.js
- Add npm script for ci:
percy-cypress-app:ci