- OSX Ventura with Git and Brew
- Linux with bash curl and git
- Windows with NodeJS 18 (untested)
- Sauce Labs Account
- Install Node.js 18 on Mac:
brew install node@18- Install Node.js 18 + Dependencies on Linux:
curl -fsSLO https://deb.nodesource.com/nsolid_setup_deb.sh
chmod +x nsolid_setup_deb.sh
./nsolid_setup_deb.sh 18
apt-get install nodejs -y
apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb- Clone the repo:
git clone https://github.com/saucelabs/visual-examples
cd visual-examples/cypress- install npm dependencies:
npm install- Configure with your Sauce credentials from https://app.saucelabs.com/user-settings and run
export SAUCE_USERNAME=__YOUR_SAUCE_USER_NAME__
export SAUCE_ACCESS_KEY=__YOUR_SAUCE_ACCESS_KEY__
# to change the region you are testing in please change the `region` property in the cypress.config.ts file.- Run the test
npm run sauce-visual- Review your screenshots by clicking on the url printed in the test or go to https://app.saucelabs.com/visual/builds.
- Accept all diffs, so they become new baselines.
- Re-run the tests
npm run sauce-visual-check- Open the test or go to https://app.saucelabs.com/visual/builds to review changes.
Alternatively, you can run your tests on Sauce Labs.
- Install
saucectl
npm install saucectl- Install the plugin in your
.sauce/config.yml
[...]
npm:
packages:
"@saucelabs/cypress-visual-plugin": "^0.3.33"
[...]- Run saucectl
npx saucectl run-
Review your screenshots by clicking on the url printed in the test or go to https://app.saucelabs.com/visual/builds.
-
Accept all diffs, so they become new baselines.
-
Run saucectl (with a modified screen)
VISUAL_CHECK=true npx saucectl run- Go to https://app.saucelabs.com/visual/builds to review changes.
View installation and usage instructions on the Sauce Docs website.