Name: Debugging Playwright Tests with Inspector
Uploaded: 2022-03-06T22:54:22-06:00
Description: In this lesson we look at how you can use the playwright inspector to debug any issues in your tests. We run through a sample test and guide you through the various portions of the playwright inspector UI.

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

In this lesson we look at how you can use the playwright inspector to debug any issues in your tests. We run through a sample test and guide you through the various portions of the playwright inspector UI.

https://app.egghead.io/api/v1/lessons/playwright-debugging-playwright-tests-with-inspector/subtitles

Instructor: [0:00] We will be using this simple reference test, which adds a few to-do items in a simple to-do app to demo what is known as the Playwright Inspector.

[0:08] To start the Playwright Inspector, you run the command that you are already familiar with, which is npx playwright test, but you add a command line flag called --debug.

[0:17] This will start your test in headed mode, start, what is known as the Playwright Inspector, and pause it at the first action that is present within your test.

[0:26] For our case, this particular action is page.goto for the to-do mvc app. The Playwright Inspector provides you with a button that allows you to step through the various actions that are present within your test.

[0:37] As we carry out the video sections, you can see them being locked out within the actions log. For example, right now, you can see that we have carried out page.goto, locator.fill, locator.press, and currently we are paused on expect to have text.

[0:53] In the middle of the screen, you can find the Playwright Selector explorer. Its text continues to update as the different actions interact with different selectors, but you can click the Explore button to discover what Playwright thinks might be good selectors for various items on screen.

[1:07] For example, to select the active button within the footer, Playwright thinks that a good selector is text=active.

[1:14] Additionally, the test is running in a headed browser, which means that you can use the browser tools to debug your web application in case of any issues.

[1:22] For example, we can inspect this particular label on screen right now, and you can see that it is a label within the DOM.

[1:28] Finally, when you are done with your debugging of the test, you can continue by pressing the Resume button and it will run to completion.

[1:37] As you would expect in our particular case, this test passed.

Debugging Playwright Tests with Inspector

Share this video with your friends

Course

Use Playwright to Test and Automate Web Applications