Running and Debugging Tests With Playwright UI Mode

What Is Playwright UI Mode?

Playwright UI mode is an interactive feature that allows you to run, inspect, and debug tests in a visually intuitive environment.

With UI mode, users can see exactly what’s happening on their website during test execution, making it easier to identify issues and improve test reliability. This interface brings a visual and user-friendly approach to testing, which contrasts with the traditionally code-centric methods of automation testing.

Key Benefits:

• Enables you to view the test run in real-time. When each step is executed, the associated actions are presented side by side to demonstrate how the elements are used.

• Allows you to stop test execution at any stage and check the page elements for issues such as timing or selector issues.
• Comes with a Trace Viewer that provides details about every test run. The Trace Viewer records all the actions performed while a test is in progress, using screenshots and network traffic.
• Makes it easy to find reliable Playwright locators for page elements. When you hover over various elements, Playwright shows the most stable selector for each one.

• Lets you easily execute test steps and see the results if you change them. This streamlines the testing process by reducing the number of full test cycles needed. It helps you save time, especially when working on large-scale projects, where tests can take time to execute completely.
• Supports automated screenshots and video recordings of test runs. These visual aids clearly represent the testing journey step by step, helping teams understand exactly where issues occur.

Note: Run Playwright headed tests across 50+ real browsers. Try TestMu AI Today!

Components of Playwright UI Mode

The screenshot shows the Playwright UI mode, which provides a graphical interface for running and debugging Playwright tests.

Let’s break down each component in detail:

• Test Explorer (Left Panel): The test explorer comes with the following features:
• Filters tests (through search box) by keywords, tags (e.g., @tau), or metadata, helping to narrow down tests in large suites.
• Displays tests of all statuses (passed, failed, skipped) by default, with the option to filter specific states.
• Filters tests based on the selected browser (e.g., Chromium, Firefox, WebKit).
• The above screenshot shows the following test files:
• api.spec.js
• example.spec.js
• uiLT.spec.js
• visual.spec.js
• Timeline (Top Section): It displays a graph tracking test execution over time. This helps visualize the duration of each test or step. It is also useful for identifying performance bottlenecks and debugging slow-running tests.
• Action Explorer (Center Panel): It records and displays test execution details step by step.

• Actions: Logs user interactions (clicks, inputs, navigation, etc.).
• Metadata: Displays additional test attributes (e.g., environment, priority).
• Action: Lists recorded actions performed during the test.
• Before/After: Shows test setup and teardown steps.
• Pick Locator: Helps identify element locators for test scripts.
• Browser Preview (Right Panel): It provides a real-time view of test execution. In the screenshot, the browser shows that the KaneAI link is opened.
• Developer Tools (Bottom Panel): It contains tabs similar to browser dev tools:
• Locator: Assists in finding elements.
• Source: Displays the test script source code.
• Call: Logs API calls, function executions, or internal Playwright actions.
• Log: Provides a detailed execution log.
• Errors: Lists runtime errors (e.g., element not found, network failures).
• Console: Displays logs and debug messages.
• Network: Logs network requests made during test execution.
• Attachments: Stores test artifacts like screenshots, videos, and downloaded files.
• Annotations: Highlights test case statuses (e.g., skipped, fixme, slow).

How to Use Playwright UI Mode?

Now, let’s look at how to set up UI mode in Playwright:

• Install Playwright v1.32 by running the below command:

npm install @playwright/test@1.32

In case you want to install the latest version of Playwright, run the below command:

npm init playwright@latest

• Open the Playwright in UI mode by running the below command:

npx playwright test --ui

// @ts-check
const { test, expect } = require("@playwright/test");


test("Open the site , verify the title, and fill data in the fields", async ({
 page,
}) => {
 await page.goto("https://www.testmuai.com/kane-ai/");
 await expect(page).toHaveTitle(/Kane AI - World's first AI E2E Testing Agent/);
 await page.locator('section').filter({ hasText: 'KaneAI - Testing' }).getByRole('button').click();
 await page.getByRole('textbox', { name: 'First Name*' }).fill('KaneAI')
 await page.getByRole('textbox', { name: 'Last Name*' }).fill('Automation')
});

How Do AI Agents Use Playwright to Debug Browser Tests?

AI coding agents use Playwright MCP, Microsoft's official Model Context Protocol server, to control a real browser and read the same DOM and network data UI mode shows a human.

• A real browser, not a script guess: Playwright MCP runs Chromium, Firefox, or WebKit under the hood and exposes a structured tool surface, so an agent controls the same rendering engine a human test would use, not a simulated DOM.
• Accessibility-tree targeting: the agent reads the page's accessibility tree instead of clicking on pixel coordinates, which is faster, cheaper on tokens, and more deterministic than screenshot-based automation.
• Same debugging data, agent-driven: an agent calling Playwright MCP gets the console output, network requests, and DOM snapshots that a person would otherwise read inside UI mode's Developer Tools panel, but drives the inspection through tool calls instead of clicks.
• When UI mode still wins: a person debugging a flaky selector benefits from the visual Pick Locator and Timeline views in UI mode, while an agent running in CI calls Playwright MCP directly with no GUI, so the two approaches complement each other instead of replacing one another.

Wrapping Up!

With Playwright UI mode, you can fully access automated test functionality without any hindrances. The real-time visual testing framework enhances debugging, improves test reliability, and accelerates test development.

Integrated features such as live test execution monitoring, step-by-step debugging, Trace Viewer, and selector inspection make the test automation process more efficient.

Leveraging Playwright UI mode can optimize test automation workflows, leading to higher test quality and reduced debugging time. This streamlined approach enables you to create more effective test scripts and quickly resolve test failures.

Citations

• Playwright UI mode: https://playwright.dev/docs/test-ui-mode