> ## 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://testdinostr.blob.core.windows.net/docs/posters/docs__guides__visual-testing__visual-comparison.jpg" uploadDate="2026-05-10T00:00:00+00:00" contentUrl="https://testdinostr.blob.core.windows.net/docs/docs/guides/visual-testing/visual-comparison.mp4" embedUrl="https://docs.testdino.com/guides/playwright-visual-testing" />

<Callout icon="book-open" color="#3B82F6">
  **What you'll learn**

  * How to upload and view visual snapshot diffs
  * How to compare baseline vs actual screenshots
  * What comparison modes are available (diff, side-by-side, slider)
</Callout>

Upload 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://testdinostr.blob.core.windows.net/docs/posters/docs__guides__visual-testing__visual-comparison.jpg" src="https://testdinostr.blob.core.windows.net/docs/docs/guides/visual-testing/visual-comparison.mp4" />

## 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](#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))
* 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

<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">
    Run Playwright as usual.

    ```bash theme={null}
    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="Upload the report with images">
    Upload screenshots so TestDino can render the Visual Comparison panel.

    <Tabs>
      <Tab title="Upload images">
        ```bash theme={null}
        npx tdpw upload ./playwright-report --token="your-api-key" --upload-images
        ```
      </Tab>

      <Tab title="Upload full JSON and artifacts">
        ```bash theme={null}
        npx tdpw upload ./playwright-report --token="your-api-key" --upload-full-json
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Configure CI upload">
    Example GitHub Actions workflow.

    ```yaml theme={null}
    - 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
    ```

    <Tip>
      **Tip**

      `if: always()` ensures uploads happen even when the test job fails, which is when you need the artifacts most.
    </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()`
* 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.

```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>