Cypress

Commands

npx cypress open

Actions

Interacting with Elements | Cypress Documentation

Assertions

Assertions | Cypress Documentation

• can have multiple assertions

Code generator

https://chrome.google.com/webstore/detail/cypress-scenario-recorder/fmpgoobcionmfneadjapdabmjfkmfekb?hl=en

Visual Regression Testing and Reports

https://github.com/jaredpalmer/cypress-image-snapshot

✅ Report with diff screenshots

❌ Can't compare two different urls

Browsers

• Chrome
• electron
• chromium
• edge
• firefox

Other Features

• √ component tests (React and Vue only?)
• √ action interface for easy debugging

Resources

• https://medium.com/norwich-node-user-group/visual-regression-testing-with-cypress-io-and-cypress-image-snapshot-99c520ccc595

Playwright

Getting started | Playwright

Commands

npx playwright test

npx playwright test --headed

Actions

Auto-waiting | Playwright

Assertions

Assertions | Playwright

Code generator

npx playwright codegen [url]

Visual Regression Testing and Reports

playwright test -g [localtestname]

playwright test -g [prodtestname] --update-snapshots

❌ No report

✅ Can compare two urls with some hacking

Browsers

Must be installed with npx playwright install

• chromium, chrome, chrome-beta, msedge, msedge-beta, msedge-dev, firefox, webkit

BackstopJS

asdf

Ghost Inspector