The Playwright inspector is a great tool to help with debugging. It opens up a browser window highlighting the selectors as you step through each line of the test. You can also use the explore button to find other available selectors which you can then copy into your test file and rerun your tests to see if it passes.
Playwright Inspector :
Playwright Inspector is a GUI tool that helps authoring and debugging Playwright scripts. That’s our default recommended tool for scripts troubleshooting.
There are several ways of opening Playwright Inspector,
1. Using –debug
2. Using PWDEBUG
3. Using page.pause
1. Using –debug:
Debugging all tests,
npx playwright test –debug
Debugging on test
npx playwright test sample –debug
2. Using PWDEBUG :
Set the PWDEBUG environment variable to run your scripts in debug mode. This configures Playwright for debugging and opens the inspector.
In Bash terminal, set environment variable as,
PWDEBUG=1 npm run test
Additional useful defaults are configured when PWDEBUG=1 is set:
· Browsers launch in the headed mode
· Default timeout is set to 0 (= no timeout)
Using PWDEBUG=console will configure the browser for debugging in Developer tools console:
· Runs headed: Browsers always launch in headed mode
· Disables timeout: Sets default timeout to 0 (= no timeout)
· Console helper: Configures a playwright object in the browser to generate and highlight Playwright selectors. This can be used to verify text or composite selectors.
PWDEBUG=console npm run test
Debugging Selectors
Playwright will throw a timeout exception like locator.click: Timeout 30000ms exceeded when an element does not exist on the page. There are multiple ways of debugging selectors:
Playwright Inspector to step over each Playwright API call to inspect the page.
· Browser DevTools to inspect selectors with the DevTools element panel.
· Trace Viewer to see what the page looked like during the test run.
· Verbose API logs shows actionability checks when locating the element.
· Using Playwright Inspector
Open the Playwright Inspector and click the Explore button to hover over elements in the screen and click them to automatically generate selectors for those elements. To verify where selector points, paste it into the inspector input field and click ‘Explore’.
3. Using page.pause
This will pause the execution in headed mode and we can access devtool to locate elements as,
Use the playwright API
· playwright.$(selector): Highlight the first occurrence of the selector. This reflects how page.$ would see the page.
· playwright.$$(selector): Highlight all occurrences of the selector. This reflects how page.$$ would see the page.
· playwright.inspect(selector): Inspect the selector in the Elements panel.
· playwright.locator(selector): Highlight the first occurrence of the locator.
· playwright.clear(): Clear existing highlights.
· playwright.selector(element): Generate a selector that points to the element.
Verbose API Logs:
Playwright supports verbose logging with the DEBUG environment variable.
DEBUG=pw:api npx playwright test
This will display log in bash CLI as,
References :
