Better than Cypress? Playwright UI Watch Mode

• 00:42 Updating package.json and installing new Playwright version
• 02:00 Running UI mode
• 02:34 Preview of test scripts in UI mode and executing tests
• 05:03 Watch mode demonstration
• 10:12 Other improvements - dependency handling, locator chaining, TypeScript integration

In this video, we explore the new exciting UI mode in Playwright version 1.32, which introduces features like watch mode similar to what we have in Cypress. As a quick demo, we update our package.json file to use version 1.32.0 and run our test script.

To start, we need to update our package.json file and install the new version of Playwright. We do this by deleting the node_modules folder and then running npm install to install dependencies, followed by npx playwright install to install the new browser versions.

Once we are done with updating, we can simply run npx playwright test --ui to start the UI mode. We can also add the --ui flag to our script in the package.json file.

When the UI mode starts, we can see our test scripts in a clean and organized interface. We can select individual tests, view the file contents, and execute the test scripts directly from the UI.

In addition to the UI testing features, we also have the watch mode, allowing us to see live updates of our tests as we make changes to our script. To enable watch mode, simply toggle the switch in the UI.

The new version of Playwright also introduces other improvements like dependency handling, locator chaining, and a more streamlined integration with TypeScript. However, it is worth noting that these new features are currently only available for the Playwright test runner and not for Java.

In conclusion, version 1.32 of Playwright offers several new features that make it even more powerful and user-friendly. This update further solidifies the case for using Playwright with TypeScript as a preferred test automation framework.