Skip to main content
What you’ll learn
  • How to enable and view screenshots and video recordings
  • How to configure capture modes for different scenarios
  • How visual evidence appears in the TestDino UI
  • 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 require specific Playwright config and upload flags. Use this table as a checklist for your setup.
ArtifactConfig OptionUpload Flag
Screenshotsscreenshot: 'only-on-failure'--upload-images
Videosvideo: 'on-first-retry'--upload-videos
All artifactsN/A--upload-full-json

​
When to use each

  • The error mentions a missing or incorrect element
  • You need to verify the UI layout
  • You want quick visual confirmation

​
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
  },
});
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: 
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    screenshot: 'only-on-failure',
  },
});
Video options:
  • 'off': No video
  • 'on': Always record
  • 'on-first-retry': Record only on retry
  • 'retain-on-failure': Keep video only for failed tests
TipVideos 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 }
  }
}
NoteSmaller dimensions reduce file size but may result in missing details.

​
Upload Visual Evidence

What to uploadCommand
Screenshots onlynpx tdpw upload ./playwright-report --token="..." --upload-images
Videos onlynpx tdpw upload ./playwright-report --token="..." --upload-videos
Bothnpx tdpw upload ./playwright-report --token="..." --upload-images --upload-videos
All artifactsnpx tdpw upload ./playwright-report --token="..." --upload-full-json

​
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. Evidence panel showing screenshots section

​
What to look for

IssueWhat You See
Missing elementElement not present in the expected location
Wrong contentText or data does not match the assertion
Layout shiftElements in unexpected positions
Loading stateSpinners, skeletons, or placeholders are visible
Modal blockingOverlay covering the target element
Wrong pageNavigation 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. Video player showing test execution with timeline controls

​
What to look for

IssueWhat You See
Race conditionElement appears after the test tries to interact
Animation issueTest clicks during transition
Slow loadPage is still loading when the test acts
Unexpected popupModal or alert blocks interaction
Wrong element clickedVisible in the video but not obvious from the screenshot

​
Visual Comparison

For tests using toHaveScreenshot(), TestDino shows visual diffs:
ModeWhat it shows
ActualWhat the test captured
ExpectedThe baseline image
DiffHighlighted differences
Side by SideBoth images together
SliderInteractive 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:
PlanArtifact Storage
Community1 GB
Pro5 GB
Team10 GB
EnterpriseCustom
TipUse retain-on-failure options to reduce storage while keeping evidence for failures.
Trace viewer, error grouping, and debug overview.

Trace Viewer

Step-by-step execution analysis

Error Grouping

Find patterns across failures

Visual Testing

Screenshot comparison setup

Node.js CLI

Upload options reference