Rayrun
← Back to videos

Playwright's UI Mode: Watch mode and time travel debugging

Playwright's new UI Mode brings a watch mode together with the trace viewer to create a time-travel debugging experience. 

In this video, the presenter gives a valuable overview of the new UI mode in Playwright, a browser automation library. The new UI mode improves the developer experience by allowing users to watch and interact with the tests in real-time, enabling better understanding and quicker debugging. This mode also introduces Watch mode, requested by developers to perform code changes in real-time and observe the test results instantly.

Before the new UI mode, developers had to rely on debug mode to step through the test, displaying the browser's actions, but only going forward. Developers also used trace viewer for debugging on CI, but they wanted watch mode, better local trace viewer integration, and improved developer experience.

To use UI mode, run npx playwright test --ui in your terminal. UI mode is divided into three main sections:

  1. Test Sidebar - Displays all the tests from your test folder, allowing you to filter them just like in the Visual Studio Code sidebar. You can run individual tests or all tests by clicking the play button.

  2. Trace Viewer - Live trace of your tests. Use the timeline view to navigate through the test events and the DOM snapshot; hover over actions to see the corresponding code. The trace viewer also offers console and network data as well as the full log and metadata.

  3. Watch Mode - Click the eye icon next to a test to watch that test in real-time. After clicking on the watch icon, click on 'Open in VS Code' to open the associated test. Make changes to the test code, save it, and observe the changes immediately in the UI mode.

Additionally, UI mode provides options like 'Pick Locator' to help developers quickly find elements on the page, copy their selector code, and paste it into their tests. This feature makes it much easier to create and adjust tests.

In conclusion, Playwright's new UI mode greatly enhances the developer experience making it much easier and faster to create, debug, and modify tests. It offers useful features like watch mode, live trace viewer, timeline, filters, and many more, making it a valuable addition to the Playwright library.

Related Videos

MORE PLAYWRIGHT UI MODE UPDATES!! (Amazing VSCode Extension improvement!)
MORE PLAYWRIGHT UI MODE UPDATES!! (Amazing VSCode Extension improvement!)
Playwright Tutorial: Output Console logs as step traces to UI watch Mode & Traceviewer
Playwright Tutorial: Output Console logs as step traces to UI watch Mode & Traceviewer
#16 - ARIA and how Playwright is making use of it to identify UI controls?
#16 - ARIA and how Playwright is making use of it to identify UI controls?
Playwright with UI Mode is awesome
Playwright with UI Mode is awesome
TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.