DEV Community

Cover image for Playwright's UI Mode - watch mode and time travel debugging
Debbie O'Brien for Playwright end to end Testing

Posted on • Updated on

Playwright's UI Mode - watch mode and time travel debugging

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

npx playwright test --ui
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

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

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

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

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

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 is definitely worth checking out.

Useful links

Top comments (6)

Collapse
 
toddbradley profile image
Todd Bradley

With Python, playwright gives the error "error: unknown command 'test'". I suspect this feature only works with one of the four languages Playwright supports. If so, it's probably worth mentioning in the article.

Collapse
 
debs_obrien profile image
Debbie O'Brien

thanks for recommendation. updated the article to reflect that it only works when using playwright in node.js and not with other languages

Collapse
 
vinayb profile image
Vinay Basanagowda • Edited

Playwright UI does not show the tests even though the tests are in proper folder as mentioned in the config file. It always goes Infinite loading… . Here the playwright Ui is hosted as an application and it is running in a pod of a node of kube Cluster

Collapse
 
ysegura8802 profile image
Yordani Cruz Segura

Hi Debbie.
I am writing to see if you can help me with any ideas. I'm trying to implement some tests with Playwright but I need to pass two factor authentication. Is there a way to do it with the tool?

Greetings.
Yordani!!!

Collapse
 
deniscoelhow profile image
deniscoelhow

I'm using cucumber with Playwright at my project. Is there any way to run cucumber tests with playwright in this --ui mode?
I tried running it in my project, but it didn't work.

Collapse
 
debs_obrien profile image
Debbie O'Brien

i am afraid not at the moment. but you can fill out a feature request on GitHub