Visual Testing Demo with Chromatic & Percy
Setup
- Clone this project.
- Install dependencies by using
yarn. - To run component-level testing by Chromatic, please reference the document here.
- To run page-level testing by Cypress and Percy, please reference the document here.
- After integrate Chromatic, Cypress and Percy, the you can run the following testing.
Run Component-Level Testing with Chromatic
Run yarn chromatic in local.
Run Page-Level Testing with Cypress and Percy
Run yarn cy:percy in local.
Run Visual Testing Automatically
In the .github folder, there are two workflow files,
- One is for regular page-level testing by Cypress and Percy in
regular-visual-testing.yml. - Another is for compent-level testing by Chromatic when submit PR in
visual-testing.yml.