Playwright VSCode Extension

Instructor: [0:00] Now Playwright provide some pretty cool tooling for VS Code. To demo that, let's open up the basic Playwright template project and open up the example .spec file. Run through a scenario where we want to execute this first test, should allow me to add ToDo items.

[0:15] Now, you could mess around with the Playwright command line to get there, but let's instead use the VS Code extension. We go into the extensions panel and search for Playwright. We need to install the one that is provided by the verified Microsoft account.

[0:29] Select the extension and click Install. With the installation out of the way, you will probably notice that we already get a new test panel. Going back to our task of just running this first test, you can see this new play icon next to the test definition.

[0:44] To execute this test, simply click the play icon and you can see the test results immediately and this test of course, passes. Another neat feature that this extension provides, is the overall time for the test execution, as well as the durations for the individual actions.

[1:00] You can also click the Check icon to trigger a re-run of any given test. Now you might recall that within our Playwright of config.ts, we have a few projects defined for the different browsers. The extension will by default run with the first project that you have.

[1:17] You can see that within the testing panel, when you expand the double-play icon. Speaking of the double-play icon, you can click that to trigger a run of all of the tests that are found within your code. Doing everything within your IDE, just results in a much smoother workflow, especially when you are focused on the code.

[1:36] Speaking of code, you can use this extension to debug your code within VS Code as well. We add a new breakpoint right before this particular test terminates, and then we can trigger a debug for this particular test by right clicking on the check icon and selecting debug test.

[1:52] This will start a test session in headed mode and actually pause our code at that particular breakpoint. Here, you can use any of the debugging tools that are provided by VS Code. For example, watch panels and call stack to debug your test.

[2:06] Because it is running in headed mode, you can use the attached browser and use its developer tools for example the ability to inspect individual DOM elements. Once you're happy with your debugging introspections, you can continue by pressing the continue button within the debug tool bar in VS Code.