Advanced Playwright TypeScript Tutorial | Trace Viewer & Debugging | Part III | LambdaTest

About The Video

In this Part 3 of the advanced Playwright TypeScript tutorial, join 𝐕𝐢𝐠𝐧𝐞𝐬𝐡 𝐒𝐫𝐢𝐧𝐢𝐯𝐚𝐬𝐚𝐧, Udemy Instructor and Software Quality Engineer at N26, as he dives into how to effectively use the Trace Viewer feature in Playwright, a powerful tool for inspecting and debugging test execution. You'll explore how to enable and analyze traces, uncover step-by-step actions during test runs, and debug efficiently using DOM snapshots, browser actions, and error logs.

Additionally, the tutorial covers how to capture screenshots and video recordings for enhanced insights, as well as advanced methods to programmatically enable traces for specific tests. By the end of this session, you'll be equipped with practical skills to optimize your end-to-end testing workflows and streamline debugging processes.

Video Chapters

00:00 Introduction

02:15 Trace Viewer Introduction

15:40 Different ways to open Trace Viewer

19:35 Editing Trace Viewer options via the command line

20:37 Set tracing programmatically

27:31 Capture Screenshot & Record Video

32:37 Closing words

Key Topics Covered

Introduction to Playwright Trace Viewer:

Overview of the Trace Viewer as a GUI tool for exploring recorded traces.

How traces help in visualizing test actions step-by-step for debugging.

Enabling Traces in Playwright:

Configuring traces in the playwright.config.ts file.

Different trace options:

Off: No traces recorded.

On: Traces recorded for all test runs.

On First Retry: Traces recorded only during the first retry.

Retain on Failure: Traces recorded only for test failures.

On All Retries: Traces recorded for every retry.

Trace Usage in Reports:

Viewing traces in Playwright's HTML reports.

Navigating through traces for specific steps and actions.

Analyzing DOM snapshots, screenshots, and browser actions.

Programmatically Enabling Traces:

Enabling traces for specific tests directly in test scripts.

Differences between enabling traces programmatically and through configuration files.

Opening Traces:

Methods to open traces:

Via the Playwright HTML report.

Using the command npx playwright show-trace <path-to-trace>.

Dragging and dropping the trace file into the Trace Viewer website.

Debugging Test Failures with Traces:

Steps to identify the cause of failures using trace details.

Understanding the advantages of visualized test steps for debugging.

Capturing Screenshots in Playwright:

Configuring screenshot options:

Off: No screenshots captured.

On: Screenshots captured for all test runs.

On Failure: Screenshots captured only for failed tests.

Recording Videos in Playwright:

Configuring video options:

Off: No videos recorded.

On: Videos recorded for all test runs.

Retain on Failure: Videos recorded only for failed tests.

On First Retry: Videos recorded only during the first retry.

Viewing videos in the Playwright HTML report for failed tests.

Test Execution Workflow:

Running tests with retry logic enabled.

Debugging using trace, screenshot, and video recordings for test failures.

Use Case Scenarios:

Leveraging traces for debugging intermittent failures.

Configuring specific tests to enable traces programmatically.

Advantages of Playwright's Built-in Features:

Simplified debugging through traces, screenshots, and video recordings.

No need for additional custom coding to enable these features.

Recommendations:

Use traces selectively (e.g., for failures or specific test cases) to reduce overhead.

Prefer configuration-based trace setup for consistent debugging outputs.

Related Blogs & Hubs

Playwright End To End Testing Tutorial: A Complete Guide

Playwright Tutorial: Getting Started With Playwright Framework