Playwright Reports & Debugging: Trace Viewer, page.pause(), Debug Mode

Reports Supported in Playwright

Reports are like a school report card for your automated tests.

They clearly show:

• Which tests passed
• Which tests failed
• Error details
• Execution results

Interview Answer

"Playwright supports multiple built-in test reporters such as HTML, List, Line, Dot, JSON, and JUnit. In real projects, HTML reports are mainly used for debugging, while JUnit reports are commonly used for CI integration."

Advertisement

Supported Reporters

• HTML
• List
• Line
• Dot
• JSON
• JUnit

Common Real-Time Usage

The HTML Reporter

The HTML Reporter is Playwright's built-in reporting tool that generates an interactive HTML report after test execution.

Information Available in the Report

• Test execution results
• Passed tests
• Failed tests
• Error messages
• Screenshots
• Videos
• Trace files

The report provides complete execution details in an easy-to-read format, making it the most commonly used report during debugging.

Playwright Trace and the Trace Viewer

Playwright Trace is a detailed recording of everything that happens during test execution.

It records:

• User actions
• Screenshots
• DOM snapshots
• Network requests

Simple Analogy

Think of recording your phone screen.

Everything you do is recorded.

Similarly, Playwright Trace records everything that happens during test execution.

The Trace Viewer is like reviewing CCTV footage after an incident.

Trace Recording Modes

Playwright supports multiple trace options.

Record Every Execution

trace: 'on'

Keep Traces Only for Failed Tests

trace: 'retain-on-failure'

Record Only During the First Retry

trace: 'on-first-retry'

What the Trace Viewer Shows

• Every action performed
• DOM snapshots
• Screenshots
• Network activity
• Execution timeline

Trace Viewer provides one of the most detailed debugging experiences available in Playwright.

How to Debug Playwright Tests

Debugging means identifying problems step by step until the root cause is found.

Playwright provides several built-in debugging tools.

Headed Mode

Runs the browser with a visible user interface so every action can be observed.

Debug Mode

Allows step-by-step execution using the Playwright Inspector.

Playwright Inspector

Provides interactive debugging capabilities including:

• Step execution
• Locator inspection
• Action replay

Trace Viewer

Allows post-execution investigation using recorded traces.

Screenshots, Videos, and Logs

Provides visual evidence to help identify failures.

Real Project Usage

"In real projects, we choose the debugging method based on where the failure occurs. During local development, we use headed mode and Playwright Inspector. For CI failures, we rely on traces, screenshots, videos, and execution logs."

page.pause() and the Playwright Inspector

page.pause() pauses test execution at a specific point and opens the Playwright Inspector.

Simple Analogy

It works exactly like pressing the Pause button while watching a video.

Everything stops until you decide to continue.

What You Can Do in the Inspector

• Inspect page elements
• Hover over elements
• Generate locators
• Execute actions step by step
• Continue execution after investigation

page.pause() is especially useful when debugging a particular step in a test.

Running Tests in Debug Mode

Debug mode slows down execution and opens the Playwright Inspector so each action can be inspected.

Using the --debug Flag

npx playwright test --debug

Using the Environment Variable

PWDEBUG=1

Using page.pause()

Place:

page.pause();

inside the test where execution should stop.

Using Slow Motion

Slow Motion can also be enabled to slow browser actions and observe every interaction.

Result

All these approaches launch the Playwright Inspector and enable step-by-step debugging.

Screenshots on Failure and Video Recording

Playwright can automatically capture screenshots whenever a test fails.

Screenshot Configuration

screenshot: 'only-on-failure'

When enabled:

• Screenshots are captured automatically.
• Images are attached to the test report.
• No additional code is required.

Video Recording

Video recording is enabled using the Playwright configuration.

Videos are automatically recorded and attached to reports.

Real Project Usage

"In our projects, we usually record videos only for failed tests to reduce storage usage while still providing enough evidence for debugging."

Benefits

Using screenshots, videos, and traces together provides complete visual evidence for every failed execution.

FAQs

What reports are supported in Playwright?

Playwright supports the following built-in reporters:

• HTML
• List
• Line
• Dot
• JSON
• JUnit

HTML reports are commonly used for debugging, while JUnit reports are primarily used in CI/CD pipelines.

What does the HTML Reporter display?

The HTML Reporter provides:

• Test results
• Execution details
• Error messages
• Screenshots
• Videos
• Trace files

What is Playwright Trace?

Playwright Trace records the complete execution of a test, including:

• User actions
• Screenshots
• DOM snapshots
• Network requests

These recordings can be analyzed using the Trace Viewer.

How do you enable the Trace Viewer?

Configure the trace option as:

• on
• retain-on-failure
• on-first-retry

Then open the generated trace file using the Playwright Trace Viewer.

What is page.pause()?

page.pause() temporarily stops test execution and opens the Playwright Inspector.

It allows:

• Locator generation
• Element inspection
• Step-by-step debugging

How do you run Playwright tests in debug mode?

Playwright supports multiple debugging options:

• npx playwright test --debug
• PWDEBUG=1
• page.pause()
• Slow Motion

All of these launch the Playwright Inspector.

How do you automatically capture failure evidence?

Configure:

screenshot: 'only-on-failure'

Enable video recording in the Playwright configuration.

Both screenshots and videos are automatically attached to the test report.