Playwright Visual Testing in TestDino

Compare Playwright screenshots with visual diffs in TestDino.

Stream 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
Stream screenshots	@testdino/playwright, no flag needed
Update baselines	npx playwright test --update-snapshots

Prerequisites

• Playwright Test and at least one test using toHaveScreenshot() (Playwright Docs)
• @testdino/playwright configured in playwright.config (CLI reference)
• A TestDino token available as an environment variable or CI secret

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();
   });
   

   Note

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

2. Run your tests

   Set the token and run Playwright as usual. Screenshots stream to TestDino during the run.

   export TESTDINO_TOKEN="$TESTDINO_TOKEN"
   npx playwright test
   

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

3. Run in CI

   Example GitHub Actions step. Set TESTDINO_TOKEN and run tests. Results stream during the run.

   - name: Run tests with TestDino
     env:
       TESTDINO_TOKEN: ${{ secrets.TESTDINO_TOKEN }}
     run: npx playwright test
   

   Tip

   Results stream live even when tests fail, so visual failures land on the dashboard without a separate upload step.

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()
• @testdino/playwright is configured in playwright.config

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

Warning

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