This is sample project presenting Playwright Visual Testing. Design patters, such as POM or builders etc, were not implemented, to focus on simple visual testing.

More info: https://playwright.dev/docs/test-snapshots

1. Install packages (before first run):

   npm i
   npx playwright install
   

2. Run all tests by:

   npm run all
   

All reports are generated into directory playwright-report. Additional files are generated into directory test-results.

Run all tests for Visual comparisons with:

npm run vt

Update screenshots with:

npm run vt-update

More: https://playwright.dev/docs/test-snapshots

To use codegen:

npx playwright codegen [PAGE_ADDRESS]

More: https://playwright.dev/docs/codegen

Playwright Trace Viewer is a GUI tool that helps exploring recorded Playwright traces after the script ran.

To use it:

1. run test with trace set to ON - in config : trace: 'on'

2. after test run check where it was created (check outputDir in your config file),

3. run command with proper path to zip file:

   npx playwright show-trace trace.zip
   

More: https://playwright.dev/docs/trace-viewer

To use custom config file:

npx playwright test --config=config/playwright.config.ts