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

• 01:42 Introduction to UI mode
• 03:18 Running tests in UI mode
• 03:54 Trace Viewer overview
• 05:51 Using Watch mode
• 07:22 Using Pick Locator

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.