> ## 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.
# Visual Evidence for Test Failures
> View screenshots, videos, and visual diffs for failed tests.
* **Screenshots** capture the UI state at specific moments.
* **Videos** record the full test execution.
Use them to identify visual issues, timing problems, and unexpected behavior.
## Quick Reference
Screenshots and videos are controlled by your Playwright config. `@testdino/playwright` streams them to TestDino during the run. Use this table as a checklist for your setup.
| Artifact | Config Option | Streamed by |
| :---------- | :------------------------------ | :-------------------------------------------------------- |
| Screenshots | `screenshot: 'only-on-failure'` | [`@testdino/playwright`](/cli/testdino-playwright-nodejs) |
| Videos | `video: 'on-first-retry'` | [`@testdino/playwright`](/cli/testdino-playwright-nodejs) |
| Traces | `trace: 'on-first-retry'` | [`@testdino/playwright`](/cli/testdino-playwright-nodejs) |
## When to use each
* The error mentions a missing or incorrect element
* You need to verify the UI layout
* You want quick visual confirmation
* Screenshots look correct, but the test still failed
* You suspect timing or animation issues
* You need to see the sequence of events
## Enable screenshots
Playwright captures screenshots on failure by default. Configure additional options:
```typescript theme={null}
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
screenshot: 'only-on-failure', // or 'on' for all tests
},
});
```
Screenshot Options:
* `'off'`: No screenshots
* `'on'`: Screenshot after every test
* `'only-on-failure'`: Screenshot only when test fails (recommended)
## Enable video recording
Configure video recording in your Playwright config:
```typescript theme={null}
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
video: 'on-first-retry',
},
});
```
Video options:
* `'off'`: No video
* `'on'`: Always record
* `'on-first-retry'`: Record only on retry
* `'retain-on-failure'`: Keep video only for failed tests
**Tip**
Videos add overhead and file size. Use `'on-first-retry'` to capture evidence for flaky tests without slowing every run.
### Video size settings
Control video dimensions:
```typescript theme={null}
use: {
video: {
mode: 'on-first-retry',
size: { width: 1280, height: 720 }
}
}
```
**Note**
Smaller dimensions reduce file size but may result in missing details.
## Stream Visual Evidence
`@testdino/playwright` streams screenshots, videos, and traces to TestDino during the run. What reaches the dashboard follows your Playwright config, so no upload flag is needed.
| What to capture | Playwright config |
| :--------------------- | :------------------------------ |
| Screenshots on failure | `screenshot: 'only-on-failure'` |
| Videos on retry | `video: 'on-first-retry'` |
| Traces on retry | `trace: 'on-first-retry'` |
Set the token and run tests. Artifacts stream during the run:
```bash theme={null}
export TESTDINO_TOKEN="$TESTDINO_TOKEN"
npx playwright test
```
Pass `--no-artifacts` to `npx tdpw test` to skip screenshot, video, and trace streaming.
## View screenshots
1. Open a test run
2. Click a failed test
3. Go to the Screenshots section in the evidence panel
Screenshots show the page state at the moment of failure. For tests with retries, each attempt has its own screenshots.
### What to look for
| Issue | What You See |
| :-------------- | :----------------------------------------------- |
| Missing element | Element not present in the expected location |
| Wrong content | Text or data does not match the assertion |
| Layout shift | Elements in unexpected positions |
| Loading state | Spinners, skeletons, or placeholders are visible |
| Modal blocking | Overlay covering the target element |
| Wrong page | Navigation did not complete |
## View videos
1. Open a test run in TestDino
2. Click a failed test
3. Go to the Video section in the evidence panel
The video player shows the full test execution. Use the timeline to jump to specific moments.
### What to look for
| Issue | What You See |
| :-------------------- | :------------------------------------------------------- |
| Race condition | Element appears after the test tries to interact |
| Animation issue | Test clicks during transition |
| Slow load | Page is still loading when the test acts |
| Unexpected popup | Modal or alert blocks interaction |
| Wrong element clicked | Visible in the video but not obvious from the screenshot |
## Visual Comparison
For tests using `toHaveScreenshot()`, TestDino shows visual diffs:
| Mode | What it shows |
| :----------- | :---------------------- |
| Actual | What the test captured |
| Expected | The baseline image |
| Diff | Highlighted differences |
| Side by Side | Both images together |
| Slider | Interactive comparison |
## Console Logs
The Console section shows browser console output:
* JavaScript errors
* Application logs
* Network errors
* Warnings
Console logs correlate visual issues with underlying errors.
## Debugging with Visual Evidence
### Screenshots
* Check if expected elements are visible
* Look for error messages or loading states
* Compare with the expected UI
### Videos
* Watch the sequence of actions
* Identify timing issues
* See animations and transitions that screenshots miss
### Visual comparison
* Spot unintended UI changes
* Verify layout consistency
* Detect rendering differences across environments
## Storage Limits
Visual artifacts increase storage usage. Configure retention based on your plan:
| Plan | Artifact Storage |
| :--------- | :--------------- |
| Community | 1 GB |
| Pro | 5 GB |
| Team | 10 GB |
| Enterprise | Custom |
**Tip**
Use `retain-on-failure` options to reduce storage while keeping evidence for failures.
## Related
Step-by-step execution analysis
Find patterns across failures
Screenshot comparison setup
CLI setup and options