Playwright Visual Testing

See Playwright visual diffs in TestDino.

Upload Playwright snapshot screenshots to TestDino to review diffs, baselines, and CI context for visual test failures

Quick Reference

Step	Command / Action
Add assertion	await expect(page).toHaveScreenshot()
Run tests	npx playwright test
Upload with images	npx tdpw upload ./playwright-report --upload-images
Update baselines	npx playwright test --update-snapshots

Prerequisites

• Playwright Test and at least one test using toHaveScreenshot() (Playwright Docs)
• A Playwright report directory to upload (example: ./playwright-report)
• A TestDino token available as an environment variable or CI secret
• Upload is configured to include images

Quick Start Steps

1. Add a visual assertion

   Start with a single toHaveScreenshot() assertion.

   import { test, expect } from '@playwright/test';
   
   test('homepage looks correct', async ({ page }) => {
     await page.goto('/');
     await expect(page).toHaveScreenshot();
   });
   

   TestDino can only show visual diffs for tests that generate screenshot comparisons.

2. Run your tests

   Run Playwright as usual.

   npx playwright test
   

   Playwright must generate the screenshots and snapshot comparison output for the run.

3. Upload the report with images

   Upload screenshots so TestDino can render the Visual Comparison panel.

   Upload images

   npx tdpw upload ./playwright-report --token="your-api-key" --upload-images
   

   Upload full JSON and artifacts

   npx tdpw upload ./playwright-report --token="your-api-key" --upload-full-json
   
4. Configure CI upload

   Example GitHub Actions workflow.

   - name: Run Playwright tests
     run: npx playwright test
   
   - name: Upload to TestDino
     if: always()
     run: npx tdpw upload ./playwright-report --token="${{ secrets.TESTDINO_TOKEN }}" --upload-full-json
   

   if: always() ensures uploads happen even when the test job fails, which is when you need the artifacts most.

Examples

View a failed visual test

1. Open the failing run in TestDino
2. Open the failing test case
3. Use the Visual Comparison panel to switch between:
   • Diff
   • Actual
   • Expected

If you do not see the panel, check both:

• The test uses toHaveScreenshot()
• Your upload command includes --upload-images or --upload-full-json

Update baselines after an intentional UI change

If the UI change is expected, update snapshots locally and commit the new baseline.

npx playwright test --update-snapshots

Updating baselines changes what Playwright considers correct for future runs. Review the git diff before committing.