Playwright UI Mode

UI Mode lets you explore, run, and debug tests with a time travel experience complete with a watch mode. All test files are displayed in the testing sidebar, allowing you to expand each file and describe block to individually run, view, watch, and debug each test.

What is UI Mode?

In Playwright, UI mode is a feature that allows you to run and debug your tests in a graphical interface. It provides a visual representation of your tests as they run, making it easier to inspect and interact with your web app during test development.

How to Run Playwright in UI Mode

If you're using Playwright Test (the built-in test runner), you can launch UI mode using the following command:

npx playwright test --ui

This opens an interactive GUI where you can:

1. Browse your test files
2. Run individual tests or entire files
3. See step-by-step actions and screenshots
4. Debug with breakpoints or await page.pause()
5. Replay failed tests interactively

Key Features of UI Mode

1. Visual debugging: Inspect each test step with before/after snapshots.
2. Live editing: Quickly update your tests and re-run them without restarting.
3. Watch mode: Automatically re-run tests on file changes.
4. Trace viewer integration: View Playwright traces directly in the UI.

When you launch UI Mode, you'll see a list of all your test files. To run your tests, you have several options: click the triangle icon in the sidebar to run all of your tests, hover over a test file's name, and click on the triangle next to it to run a single test, a block of tests, or an entire test file.

Filtering Tests in UI Mode

You can filter tests by text or @tag, by passed, failed, or skipped tests, and by projects as set in your playwright.config file. If you are using project dependencies, make sure to run your setup tests first before running the tests that depend on them. The UI Mode will not take into consideration the setup tests, so you will have to manually run them first.

Viewing Test Traces

Traces provide detailed information about each test that has been executed. You can access the trace results by clicking on any of the individual test names. By examining the trace results, you can identify the cause of any failures or errors that occurred during the test run and take appropriate action to address them.

Actions and Metadata

The Actions tab provides valuable insights into your test execution. You can view the specific locator used for each action and the time taken to complete it. When you hover over each action, you can observe the changes in the DOM snapshot. Additionally, you can navigate backward and forward in time, and click on any action to inspect and debug it. The Before and After tabs allow you to visually track the changes that occurred before and after each action.

Adjacent to the Actions tab, you'll find the Metadata tab. This tab provides you with additional information on your test, such as the browser used, viewport size, test duration, and more.

Source, Console, Log, and Network

When hovering over a test action, its corresponding source code is highlighted below. To view the entire test's source code, click the "source" tab. Console logs and network logs for each action can be accessed by clicking the "console" and "network" tabs, respectively.

Pop Out and Inspect the DOM

To enhance your debugging experience, you can pop out the DOM snapshot by clicking the dedicated icon located above it. This will open the snapshot in a separate window where you can inspect HTML, CSS, and more using the browser DevTools. You can then go back to UI Mode and pop out another action's snapshot to compare or debug them side by side.

Timeline View

At the top of the trace, you can see a timeline view of each action of your test. Hover back and forth to see an image snapshot for each action.

Pick Locator

One of the most important parts of automated testing is identifying the elements on the page that you want to interact with. The Pick Locator feature in Playwright's UI Mode makes this process much easier by allowing you to easily select an element and retrieve its locator.

To use Pick Locator, simply click on the Pick Locator button in the UI Mode toolbar. This will activate the feature and highlight all the elements on the page as you hover over them. Once you click on a element the corresponding locator will be displayed in the Pick Locator field. Click on the copy button and then paste the locator into your test.

Watch Mode

Watch Mode is another useful feature in Playwright's UI Mode that allows you to automatically re-run your tests as you make changes to your code. This can be particularly helpful when you are working on a large test suite and want to quickly test a change you've made without having to manually re-run the tests every time.

To use Watch Mode, simply click on the Eye icon next to the name of the test you want to watch. This will activate the feature and automatically re-run the test whenever you make changes to its code. You can watch multiple tests at the same time by clicking on the Eye icon next to each test, or you can watch all the tests in your test suite by clicking on the Eye icon at the top of the sidebar.

If you are using VS Code, you can easily open the test file in the editor by clicking on the File icon next to the Eye icon. This will open the test file in VS Code and take you directly to the line of code that corresponds to the test step you are currently watching.

This all about UI mode in playwright. Playwright UI Mode offers a powerful set of tools for exploring, running, and debugging your automated tests. The time travel experience, complete with watch mode, filtering, and tracing, allows you to quickly identify and fix issues in your test code, while the Pick Locator feature simplifies the process of selecting and interacting with elements on the page.