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

​
Quick Reference

StepCommand / Action
Add assertionawait expect(page).toHaveScreenshot()
Run testsnpx playwright test
Upload with imagesnpx tdpw upload ./playwright-report --upload-images
Update baselinesnpx 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.
npx tdpw upload ./playwright-report --token="your-api-key" --upload-images
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.