Files
cypress/npm/react/examples/visual-testing-with-happo
Jess 0e7b555f93 feat: swap the #__cy_root id selector to become data-cy-root for component mounting (#20951)
* Change #__cy_root selector for CT mounting point to be a data-cy-root selector

* moving all of the gets for the container element into the mount-utils

* Force HTMLElement instead of Element

* unskip vue2 tests

Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>
Co-authored-by: Tim Griesser <tgriesser10@gmail.com>
2022-04-13 16:08:35 -04:00
..
2021-11-02 10:24:39 -04:00

example: visual-testing-with-happo Happo Dashboard

Visual component testing using Happo.io

Usage

  1. Make sure the root project has been built .
# in the root of the project
npm install
npm run build
  1. Run npm install in this folder to symlink the @cypress/react dependency.
# in this folder
npm install
  1. Start Cypress
npm run cy:open
# or just run headless tests
npm test

Notes

Here's an example PR with code a change where we forgot to update the styles with additional classes: #210

Notice that CircleCI passes the test, because functionally it worked, but the Happo CI check shows a failure:

CI checks

Happo report shows 3 views:

Side by side

Side by side view

Diff

Diff view

Swipe

Swipe view