cypress/npm/react/examples/visual-sudoku

example: visual tests for Sudoku

This React Sudoku app was cloned from raravi/sudoku.

Visual testing uses open source palmerhq/cypress-image-snapshot plugin.

Usage

1. Make sure the root project has been built .

# in the root of the project
npm install
npm run build

2. Run npm install in this folder to symlink the @cypress/react dependency.

# in this folder
npm install

3. Start Cypress

npm run cy:open
# or just run headless tests
npm test

Running Tests

Example failing test src/App.cy-spec.js

Because there is a difference in the numbers displayed on the board

The saved snapshots are saved in cypress/snapshots folder and committed to the repo.

Consistent images

If we generate images on Mac, they will be different from images generated on Linux CI

• the images will be twice as large because in the headed mode Mac's DPI is 2x
• even in non-interactive mode using cypress run, due to fonts rendering, the images will be slightly different from Linux images

Thus I recommend generating / updating images using a Docker container cypress/included. You can run it using npm script npm run docker:run which executes

# map the entire repo as a volume
# and set the working directory to the current folder
docker run -it -v $PWD/../..:/e2e \
  -w /e2e/examples/visual-sudoku cypress/included:4.5.0

If you want to update the saved snapshots, run the script with environment variable

npm run docker:run -- --env updateSnapshots=true

See cypress-image-snapshot docs.

Full example

For a larger Do-It-Yourself example with an hour long list of explanation videos, see bahmutov/sudoku repository, read the blog post Visual testing for React components using open source tools and flip through slides I See What is Going On.