Playwright's UI Mode - watch mode and time travel debugging
Tags: playwright, e2e, testing, node
Published: 2023-05-05 13:13:53


Are you looking for a more efficient way to execute and debug your end to end tests? Look no further than [Playwright's UI Mode](https://playwright.dev/docs/test-ui-mode). In this guide, we'll explore the features of Playwright's UI Mode and show you how to take advantage of them for your test automation needs. UI mode is only available when using Playwright with Node.js and not with Python, Java or C#.

## What is UI Mode?

UI Mode is a powerful graphical user interface that provides a comprehensive trace of each of your tests. With UI Mode, you can explore, run, and debug your tests effortlessly with its time-traveling capabilities. The user-friendly interface enables you to view detailed test results, including logs, DOM snapshots, and trace information.

In addition, UI Mode comes equipped with watch mode, which allows you to monitor any of your tests and automatically rerun them on every code change, providing an optimal developer experience. 

Overall, Playwright's UI Mode provides a comprehensive, user-friendly testing experience that allows you to identify and fix issues with your tests quickly and easily.

## How to Use UI Mode?

To use UI Mode, you need to run the following command:

```bash
npx playwright test --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.

![running your tests in UI mode](https://user-images.githubusercontent.com/13063165/234280447-684d4bff-61bd-4a07-881d-e687af8832c7.png)

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

![filtering tests in UI mode](https://user-images.githubusercontent.com/13063165/234307854-adb49634-a588-4ea7-aa0e-2c31e845caf9.png)

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

![viewing test traces in ui mode](https://user-images.githubusercontent.com/13063165/234280447-684d4bff-61bd-4a07-881d-e687af8832c7.png)

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

![actions and metadata in ui mode](https://user-images.githubusercontent.com/13063165/234294652-b32f7c74-6df3-4152-95e3-810e928562a2.png)

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

![source console long and network in ui mode](https://user-images.githubusercontent.com/13063165/234323603-3d9a152d-f9fc-48d8-82d2-26c8c1866abb.png)

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

![pop out and inspect dom in ui mode](https://user-images.githubusercontent.com/13063165/234293178-4754c4a1-880d-46bc-971c-f85ef2672eff.png)

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

![timeline view in ui mode](https://user-images.githubusercontent.com/13063165/234295914-f7ee3d8b-33a7-41b3-bc91-d363baaa7305.png)

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

![pick locator in ui mode](https://user-images.githubusercontent.com/13063165/234297860-35722199-3ddc-4c53-a37e-1858be045720.png)

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

![watch mode in ui mode](https://user-images.githubusercontent.com/13063165/234304918-dd0fb6d5-bfb1-4182-8c55-33cd3da5f83e.png)

## Conclusion

In conclusion, Playwright's 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. Whether you're a seasoned automated testing pro or just getting started with test automation, [Playwright's UI Mode](https://playwright.dev/docs/test-ui-mode) is definitely worth checking out.

## Useful links

- [UI Mode docs](https://playwright.dev/docs/test-ui-mode)
- [UI Mode video](https://youtu.be/d0u6XhXknzU)
- [Playwright on Discord](https://aka.ms/playwright/discord)
- [Star us on GitHub](https://github.com/microsoft/playwright)