Using the Playwright Inspector

Playwright comes with an excellent standalone tool called the Playwright Inspector that allows you to run and debug your tests in a nice graphical user interface even if you don't have an IDE like Visual Studio code installed. To demonstrate the playwright inspector in action, we have a very simple test with an inspect dot spec ts that verifies that we can successfully add a few items to a to-DO style app. You can launch the inspector with a standard playwright test command by passing in an additional command line flag called minus minus debug. Here we are running the inspect spec file and adding the debug flag to launch the inspector.

This starts the playwright test inherited mode and launches the playwright inspector. Once the test starts executing, you can see the playwright inspector on the right hand side and the browser on the left hand side. The inspector automatically pauses our test right before the first interaction with the page. You can see the steps that have been carried out and the current step that we are paused at at the bottom of the inspector. We can execute our tests one step at a time by using this step over button. So now we have navigated to the page and successfully added one to do. The inspector also provides a feature called pick locator,

which we can activate by clicking it. And this allows us to select the various dorm elements within the browser, and playwright will automatically try to give us a nice suggestion for the locator that we should try to use for that particular element. As an example, if you wanted to locate the active button, playwright is suggesting that we should use data dash test active. Additionally, because we have access to the running browser, we can inspect the various dorm elements within the browser using the browsers built in tools. Once we are happy with that debug session, we can continue running the test one step at a time,

or we can press the resume button to let the test run to completion. Once the test completes, the inspector and the browser will exit. And as you can see, the simple test pass the inspector is a great tool to be aware of when you want a simple way to step through a test without having to set up anything beyond the standard day. Right. CLI.