diff --git a/README.md b/README.md index cd7d3910..1c1da4e5 100644 --- a/README.md +++ b/README.md @@ -258,7 +258,7 @@ If you are using [plugins/cra-v3](plugins/cra-v3) it instruments the code on the ## Visual testing -You can use any Cypress [Visual Testing plugin](https://on.cypress.io/plugins#visual-testing) to perform [visual testing](https://on.cypress.io/visual-testing) from the component tests. This repo has several example projects, see [visual-sudoku](examples/visual-sudoku), [visual-testing-with-percy](examples/visual-testing-with-percy), and [visual-testing-with-happo](examples/visual-testing-with-happo). +You can use any Cypress [Visual Testing plugin](https://on.cypress.io/plugins#visual-testing) to perform [visual testing](https://on.cypress.io/visual-testing) from the component tests. This repo has several example projects, see [visual-sudoku](examples/visual-sudoku), [visual-testing-with-percy](examples/visual-testing-with-percy), [visual-testing-with-happo](examples/visual-testing-with-happo), and [visual-testing-with-applitools](examples/visual-testing-with-applitools). For a larger Do-It-Yourself example with an hour long list of explanation videos, see [bahmutov/sudoku](https://github.com/bahmutov/sudoku) repository. diff --git a/examples/visual-testing-with-applitools/README.md b/examples/visual-testing-with-applitools/README.md index c935c33e..340c43de 100644 --- a/examples/visual-testing-with-applitools/README.md +++ b/examples/visual-testing-with-applitools/README.md @@ -10,4 +10,8 @@ The `cy.eyes*` commands are ignored during local interactive run. On CI, the `cy ![Test result](images/result.png) -For more information, see [Applitools tutorial](https://applitools.com/tutorials/cypress.html) +For more information, see [Applitools tutorial](https://applitools.com/tutorials/cypress.html). + +If there is a difference in visual output, Applitools catches it and fails the test run. The [Applitools Dashboard](https://applitools.com/) then allows you to review the changes, determine the root cause for the change, and maybe approve the visual changes to update the baseline images. + +![Applitools difference view](images/applitools-diff.png) diff --git a/examples/visual-testing-with-applitools/images/applitools-diff.png b/examples/visual-testing-with-applitools/images/applitools-diff.png new file mode 100644 index 00000000..9d129fe2 Binary files /dev/null and b/examples/visual-testing-with-applitools/images/applitools-diff.png differ diff --git a/examples/visual-testing-with-applitools/src/Chart.js b/examples/visual-testing-with-applitools/src/Chart.js index d3324f86..c2af44b1 100644 --- a/examples/visual-testing-with-applitools/src/Chart.js +++ b/examples/visual-testing-with-applitools/src/Chart.js @@ -28,7 +28,7 @@ export class CustomTheme extends React.Component { x={425} y={55} style={styles.labelTwo} - text={'Dinosaur exports\n $bn'} + text={'Dinosaur 🦕🦖 exports\n $bn'} />