Skip to main content
  • 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.

​
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:
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:
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:
NoteSmaller 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. Set the token and run tests. Artifacts stream during the run:
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. Evidence panel showing screenshots section

​
What to look for

​
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

​
Visual Comparison

For tests using toHaveScreenshot(), TestDino shows visual diffs:

​
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:
TipUse retain-on-failure options to reduce storage while keeping evidence for failures.

Trace Viewer

Step-by-step execution analysis

Error Grouping

Find patterns across failures

Visual Testing

Screenshot comparison setup

Node.js CLI

CLI setup and options