Running and Debugging Tests With Playwright UI Mode

In Playwright, you can run tests using headed and headless modes. In the earlier versions of Playwright, running tests in headed mode was somewhat challenging. To improve the headed mode experience, Playwright introduced UI mode in version 1.32.

Playwright UI mode provides a visual interface for running and debugging tests. It allows you to inspect elements, step through tests interactively, and get real-time feedback, making troubleshooting more intuitive.

In this blog, we look at how to use Playwright UI mode to run and debug tests.

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.

Such live feedback may be useful to determine if the test script performs correctly when interacting with the elements and if there are any deviations.

• 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 selectors for page elements. When you hover over various elements, Playwright shows the most stable selectors.

This capability is crucial in creating resilient tests, as fragile tests may fail due to wrong or weak selectors caused by UI deviations.

• 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 LambdaTest 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

You can also click on test files to execute or debug them.

• 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.

The Action Explorer includes multiple tabs:

• 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:

1. Install Playwright v1.32 by running the below command:
npm install @playwright/test@1.32

1	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

1	npm init playwright@latest

2. Open the Playwright in UI mode by running the below command:
npx playwright test --ui

1	npx playwright test --ui

It will open the Playwright Test Runner in your browser, where you can interact with your tests and gain insights into each step of the test execution process.

This command is particularly helpful during development when you need a more visual, hands-on approach to test automation.

The –ui flag enables UI mode, launching an interactive interface in your browser.

After installation, the folder structure looks like as shown below:



Consider the test script below. It navigates to the KaneAI page, verifies the title and clicks a button inside a specific section. Then, it fills the First Name and Last Name fields with “KaneAI” and “Automation,” respectively. It ensures the page loads correctly and inputs test data.

// @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.lambdatest.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') });

1 2 3 4 5 6 7 8 9 10 11 12 13

// @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.lambdatest.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') });

To run the above test script, use the command:

npx playwright test --ui

1	npx playwright test --ui

Output:

Features of Playwright UI Mode

Now let’s look at different UI mode features offered by Playwright and how you can use them:

Filtering Tests

You can filter the executed test script by text or @tag. Also, With the status ‘passed,’ it will display only the passed test cases. Status with ‘failed’ will display all failed test cases, and the status ‘skipped’ will display if there are any skipped test cases during the execution.

Additionally, you can filter by the project (Chromium, Firefox, and WebKit) and display test cases that are executed in respective browsers.

Pick Locator

The Pick Locator feature in Playwright UI mode assists in identifying locators for elements on a webpage. To capture the locator of a specific field, simply click on the circle icon (as shown in the screenshot) and hover over the desired field. This will highlight and display the corresponding locator for easy selection.

Actions and Metadata

In the Actions tab, you can see all the actions we have performed against a particular test. When you hover over each command, you can see the change in DOM on the right side.

In the Metadata tab, you can see the details about the particular test case start time, browser, viewport and count, which include pages, actions and events.

Timeline View

At the top of the trace, you can see a timeline view of each action of your test. The timeline shows image snapshots after hovering over it, and double-clicking any action will show its time range.

The slider adjustment lets you choose additional actions that directly filter the Actions tab while controlling log visibility in the console and network tabs.

Watch Feature

The Watch feature enhances the testing experience by automatically rerunning the test when changes are made to the test file. This eliminates the need for manually re-executing tests after modifications, making the development and debugging process more efficient.

To enable the Watch in Playwright UI mode, simply click on the watch icon next to the specific test case. Once enabled, any changes made to that test file will automatically trigger the test to re-execute.

Source, Call, and Log

Source

In the Source tab, you can see the source code of the selected test case.

Call

In the Call tab, you can view the details of a particular command, including its start time, the time it takes to complete and other parameters.

Log

The Log tab provides the execution of the particular command in detail.

In the below screenshot, you can see the command is attempting to fill the “Last Name” field with the value “Automation”. It first waits for the textbox with the role textbox and the name Last Name* to be located.

Once the locator resolves to the correct <input> element, the script attempts to perform the fill action. However, before filling, it ensures that the element is visible, enabled, and editable.

Errors

The Error tab lets you know the reason for test failure. In case any test fails, the Timeline at the top is also highlighted with a red color where the error comes.

Console

The Console tab shows the log from the test and browser. The icons below indicate whether the console log came from the browser or the test file.

Network

In the Network tab, you can see all the requests made during the test execution. You can filter the network requests and sort them by different types of requests, methods, status codes, content types, sizes and durations.

Attachments

The Attachments tab helps with visual image comparison by identifying the difference between the images. By clicking on Diff, you can see the difference between the actual and expected images.

Annotations

Annotations are special markers that you can add to test suites to change the behavior of the test execution. Any of the tests are marked as test.skip(), test.fail(), test.fixme(), test.slow() will show in the UI mode.

Overall, Playwright UI mode makes debugging tests easier with its interactive interface, but running tests locally has limitations.

However, AI-native test execution platform such as LambdaTest allows you to scale these tests across real browsers and devices on the cloud, ensuring reliable results in different environments—without worrying about infrastructure setup.

To get started, refer to this guide on Playwright testing with LambdaTest.

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

Kailash Pathak

Currently working as Sr. Quality Lead Manager in a US-based MNC company. Where I am responsible for setting up the overall QA Automation strategy and ensuring that we deliver a high-quality product to our end users.
Apart from my role, I have involved myself in educating the community about Software Testing and Test Automation.
I am a Blogger and YOUTUBER.
I have written a couple of blogs which can find out on my site https://qaautomationlabs.com/

See author's profile