PLAYWRIGHT - UPDATES TO UI MODE & TRACEVIEWER

• 01:00 Setting up the test in Playwright
• 03:10 Running the test and introducing before and after hooks
• 05:27 Introducing Attachments and demonstration of video playback
• 07:26 Demonstrating screenshot comparison failure
• 10:12 Summarizing the new features in Playwright version 1.34

In this video, Jared from Commit Quality goes over some updates made to the UI tool and the trace viewer tool in Playwright. He highlights the new features added as part of version 1.34 and demonstrates how they can be utilized for better usability and efficiency.

Jared begins with a walkthrough of his setup process, showing how he has configured certain commands to run before each test, created a simple test, and enabled the video and screenshots options in the Playwright config file.

He then launches Playwright's UI mode and runs his test. He points out the various new features this version introduces. Among these are the additions of before and after hooks, providing a clear overview about what happens before a test is initiated and after it's wrapped up. This feature also allows for a detailed breakdown of test steps for better organization and easier debugging. The source code also highlights these before and after hooks which can aid in understanding the working of these hooks in the test file.

Attachements are another notable addition to this version. For someone using the video option in their config file, a new tab for attachments is now available, showing the video of the test run. Screenshots would also technically be available in this tab, however, Jared notes that it seems to be bugged in this version which is expected to be fixed in the next version update.

He also points out that, with the launch of this update, users can also see why a screenshot comparison test failed within the UI mode itself, making the process of identifying and correcting errors more efficient and convenient. The UI mode shows the difference between the expected and actual outcomes as well as the location of the errors.

In summary, Jared demonstrates that this update provides a clear overview of the test processes, allows users to organize their tests more effectively, and makes the process of detecting and correcting errors more efficient. Whether debugging locally or via continuous integration pipelines, these new features can save valuable time and effort.