playwright.inspect() method in developer console
Reveal element in the Elements panel using playwright.inspect('text=Log in'). This reveals the element matching the selector in the browser's Elements inspector.
traces and debugging
184 notes in this subject, read out of this brain and free to use. This is page 1 of 4.
playwright.$() method in developer console
Query the Playwright selector using the actual Playwright query engine with playwright.$('.auth-form >> text=Log in'). This example returns the matching button element.
Page.pause() method breaks test execution
Add the await page.pause() call to your test to pause execution at that point. When running tests in debug mode, clicking the 'Resume' button in the Inspector will run the test and only stop on the page.pause() call, allowing you to skip stepping through earlier actions.
Debug on specific browser with --project flag
To debug on a specific browser, use the --project flag followed by the project name configured in playwright.config. Examples: 'npx playwright test --project=chromium --debug', 'npx playwright test --project="Mobile Safari" --debug', 'npx playwright test --project="Microsoft Edge" --debug'.
VS Code Extension for debugging tests
The VS Code Extension is recommended for debugging Playwright tests. It allows you to debug tests right in VS Code, see error messages, set breakpoints, and step through tests.
Live editing locators in Playwright Inspector
While running in debug mode, you can live edit locators. Next to the 'Pick Locator' button is a field showing the current locator. You can edit this locator directly in the 'Pick Locator' field and matching elements will be highlighted in the browser window.
playwright.locator() method in developer console
Create a locator and query matching elements with playwright.locator('.auth-form', { hasText: 'Log in' }). This returns a Locator object showing the matched element and all matching elements.
Verbose API logging with DEBUG environment variable
Set the DEBUG environment variable to 'pw:api' to enable verbose logging of Playwright API calls. Run with 'DEBUG=pw:api npx playwright test' (bash), 'set DEBUG=pw:api' then 'npx playwright test' (batch), or '$env:DEBUG="pw:api"' then 'npx playwright test' (PowerShell).
Actionability logs in Playwright Inspector
By the time Playwright has paused on a click action in the Inspector, it has already performed actionability checks that can be found in the log. The log shows if the element was visible, enabled and stable, if the locator resolved to an element, scrolled into view, and other checks. If actionability cannot be reached, the action shows as pending.
Run tests in headed mode
Playwright runs browsers in headless mode by default. To change this, use 'headless: false' as a launch option. Example: 'await chromium.launch({ headless: false, slowMo: 100 })'.
Live debugging locators in VS Code
After running a test with the 'Show Browser' option checked in VS Code, you can click on any locator in VS Code and it will be highlighted in the browser window. Playwright shows if there are multiple matches. You can edit locators in VS Code and Playwright will show the changes live in the browser.
playwright.$$() method in developer console
Same as playwright.$(), but returns all matching elements. Example: playwright.$$('li >> text=John') returns an array of all matching list items.
Browser Developer Tools with PWDEBUG=console
When running in Debug Mode with PWDEBUG=console, a 'playwright' object is available in the Developer tools console. Developer tools help you inspect the DOM tree and find element selectors, see console logs during execution, check network activity, and use other developer tools features.
Debug one test on specific browser
To run one test on a specific browser, run 'npx playwright test example.spec.ts:10 --project=webkit --debug' where the file, line number, and project name are specified.
Run tests in debug mode with --debug flag
Run tests with the --debug flag to open the Playwright Inspector. When --debug is used, browsers launch in headed mode and the default timeout is set to 0 (no timeout).
Debug in different browsers via select profile
By default, debugging in VS Code uses the Chromium profile. Right-click on the debug icon in the testing sidebar and click 'Select Default Profile' to choose a different browser. Each time you run a test in debug mode it will use the selected profile.
PWDEBUG environment variable for debug mode
Set the PWDEBUG environment variable to run Playwright tests in debug mode. This configures Playwright for debugging and opens the inspector. When PWDEBUG=1 is set, browsers launch in headed mode and the default timeout is set to 0 (no timeout).
Pick locator feature in VS Code
Click the 'Pick locator' button from the testing sidebar in VS Code. Then click the element you need in the browser; it will show in the 'Pick locator' box in VS Code. Press Enter to copy the locator to the clipboard or Escape to cancel. Playwright prioritizes role, text, and test id locators and improves the locator to be resilient and uniquely identify the target element if multiple matches are found.
Debug one test on specific line with --debug
To debug one test on a specific line, run 'npx playwright test example.spec.ts:10 --debug' where 10 is the line number. This runs a single test in each browser configured in playwright.config and opens the inspector.
Debug tests using Chrome DevTools
Instead of using 'Debug Test', choose 'Run Test' in VS Code. With 'Show Browser' enabled, the browser session is reused, allowing you to open Chrome DevTools for continuous debugging of your tests and the web application.
slowMo launch option for debugging
Use the slowMo option to slow down execution by N milliseconds per operation, allowing you to follow along while debugging. Example: 'await chromium.launch({ headless: false, slowMo: 100 })' slows down each operation by 100ms.
Pick locator feature in Playwright Inspector
While debugging, click the 'Pick Locator' button and hover over elements in the browser window to see the code needed to locate that element. Click an element to add the locator to the field where you can tweak it or copy it. Playwright prioritizes role, text, and test id locators and improves them to be resilient and uniquely identify the target element if multiple matches are found.
playwright.selector() method in developer console
Generate a selector for the given element with playwright.selector($0), where $0 is an element selected in the Elements panel. Example output: 'div[id="glow-ingress-block"] >> text=/.*Hello.*/'
Setting breakpoints and debugging tests in VS Code
Set a breakpoint by clicking in the gutter next to a line number. Right-click the test and select 'Debug Test'. The test pauses at the breakpoint, allowing you to inspect variables and step through the code.
Show Trace Viewer option in VS Code
Enable the 'Show Trace Viewer' option in the Playwright sidebar. When a test finishes, a detailed trace automatically opens, providing a complete timeline of test execution. The trace viewer is useful for step-by-step analysis with precise timestamps, DOM inspection to view snapshots at any point, network monitoring of all requests and responses, console logs from the browser, source mapping to jump to executed code, and visual debugging with screenshots showing what the user would have seen at each step. The trace viewer is especially valuable for debugging flaky tests or understanding complex user interactions.
Viewing error messages in VS Code
When a test fails, the VS Code extension displays detailed error messages directly in the editor, including expected vs. received values and a full call log.
Fix with AI feature in VS Code
When a test fails, click the sparkle icon next to the error to get an AI-powered fix suggestion from Copilot. Copilot analyzes the error and suggests a code change to resolve the issue.
Playwright Test includes built-in tools
Playwright Test comes bundled with the Playwright Inspector for debugging, code generation via Playwright Test Code generation, and Playwright Tracing for post-mortem debugging.
Trace modes for --trace option
The --trace option accepts the following modes: on, off, on-first-retry, on-all-retries, retain-on-failure, retain-on-first-failure, retain-on-failure-and-retries.
Trace Viewer options table
Options for `npx playwright show-trace`: | Option | Description | | -b, --browser <name> | Browser to use: chromium, firefox, or webkit (default: chromium) | | -h, --host <host> | Host to serve trace on | | -p, --port <port> | Port to serve trace on |
View traces with Trace Viewer
Use `npx playwright show-trace [options] [trace]` to analyze and view test traces for debugging.
Capturing traces during global setup with error handling
To capture traces of failures during globalSetup, wrap the setup logic in a try...catch block. Call context.tracing.start() with screenshot and snapshot options before running setup actions. In the try block, call context.tracing.stop() with a path to save the trace after successful setup. In the catch block, also call context.tracing.stop() with a different path (e.g., 'failed-setup-trace.zip'), close the browser, then re-throw the error. This ensures traces are captured whether setup succeeds or fails.
globalSetup with trace capture example
Example of globalSetup that authenticates and captures traces on both success and failure. Code: import { chromium, type FullConfig } from '@playwright/test'; async function globalSetup(config: FullConfig) { const { baseURL, storageState } = config.projects[0].use; const browser = await chromium.launch(); const context = await browser.newContext(); const page = await context.newPage(); try { await context.tracing.start({ screenshots: true, snapshots: true }); await page.goto(baseURL!); await page.getByLabel('User Name').fill('user'); await page.getByLabel('Password').fill('password'); await page.getByText('Sign in').click(); await context.storageState({ path: storageState as string }); await context.tracing.stop({ path: './test-results/setup-trace.zip' }); await browser.close(); } catch (error) { await context.tracing.stop({ path: './test-results/failed-setup-trace.zip' }); await browser.close(); throw error; } } export default globalSetup;
trace retain-on-first-failure mode
The new retain-on-first-failure mode for TestOptions.trace records trace for the first run of each test but not for retries. When a test fails, the trace file is retained; otherwise it is deleted.
testOptions.trace has new options
The `testOptions.trace` property (introduced in 1.17) has new options for configuring tracing behavior.
Tracing title option
The Tracing API now supports a `'title'` option (introduced in 1.17) via `tracing.start()`.
tracesDir option in browser launch
The `tracesDir` option was added to BrowserType.launch() and BrowserType.launchPersistentContext() in Playwright 1.12.
BrowserContext tracing events
New tracing-related events in Playwright 1.12: BrowserContext.request, BrowserContext.requestFailed, BrowserContext.requestFinished, BrowserContext.response.
Show trace with CLI
Traces are examined using the Playwright CLI command: npx playwright show-trace trace.zip
BrowserContext.tracing API usage
Example of recording traces: const browser = await chromium.launch(); const context = await browser.newContext(); await context.tracing.start({ screenshots: true, snapshots: true }); const page = await context.newPage(); await page.goto('https://playwright.dev'); await context.tracing.stop({ path: 'trace.zip' });
Playwright Trace Viewer GUI tool
Playwright Trace Viewer (introduced in 1.12) is a GUI tool for exploring recorded Playwright traces. It allows examining page DOM before and after each action, page rendering before and after each action, and browser network activity during script execution.
Tracing.startChunk and stopChunk
The `Tracing.startChunk()` method starts a new trace chunk, and `Tracing.stopChunk()` stops a trace chunk (introduced in 1.15).
Trace Viewer enhancements in 1.17
Trace Viewer improvements: displays test name, includes new metadata tab showing browser details, and snapshots now include URL bar.
Trace file default includes sources
Playwright Test traces include sources by default. This behavior can be turned off via tracing options.
Trace Viewer available online
The Playwright Trace Viewer is available online at https://trace.playwright.dev. Trace files can be inspected by dragging and dropping a trace.zip file. Trace files are not uploaded anywhere; trace.playwright.dev is a progressive web application that processes traces locally.
Trace Viewer shows parameters and console.log
Playwright Trace Viewer (as of 1.13) shows parameters, returned values, and console.log() calls.
Tracing.startChunk name option
The Tracing.startChunk method accepts a name option to identify trace chunks in the trace report.
Trace Viewer shows API testing requests
The Trace Viewer now displays API testing requests made through APIRequestContext, helping debug API interactions.
trace CLI flag enables tracing
Tracing can be enabled via the CLI flag 'npx playwright test --trace=on' without requiring configuration changes.
Playwright Trace Viewer purpose and capabilities
Playwright Trace Viewer is a GUI tool that lets you explore recorded Playwright traces of your tests. It allows you to go back and forward through each action of your test and visually see what was happening during each action.
Traces are normally run in CI environments
Traces are normally run in a Continuous Integration (CI) environment because locally you can use UI Mode for developing and debugging tests.
Trace Viewer interaction and inspection features
In the Trace Viewer, you can view traces by clicking through each action or hovering using the timeline to see the state of the page before and after the action. You can inspect the log, source and network, errors, and console during each step of the test. The trace viewer creates a DOM snapshot so you can fully interact with it and open the browser DevTools to inspect the HTML, CSS, and other elements.
Default trace configuration in playwright.config
By default, the playwright.config file contains configuration to create a trace.zip file for each test. Traces are setup to run on-first-retry, meaning they run on the first retry of a failed test. The retries are set to 2 when running on CI and 0 locally. This means traces are recorded on the first retry of a failed test but not on the first run and not on the second retry.
Opening traces from HTML report
In the HTML report, you can open traces in two ways: (1) click on the trace icon next to the test file name to directly open the trace, or (2) click to open the detailed view of the test, scroll down to the 'Traces' tab, and open the trace by clicking on the trace screenshot.
HTML report command and functionality
The HTML report is opened with the command npx playwright show-report. The HTML report shows a report of all tests that have been run, which browsers they ran on, and how long they took. Tests can be filtered by passed, failed, flaky, or skipped status. You can also search for a particular test. Clicking on a test opens the detailed view where you can see errors, test steps, and the trace.
Force tracing on locally with --trace flag
To run traces locally without using UI Mode, you can force tracing to be on with the --trace on command-line flag: npx playwright test --trace on
Example playwright.config with trace on-first-retry
```js import { defineConfig } from '@playwright/test'; export default defineConfig({ retries: process.env.CI ? 2 : 0, use: { trace: 'on-first-retry', }, }); ``` This example shows how to configure traces to record on the first retry of each test, with retries set to 2 on CI and 0 locally.
Test traces, screenshots and videos output directory
Trace files, screenshots and videos appear in the test output directory, typically 'test-results'.
trace mode recording rules
Trace modes control which runs are recorded and which recordings are kept. 'off': never records. 'on': records every run, keeps always. 'retain-on-failure': records every run, keeps if that run failed. 'retain-on-first-failure': records first run only, keeps if first run failed. 'retain-on-failure-and-retries': records every run, keeps if that run failed or is a retry. 'on-first-retry': records first retry only, keeps always. 'on-all-retries': records every retry, keeps always.
trace recording option values
The trace option controls whether to produce test traces. Supported values are 'off', 'on', 'retain-on-failure', and 'on-first-retry'. Traces can be viewed later in the Trace Viewer to get detailed information about Playwright execution.