debugging

34 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Debug tests locally with VS Code extension

Install the Playwright VS Code extension for local debugging. Right-click on the line next to the test you want to run to open a browser window and pause at the breakpoint. You can live debug by clicking or editing locators in VS Code, which highlights the locator in the browser and shows other matching locators.

Debug specific test with --debug flag

npm: npx playwright test example.spec.ts:9 --debug yarn: yarn playwright test example.spec.ts:9 --debug pnpm: pnpm exec playwright test example.spec.ts:9 --debug

Debug tests with --debug flag

Run 'npx playwright test --debug' to debug tests with the Playwright inspector. Step through your test, view actionability logs, and edit locators live to see them highlighted in the browser window. To debug a specific test file and line, use 'npx playwright test example.spec.ts:9 --debug'.

Debug specific test file with --debug flag

To debug one test file, use `npx playwright test example.spec.ts --debug`. To debug a specific test from the line number where the test is defined, add a colon followed by the line number: `npx playwright test example.spec.ts:10 --debug`.

Debug tests with --debug flag

Use `npx playwright test --debug` to debug all tests. This command opens a browser window as well as the Playwright Inspector. You can step through tests using the step over button or press play to run from start to finish. The browser window closes once the test finishes.

Pick locator during debugging

While debugging in UI Mode or the Playwright Inspector, you can use the Pick Locator button to select an element on the page and see the locator that Playwright would use to find that element. You can edit the locator and see it highlighting live in the browser window. Use the Copy Locator button to copy the locator to your clipboard and paste it into your test.

Enable detailed Selenium Grid connection logs with DEBUG=pw:browser*

Run Playwright with the DEBUG=pw:browser* environment variable to see detailed logs of how Playwright is connecting to Selenium Grid. Example: DEBUG=pw:browser* SELENIUM_REMOTE_URL=http://internal.grid:4444 npx playwright test

Run tests in debug mode

Use `npx playwright test --debug` to run tests with Playwright Inspector. This is a shortcut that sets PWDEBUG=1 environment variable and applies --timeout=0 --max-failures=1 --headed --workers=1 options.

PWDEBUG environment variable launches Inspector

Setting the `PWDEBUG=1` environment variable launches the Playwright Inspector (introduced in 1.9) for debugging tests.

Locator.highlight visually reveals element

The Locator.highlight method visually reveals the element(s) in the browser for easier debugging and inspection.

--debug CLI flag enables Playwright Inspector

Using `npx playwright test --debug` enables the Playwright Inspector for debugging tests.

Playwright Inspector can generate tests

Playwright Inspector (as of 1.13) can generate Playwright Test tests.

Page.pause pauses execution in headed mode

The `Page.pause()` method (introduced in 1.9) pauses script execution in headed mode and launches Playwright Inspector for debugging.

Playwright Inspector features

Playwright Inspector (introduced in 1.9) features: line-by-line debugging with play, pause and step-through, script authoring by recording user actions, element selector generation by hovering, and test code generation for Playwright Test.

UI Mode pick locator feature

Click the pick locator button and hover over the DOM snapshot to see the locator for each element highlighted as you hover. Click on an element to add the locator to the playground. You can modify the locator in the playground and see if your modified locator matches any locators in the DOM snapshot. Use the copy button to copy the locator and paste it into your test.

UI Mode command to open

To open UI mode, run the command `npx playwright test --ui` in your terminal.

UI Mode test filtering options

UI Mode allows filtering tests by text name, @tag, passed/failed/skipped status, and by projects as defined in playwright.config file.

UI Mode timeline view functionality

The timeline view at the top of the trace shows different colors to highlight navigation and actions. Hovering back and forth displays image snapshots for each action. Double-clicking an action shows the time range for that action. The slider in the timeline increases the actions selected, which are shown in the Actions tab, and console and network logs are filtered to show only logs for the selected actions.

UI Mode error display

If a test fails, error messages for each test are displayed in the Errors tab. The timeline also shows a red line highlighting where the error occurred. The source tab shows which line of source code caused the error.

UI Mode Network tab capabilities

The Network tab shows all network requests made during a test. You can sort by request type, status code, method, request, content type, duration, and size. Clicking a request shows more details including request headers, response headers, request body, and response body.

UI Mode Metadata tab information

The Metadata tab shows information about the test such as the browser, viewport size, and test duration.

UI Mode watch mode activation

An eye icon appears next to each test name in the sidebar. Clicking the eye icon activates watch mode, which re-runs the test when you make changes to it. You can watch multiple tests simultaneously by clicking the eye icon next to each one, or watch all tests by clicking the eye icon at the top of the sidebar.

UI Mode in Docker and GitHub Codespaces

For Docker and GitHub Codespaces environments, UI mode can be run in the browser by binding to the `0.0.0.0` interface using the command `npx playwright test --ui-host=0.0.0.0`. In GitHub Codespaces, ports are forwarded automatically. To specify a static port, use the `--ui-port` flag: `npx playwright test --ui-port=8080 --ui-host=0.0.0.0`.

UI Mode security warning for --ui-host=0.0.0.0

When specifying `--ui-host=0.0.0.0`, UI Mode traces, passwords, and secrets become accessible from other machines inside your network. In GitHub Codespaces, ports are only accessible from your account by default.

UI Mode project dependencies manual setup

If using project dependencies, you must manually run setup tests first before running tests that depend on them. UI mode does not automatically take project dependencies into consideration.

UI Mode pop out DOM snapshot feature

Pop out the DOM snapshot into its own window for better debugging by clicking the pop out icon above the DOM snapshot. From there you can open browser DevTools and inspect HTML, CSS, and Console. You can pop out multiple actions and compare them side by side or debug individually.

UI Mode Source panel VSCode integration

As you hover over each action in the test, the line of code for that action is highlighted in the source panel. An 'Open in VSCode' button appears at the top-right of this section. Clicking it opens your test in VS Code at the exact line of code you clicked on.

WebView2 debugging with DevTools

To debug inside a WebView2 control, right-click to open the context menu and select 'Inspect' to open DevTools, or press F12. Alternatively, use the WebView2.CoreWebView2.OpenDevToolsWindow method to open DevTools programmatically.

playwright-cli snapshot shows elements without revealing all attributes

The playwright-cli snapshot command displays elements but may not show an element's id, class, data-* attributes, or other DOM properties. When an attribute is not visible in the snapshot, use the eval command to inspect it.

playwright-cli eval command to inspect element id

Use `playwright-cli eval "el => el.id" <element-reference>` to get an element's id attribute.

playwright-cli eval command to inspect CSS classes

Use `playwright-cli eval "el => el.className" <element-reference>` to get all CSS classes on an element.

playwright-cli eval command to inspect data attributes

Use `playwright-cli eval "el => el.getAttribute('data-testid')" <element-reference>` to get a specific data attribute value.

playwright-cli eval command to inspect aria attributes

Use `playwright-cli eval "el => el.getAttribute('aria-label')" <element-reference>` to get a specific aria attribute value.

playwright-cli eval command to inspect computed styles

Use `playwright-cli eval "el => getComputedStyle(el).display" <element-reference>` to get a computed style property value for an element.

Give your agent this brain