DEV Community

Cover image for Playwright - UI Mode
Luca Del Puppo for This is Learning

Posted on • Originally published at blog.delpuppo.net on

Playwright - UI Mode

Hi folks,

In release 1.32, Playwright released a new cool feature for us, the UI Mode!

This feature is still in beta yet, but you can use it by adding a simple option in the CLI --ui.

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

The result of this command is a new window in your display!

Playwright UI Mode view

Using this view, you can run and debug your test. But let's dive into it.

The view is split into two parts: the left part contains the list of the tests, and the right part is the crucial view to check and debug the tests. If you are familiar with the Playwright tracer, the right section is similar to the tracer view.

But what can you do with this view?

First, you can run one or many tests using the run button at the right of each test or group of tests.

Run test

Playwright runs the tests by clicking this button, and you can see the result. A green tick means the test is ok, and a red icon with a circle X means there is an error in the test.

Test feedback

Now if you click on one of the tests in the right section, you can see what happened during its execution.

In this case, let's dive into the wrong test.

In the top section, you can see the timeline of the test; you can go over it with the mouse and see all the browser views during the execution.

Timeline

In the action tab, you can find all the actions done by the test, for instance: the page creation, the navigation, each click on the page and so on. You can navigate in the history by clicking on one of these actions, and each time you click the action, the panel on the right shows the view at that specific moment. In this way, you can understand what happened during the test execution.

Actions

In the bottom bar, you can access different views: Source, Console, Network, and Log.

I think the last three views are pretty simple, and I want to focus on the Source view.

In the Source view, you can see all the code used by Playwright to run the test, and if you click on one of the actions, Playwright highlights the line of code that runs that action. If your test is wrong, Playwright shows you the error in the specific line of code where the error is thrown. In this way, you can immediately see the mistake and try fixing it.

Source

The last cool feature introduced in this view is the possibility to open the Source code directly from the view! If you click the icon at the right of the Run icon, Playwright opens the file using Visual Studio Code.

Open code to VsCode

Last but not least, Playwright keeps syncing your codebase with the Playwright UI Runner, so in this way, you can change and fix errors and retry the test immediately.

If you want to find out more or watch the Playwright UI Runner on working, check out my Youtube video.

https://www.youtube.com/watch?v=ErkRgqmHCmc

I think this solution and the integration of Playwright with VsCode are awesome, and Playwright is changing the Developer Experience in the best possible way!

Ok, that's all folks!

I hope you enjoyed this content, and now your testing phase is more comfortable and easier!

See you later!

Bye Bye 👋

Top comments (0)