Debugging Playwright Tests with Inspector

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.