Workshop: Getting Started with Playwright Visual Testing

Setup

Set up Wopee.io

• Navigate to https://cmd.wopee.io/
• Create an account (auto-registration with GitHub is available and recommended)
• Create a new integration project
• Create a new API key for the project

Set up VS Code and Playwright

• Install Node.js: https://nodejs.org/en/download/
• Set up VS Code and Playwright: https://playwright.dev/docs/getting-started-vscode

Clone this repository

In VS code: Ctrl+Shift+P -> Git: Clone -> link to this repository

https://github.com/autonomous-testing/ws-getting-started-w-playwright-visual-testing

Set up the environment

export WOPEE_API_KEY=your_api_key

Get your WOPEE_API_KEY from Wopee.io commander (Navigate to project > Project Settings > API KEYS tab > Create new key).

Install node dependencies

npm i

Agenda

1. First test: npx playwright test tests/1-first.spec.ts

2. Working with reports:

• Change the baseUrl by adding /gallery.html to the URL
• Run the test: npx playwright test tests/1-first.spec.ts again
• Open the report in the browser: npx playwright show-report
• Explore how visual diffs are reported

3. Updating snapshots: npx playwright test -u

   Alternatively: You can update only some tests, see Playwright documentation about Command line options and Tagging test

4. Why Visual Testing is a good idea and why not (slides).

5. Testing specific element: npx playwright test tests/2-element.spec.ts

6. Running tests in UI mode: npx playwright test --headed tests/2-element.spec.ts or npx playwright test --ui

7. More advanced visual testing: npx playwright test tests/3-advanced.spec.ts

   See also documentation: toHaveScreenshot

8. Good practices for visual testing (slides).

9. First test with Wopee.io: npx playwright test tests/w1-basics.spec.ts

• Wopee.io Commander: https://cmd.wopee.io/
• Make sure key WOPEE_API_KEY is set up correctly

10. Working with Wopee.io commander:

• Approve baseline
• Explore how visual diffs are reported
• Explore baseline tab

11. [optional]

• Testing specific element: npx playwright test tests/w2-element.spec.ts
• More options for visual testing, more complex scenario example: npx playwright test tests/3-more.spec.ts

12. Other ideas (slides).

Next steps

• Learn more from our blog: Getting Started with Playwright Visual Testing

• Do you have any idea how to improve this workshop or Wopee.io? Share it with us

• Do you have any questions or need help? Ask us here

• Would you like to help us improve Wopee.io? PRs are welcome here