Visual regression testing demo with Mugshot and React Component Playground
You first need to install Docker for Mac: https://docs.docker.com/docker-for-mac/
yarn install
yarn run docker:test:visual
-
Install required packages
yarn install
-
Install selenium-standalone and start a server
yarn install selenium-standalone@latest -g selenium-standalone install selenium-standalone start
-
Run a Component Playground instance locally
yarn run playground
The visual test suite will iterate through each component/fixture pair in the playground and check for differences.
-
Run the visual test suite
yarn run test:visual
This will generate the baseline screenshots the first time and will check for differences in subsequent runs.
-
Make a change to the styles of any component (ex: button.less) and re-run the tests.
-
Finally inspect the diffs inside the reporter by opening
visual-report/statics/index.html
in any browser.