What is UI mode in Playwright?

UI mode is an interactive window, opened with npx playwright test --ui, where you pick tests from a list, run them, and step back through each action with a DOM snapshot of the page at that moment. It also has a watch mode that re-runs a test when you save its file.

This answer is one piece of Chapter 12: Debugging a Red Test.

Debugging Tools in Playwright
Tracing & Trace Viewer
Which Tool, and When

Running tests from the terminal gives you a list of passes and failures. UI mode gives you the same run as something you can look inside, which is why it is the comfortable way to write and fix tests day to day.

The Playwright docs describe what the window holds. A sidebar lists every test file, and you can run all of them, one file, one describe block or one test. Filters narrow the list by name, project, @tag or status. For the selected test there is a timeline across the top and a list of actions; hovering an action shows the page before and after it. Tabs show the source, the call, the log, errors, console messages and network requests. Pick locator gives you a locator for any element in the snapshot, and the eye icon turns on watch mode.

If you cannot open a desktop window, for example inside a container, --ui-port and --ui-host serve UI mode as a web page instead.

The window was not opened for this page. The run below used --ui-port=0: Playwright printed the address it was serving on, and a request to that address returned the Playwright Test page.

terminal

$ npx playwright test --ui

# Serve it on a free port instead of opening a window:
$ npx playwright test --ui-port=0

Output

Listening on http://localhost:55585

$ curl -sL http://localhost:55585 | grep -o "<title>[^<]*</title>"
<title>Playwright Test</title>

Test yourself

In UI mode you turn on the eye icon next to a test, then edit and save the test file. What happens?

AI can write the test now. The job is knowing whether it checks anything. That's what the course teaches, one chapter at a time.

163 lessons · 226 drills · start free

What is UI mode in Playwright?

Related questions