Skip to content
This repository was archived by the owner on Mar 5, 2022. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
6 changes: 5 additions & 1 deletion examples/visual-testing-with-applitools/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion examples/visual-testing-with-applitools/src/Chart.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
/>

<g transform={'translate(0, 40)'}>
Expand Down