Uses of Playwright Inspector

Playwright Inspector is used to find and remove errors in any playwright test. There are many options in Playwright Inspector, and we can explore each of them.

One of the features of Playwright is its Record option. We can record the actions performed and add assertions using Record option. In the playwright terminal, use the npx playwright codegen command. This will open the Playwright Inspector with a basic skeletal code along with a new browser.

Next, we can enter the URL of the web application that we are going to test. As we perform the actions like click, enter data, etc. the corresponding code gets generated in the Inspector. We can add code to Assert visibility, Assert text, Assert value and Assert snapshot of any particular field.

Debug Test:

To debug a test, we need to run tests with -debug flag to open the playwright inspector.

This opens the Playwright Inspector, with the code to debug. By default, the browser opens in headed mode and there is no timeout.

Command	Explanation
npx playwright test --debug	Debug all tests on all browsers
npx playwright test DemoDebug.spec.js --debug	Debug one test on all browsers
npx playwright test --project=webkit --debug	Debug on a specific browser
npx playwright test DemoDebug.spec.js:3 --project="Mobile Chrome" --debug	Debug one test on a specific browser

A browser window is open for each test. To run a particular test, we need to specify the line number of that test. The browser type and project details can be configured in playwright.config file.

Once the Playwright Inspector is open, we can use the step over option to execute each step. When we navigate, each step that gets executed and the corresponding locator is highlighted.

When we have many lines of code and we need to debug only a particular line, then stepping over each step is time consuming. In that case, we can use page.pause(). Add page.pause() before the line of code which we need to debug. When we run the test in debug mode, the Inspector window is open. Then click the play button to execute the code until page.pause(). After that we can step over each line of code to debug.

If we need to find the locator for an element during debugging, we can use the Pick Locator option. Using this open we can find locators, edit them if needed and use in the code.

Playwright’s auto wait functionality can be seen in Actionability logs in the Inspector. Before an action is performed, playwright automatically checks if the element is stable, visible and enabled. This is recorded in the actionability logs.

From the above code, we can see that for performing a click action, playwright is waiting for the element to be visible, enabled and stable, scrolling the element into view, performing the action and waiting for the navigation to be complete. The time taken to complete each action is also logged.

Using the playwright Inspector, we can effectively debug our code.