Name: Playwright VSCode Extension
Uploaded: 2022-03-02T21:16:24-06:00
Description: We look at the various features of the VSCode Extension for Playwright and how it can help you with your testing workflow.

Playwright Tests API Basics

Setting up Microsoft Playwright

Adding Playwright to your Web App

Playwright VSCode Extension

Visual Regression Testing with Playwright

Generate Playwright Snapshots on your CI Server

Debugging Playwright Tests with Inspector

Quickly Generate Playwright Tests with Codegen

Postmortem Debugging Failed Tests with the Playwright Trace Viewer

Capture Failed Test Videos and Screenshots with Playwright

Playwright Selectors

Page Object Model Pattern with Playwright

Playwright Test Fixtures, Browser Context and Page

Playwright Library for Browser Automation

Use Playwright to Test and Automate Web Applications

We look at the various features of the VSCode Extension for Playwright and how it can help you with your testing workflow.

https://app.egghead.io/api/v1/lessons/vs-code-playwright-vscode-extension/subtitles

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.

Playwright VSCode Extension

Share this video with your friends

Course

Use Playwright to Test and Automate Web Applications