Playwright VSCode Extension

Playwright comes with an excellent BS code extension maintained by Microsoft itself. And it's actually so well put together that it might just be the reason you choose to use playwright for all your testing needs, including even unit testing within Visual Studio Code. Head on over to the extension panel, which you can find in the sidebar. And then for the extension search playwright, you'll get a number of options, but select the one that is provided by Microsoft. You can see the Microsoft icon with a verified tick mark next to it, and then install this extension. And that's all that you need in order

to start using this extension. And I do want to point out that this extension comes with a nice read me as well. The playwright extension automatically picks up our playwright config and based on that has some nice integrations in the BS code site panel as well as in our test files. So if we have a demo playwright project open and we look at the test files, you can see that on example, do Spec TAs. We get these nice play icons next to every single test that is present within our spec to run an individual test. All that we need to do is to click the play icon and it starts executing

that test using playwright once the test completes. Note that it points out the total time it took for that particular test to run, as well as the time for the individual steps present within the test. We only have two steps, which is page dot, go to and expect page to have title. Additionally, the play icon and next to the test turns into a tick mark to point out the fact that the last run of this test passed successfully. Another neat feature of the extension is the ability to quickly run all the tests that exist in our project within the testing site panel. If we expand the tests, you can see that we have example

to Specter Ts that has two tests and we only ran one of them in our last run. To run all the tests, press the double play icon present at the top of the test explorer, and of course these tests will run very fast. And once they complete, you can see that there is a green check mark. Next to all the tests that playwright has identified, the playwright extension automatically picks up the projects that we have configured in our playwright config and allows you to pick them as vs. Code test profiles. If you look at our playwright config TAs, you can see that within the projects we have three projects configured

Chromium, Firefox, and Web Kit for the desktop, Chrome, Firefox, and Safari. Within the testing sidebar provided by playwright, if we click the dropdown next to the Double Arrows, you can see that these three have been added as test profiles for Visual Studio Code. The default profile is the first one, which is chromium in case, but we can modify the default profile by selecting that option and selecting something else. For example, let's run all our tests through web kit alone. By default, the tests have been running in headless mode, but we can change that by selecting the option show browser. Now if you run all the tests, they will run using Web kit

and additionally, they will be running in headed mode. So we will be able to see Safari when it launches the individual tests. Once we are done with the tests, we can close all the browsers that have been left open by playwright, by clicking the button close all browsers.