cesar3030 / percy-demo

Demo of using Percy for automated image-based testing

Percy Demo

This project showcases using Percy for automated image-based tests.

Goal

Run 3 types of tests via CI:

1. Jest
2. Automatically generated Visual Storybook tests via Percy for all stories. Anytime a story changes visually, the CI server should block the build.
3. Visual app tests via Cypress and Percy. Declare a visual test in Cypress via a single command: cy.percySnapshot().

Quick Start

npm i
npm start

This project was bootstrapped with Create React App.

How was this built?

1. Run create-react-app: npx create-react-app percy-demo
2. Add Storybook: npx -p @storybook/cli sb init

How was storybook for Percy added?

1. Add Percy for Storybook: npm i --save-dev @percy/storybook
2. Add "snapshot" npm script to run Percy against Storybook
3. Create a new project on Percy's site called percy-demo.
4. Select the percy-demo project. Under integrations tab, click "GitHub", then connect my GitHub account.
5. Link the Percy project to this GitHub repo under the organizations->integrations tab on the Percy site.
6. 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.
7. Add PERCY_TOKEN to TravisCI environment variables.
8. Add .travis.yml

How was Percy Cypress image support added?

1. npm i cypress @percy/cypress
2. Add to cypress/support/commands.js
3. Add npm script for ci: percy-cypress-app:ci