https://github.com/applitools/visual-testing-at-speed
Companion Code for "Visual Regression Testing at the Speed of Unit Testing"
https://github.com/applitools/visual-testing-at-speed
Last synced: 11 months ago
JSON representation
Companion Code for "Visual Regression Testing at the Speed of Unit Testing"
- Host: GitHub
- URL: https://github.com/applitools/visual-testing-at-speed
- Owner: applitools
- License: mit
- Created: 2018-10-25T11:28:50.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-09-09T14:05:38.000Z (almost 7 years ago)
- Last Synced: 2025-04-15T11:46:54.266Z (about 1 year ago)
- Language: JavaScript
- Size: 817 KB
- Stars: 6
- Watchers: 3
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React TodoMVC, including eyes.cypress and eyes.storybook tests
(forked from [Storybook React Samples](https://github.com/kadira-samples/react-storybook-demo), which was
forked from the [Redux examples directory](https://github.com/reactjs/redux/tree/master/examples/todomvc))
This repo includes an app with support for [React Storybook](https://github.com/kadirahq/react-storybook).
It also includes support for visually testing the TodoMVC app using
Applitools' [Storybook SDK](https://npmjs.com/package/@applitools/eyes.storybook) and [Cypress SDK](https://npmjs.com/package/@applitools/eyes.cypress).
## Installation
Run
```sh
npm ci # (or use "npm install" for older versions of node)
```
## Running the TodoMVC app
Run
```sh
npm start
```
Then open `http://localhost:3000` on your browser.
## Showing the storybook
```sh
npm run storybook
```
Then open `http://localhost:9001` on your browser.
## Visual Testing using Cypress
Set the environment variable APPLITOOLS_API_KEY to your Applitools api key.
```sh
export APPLITOOLS_API_KEY= # Mac/Linux
# or...
set APPLITOOLS_API_KEY= # Windows
```
Now run [Cypress](https://cypress.io).
```sh
npm run eyes-cypress
```
Then click on the single test in the Cypress window to run it.
Once the tests passes,
goto [Applitools Eyes Test manager](https://eyes.applitools.com) to see the results.
## Visual Testing using Storybook
Run
```sh
npm run eyes-storybook
```
Then wait for the test to pass, and goto [Applitools Eyes Test manager](https://eyes.applitools.com) to see the results.
## Configuring more browsers to visually test
Edit the file `applitools.config.js` and play around with the `browser` field
to add or remove more browsers/browser widths. (Storybook & Cypress only)
## Visual Testing using Selenium WebDriver
Run
```sh
npm run eyes-selenium
```
Then wait for the test to pass, and goto [Applitools Eyes Test manager](https://eyes.applitools.com) to see the results.
