- 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
| Artifact | Config Option | Upload Flag |
|---|
| Screenshots | screenshot: 'only-on-failure' | --upload-images |
| Videos | video: 'on-first-retry' | --upload-videos |
| All artifacts | N/A | --upload-full-json |
When to use each
Use screenshots when
Use videos when
- 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:
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
screenshot: 'only-on-failure', // or 'on' for all tests
},
});
'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:
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
screenshot: 'only-on-failure',
},
});
'off': No video'on': Always record'on-first-retry': Record only on retry'retain-on-failure': Keep video only for failed tests
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:
use: {
video: {
mode: 'on-first-retry',
size: { width: 1280, height: 720 }
}
}
Smaller dimensions reduce file size but may result in missing details.
Upload Visual Evidence
| What to upload | Command |
|---|
| Screenshots only | npx tdpw upload ./playwright-report --token="..." --upload-images |
| Videos only | npx tdpw upload ./playwright-report --token="..." --upload-videos |
| Both | npx tdpw upload ./playwright-report --token="..." --upload-images --upload-videos |
| All artifacts | npx tdpw upload ./playwright-report --token="..." --upload-full-json |
View screenshots
- Open a test run
- Click a failed test
- 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
- Open a test run in TestDino
- Click a failed test
- 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 |
Use retain-on-failure options to reduce storage while keeping evidence for failures.
