Debugging Playwright tests in VS Code

• 00:56 Error Messages in VS Code
• 01:28 Live-Editing Error in Browser
• 02:24 Debugging Tests with Breakpoints
• 03:56 Choosing Browser for Debugging

In this video tutorial, we learn how to debug our Playwright tests using breakpoints and live editing in Visual Studio Code (VS Code). The tutorial uses the example test provided by Playwright, which has two basic tests; we'll focus on the second test that checks the "Get Started" link.

When a test fails, you can see the error messages directly in VS Code, and Playwright tells you exactly what went wrong, such as locator errors or conflicts. In the example shown, the test failed because there were multiple elements sharing the same locator. To fix this, we can make the locator more specific to avoid conflicts with other elements on the page.

To live-edit the test while investigating the error in the browser, you can click on the error and update it directly in the browser. In the video, we modify the locator using the browser's live-edit feature until it resolves to just one element. You can then save the updated locator and re-run the test to see if it passes.

To debug your tests using breakpoints, simply click on the red dot that appears when hovering over the line you want to add a breakpoint to. Then, right-click the test, and click "Debug Test." The browser will pause at the breakpoint, and you can step through the test to examine each step in detail. When debugging, you can also choose which browser the test runs on, such as Chrome, Firefox, or Webkit.

In summary, the video shows us how to debug Playwright tests in VS Code using breakpoints and live editing, making it an efficient method for fixing errors and improving test reliability.