> ## Documentation Index
> Fetch the complete documentation index at: https://docs.testdino.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Playwright Visual Testing in TestDino

> Compare Playwright screenshots with visual diffs in TestDino.

export const VideoSchema = ({name, description, thumbnailUrl, uploadDate, duration, contentUrl, embedUrl}) => {
  const schema = {
    "@context": "https://schema.org",
    "@type": "VideoObject",
    name,
    description,
    thumbnailUrl,
    uploadDate,
    ...duration ? {
      duration
    } : {},
    ...contentUrl ? {
      contentUrl
    } : {},
    ...embedUrl ? {
      embedUrl
    } : {},
    publisher: {
      "@type": "Organization",
      name: "TestDino",
      logo: {
        "@type": "ImageObject",
        url: "https://docs.testdino.com/logo/light.svg"
      }
    }
  };
  return <script type="application/ld+json" dangerouslySetInnerHTML={{
    __html: JSON.stringify(schema)
  }} />;
};

<VideoSchema name="Playwright Visual Testing in TestDino" description="How to upload Playwright snapshot screenshots to TestDino and review visual diffs with side-by-side, slider, and baseline comparison modes." thumbnailUrl="https://tdstorageus.blob.core.windows.net/public/docs/debug-and-analyze/quality-checks/playwright-visual-testing/visual-comparison-poster.jpg" uploadDate="2026-05-10T00:00:00+00:00" contentUrl="https://tdstorageus.blob.core.windows.net/public/docs/debug-and-analyze/quality-checks/playwright-visual-testing/visual-comparison.mp4" embedUrl="https://docs.testdino.com/guides/playwright-visual-testing" />

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

<video controls loop preload="metadata" aria-label="Playwright visual testing comparison viewer showing diff, side-by-side, and slider modes" poster="https://tdstorageus.blob.core.windows.net/public/docs/debug-and-analyze/quality-checks/playwright-visual-testing/visual-comparison-poster.jpg" src="https://tdstorageus.blob.core.windows.net/public/docs/debug-and-analyze/quality-checks/playwright-visual-testing/visual-comparison.mp4" />

## 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](#update-baselines-after-an-intentional-ui-change) | `npx playwright test --update-snapshots` |

### Prerequisites

* Playwright Test and at least one test using `toHaveScreenshot()` ([Playwright Docs](https://playwright.dev/docs/docs/test-snapshots))
* `@testdino/playwright` configured in `playwright.config` ([CLI reference](/cli/testdino-playwright-nodejs))
* A TestDino token available as an environment variable or CI secret

## Quick Start Steps

<Steps>
  <Step title="Add a visual assertion">
    Start with a single `toHaveScreenshot()` assertion.

    ```javascript theme={null}
    import { test, expect } from '@playwright/test';

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

    <Note>
      **Note**

      TestDino can only show visual diffs for tests that generate screenshot comparisons.
    </Note>
  </Step>

  <Step title="Run your tests">
    Set the token and run Playwright as usual. Screenshots stream to TestDino during the run.

    ```bash theme={null}
    export TESTDINO_TOKEN="$TESTDINO_TOKEN"
    npx playwright test
    ```

    [Playwright](https://playwright.dev/docs/docs/test-snapshots) must generate the screenshots and snapshot comparison output for the run.
  </Step>

  <Step title="Run in CI">
    Example GitHub Actions step. Set `TESTDINO_TOKEN` and run tests. Results stream during the run.

    ```yaml theme={null}
    - name: Run tests with TestDino
      env:
        TESTDINO_TOKEN: ${{ secrets.TESTDINO_TOKEN }}
      run: npx playwright test
    ```

    <Tip>
      **Tip**

      Results stream live even when tests fail, so visual failures land on the dashboard without a separate upload step.
    </Tip>
  </Step>
</Steps>

## 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.

```bash theme={null}
npx playwright test --update-snapshots
```

<Warning>
  **Warning**

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