MORE PLAYWRIGHT UI MODE UPDATES!! (Amazing VSCode Extension improvement!)

• 01:00 Playwright VS Code extension update
• 01:49 Handling multiple tests with Trace Viewer
• 03:24 Nesting of routing commands in Trace Viewer
• 04:27 Browser-based UI mode and Trace viewing
• 04:55 Using Trace files in browser

In this video, Jared from Commit Quality goes over the updates made to Playwright version 1.35, focusing on enhancements to the UI mode and TraceViewer. These updates aim to make test authoring and debugging even more efficient for users.

First, Jared talks about the Playwright VS Code extension update, which allows users to view UI mode directly from the testing session. To use this new feature, simply click on the testing tab and check the "Show Trace Viewer" box. Running a test now will show the UI mode or Trace viewer for that test.

Next, Jared demonstrates how Playwright handles multiple tests being run in the VS Code extension. When running multiple tests, the Trace Viewer will ask users to choose a trace they want to view. In this video, Jared shows how easy it is to switch between trace views for each test.

The third update Jared demonstrates is the nesting of routing commands in the Trace Viewer. When using the page.route command to modify network requests, any routing requests will now be nested underneath the command they apply to. This makes it easier to see which requests link to specific actions inside the Trace Viewer.

Finally, Jared shows the new browser-based UI mode and Trace viewing feature by running the command npx playwright-test --ui-port 0. This opens the UI TraceViewer in the user's default browser and allows them to perform the same actions they would in the standalone UI mode. The same can be done for Trace files using the command npx playwright show-trace --port 0.

These updates continue to enhance the Playwright TraceViewer and UI mode experience, making it even more user-friendly and efficient for developers to work with.