Debug Playwright Tests: Trace Viewer, Inspector and UI Mode | Playwright with TypeScript #07

Code & Test Automation |    / @codetestautomation   Learn to debug failing Playwright tests with TypeScript. We write a test with a hidden bug and explore it in UI Mode: the test tree, watch mode, filters and time-travel through every action. Then we record traces. You'll see why trace: 'on-first-retry' produces no trace locally until a test is actually retried, how --retries=1 and --trace on change that, what is inside trace.zip, and how the Trace Viewer shows actions, before and after DOM snapshots, the actionability log, the error, the console and the network tab, where a 401 response reveals the real cause. Next we pause and step through the test with the Playwright Inspector and --debug, pick a locator, and look at the VS Code extension. Finally we fix the bug and build a simple debugging workflow. Every run, trace and screenshot shown comes from real local runs. Video 7 of 10 in Playwright with TypeScript, for fresher and experienced engineers: installation, writing tests, locators, auto-waiting and assertions, configuration, the Page Object Model, debugging, authentication, network mocking and API testing, and CI with sharding. CHAPTERS 0:00 Introduction 1:37 UI Mode 5:18 Trace Viewer 11:58 Inspector and VS Code 15:30 Fix and Workflow 16:45 Recap 17:47 Subscribe HOW THE DEMOS WERE MADE Every command, test run and terminal output in this video was run for real (Node v24.22.2, @playwright/test 1.64.1, Chromium 156.0.8078.4 (build 1248), Firefox 157.0 (build 1555), WebKit 27.2 (build 2370); Debian 13 Linux) in throwaway Playwright + TypeScript projects created for this video, against playwright.dev and a small practice app served locally. Durations in the test output are whatever that run took. TYPED ONLY: npx playwright test --ui, npx playwright show-trace and npx playwright test --debug open graphical windows, so they are shown typed, next to real screenshots of my own runs. PowerShell commands and the VS Code extension are shown typed or as a labelled illustration. Any screen marked ILLUSTRATION is a simplified mockup, not a screenshot. PRACTICE Break one of your tests on purpose, run it with --trace on (or download the trace artifact from CI), open it with npx playwright show-trace, and find the cause using the actions, the snapshots, the console and the network tabs. Practice tip: pause at each code and terminal scene, type the test yourself in your own Playwright project, run it, and compare your output with what you see on screen. Next video: #08 Authentication, Storage State, and Multi-User Flows. #Playwright #TypeScript #TestAutomation #CodeAndTestAutomation Subscribe to Code & Test Automation for more Playwright, coding and test automation tutorials:    / @codetestautomation