Version: 1.9.0

Inspector

Playwright Inspector is a GUI tool that helps authoring and debugging Playwright scripts.

Playwright Inspector

Open Playwright Inspector#

There are several ways of opening Playwright Inspector:

  • Set the PWDEBUG environment variable to run your scripts in debug mode. This configures Playwright for debugging and opens the inspector.

    # Linux/macOS
    $ PWDEBUG=1 npm run test
    # Windows
    $ set PWDEBUG=1
    $ npm run test

    Additional useful defaults are configured when PWDEBUG is set:

    • Browsers launch in the headed mode
    • Default timeout is set to 0 (= no timeout)
  • Call page.pause() method from your script when running in headed browser.

    // Pause on the following line.
    await page.pause();
  • Use open or codegen commands in the Playwright CLI:

    $ npx playwright codegen wikipedia.org

Stepping through the Playwright script#

When PWDEBUG is set, Playwright Inspector window will be opened and the script will be paused on the first Playwright statement:

Paused on line

Now we know what action is about to be performed and we can look into the details on that action. For example, when stopped on an input action such as click, the exact point Playwright is about to click is highlighted with the large red dot on the inspected page:

Red dot on inspected page

By the time Playwright has paused on that click action, it has already performed actionability checks that can be found in the log:

Action log

If actionability can't be reached, it'll show action as pending:

Screen Shot 2021-02-20 at 7 36 06 PM

You can step over each action using the "Step over" action or resume script without further pauses:

Stepping toolbar

Debugging Selectors#

  • 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:
Screen Shot 2021-02-20 at 7 27 20 PM

Recording scripts#

At any moment, clicking Record action enables recorder (codegen) mode. Every action on the target page is turned into the generated script:

Screen Shot 2021-02-20 at 7 40 02 PM

You can copy entire generated script or clear it using toolbar actions.