Skip to content

CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.

License

Notifications You must be signed in to change notification settings

yury-s/playwright-cli

 
 

🎭 Playwright CLI npm version Join Slack

Playwright CLI is utility tool for Playwright. With the CLI, you can:

Usage

$ npx playwright-cli --help

# To save as a dependency
$ npm install -D playwright-cli

Generate code

$ npx playwright-cli codegen wikipedia.org

Run codegen and perform actions in the browser. Playwright CLI will generate JavaScript code for the user interactions. codegen will attempt to generate resilient text-based selectors.

Open pages

With open, you can use Playwright bundled browsers to browse web pages. Playwright provides cross-platform WebKit builds that can be used to reproduce Safari rendering across Windows, Linux and macOS.

# Open page in Chromium
npx playwright-cli open example.com
# Open page in WebKit
npx playwright-cli wk example.com

Emulate devices

open can emulate mobile and tablet devices (see all devices).

# Emulate iPhone 11.
npx playwright-cli --device="iPhone 11" open wikipedia.org

Emulate color scheme and viewport size

# Emulate screen size and color scheme.
npx playwright-cli --viewport-size=800,600 --color-scheme=dark open twitter.com

Emulate geolocation, language and timezone

# Emulate timezone, language & location
# Once page opens, click the "my location" button to see geolocation in action
npx playwright-cli --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" open maps.google.com

Inspect selectors

During open or codegen, you can use following API inside the developer tools console of any browser.

playwright.$(selector)

Query Playwright selector, using the actual Playwright query engine, for example:

> playwright.$('.auth-form >> text=Log in');

<button>Log in</button>

playwright.$$(selector)

Same as playwright.$, but returns all matching elements.

> playwright.$$('li >> text=John')

> [<li>, <li>, <li>, <li>]

playwright.inspect(selector)

Reveal element in the Elements panel (if DevTools of the respective browser supports it).

> playwright.inspect('text=Log in')

playwright.selector(element)

Generates selector for the given element.

> playwright.selector($0)

"div[id="glow-ingress-block"] >> text=/.*Hello.*/"

Take screenshot

# See command help
$ npx playwright-cli screenshot --help
# Wait 3 seconds before capturing a screenshot after page loads ('load' event fires)
npx playwright-cli \
  --device="iPhone 11" \
  --color-scheme=dark \
  screenshot \
    --wait-for-timeout=3000 \
    twitter.com twitter-iphone.png
# Capture a full page screenshot
npx playwright-cli screenshot --full-page en.wikipedia.org wiki-full.png

Generate PDF

PDF generation only works in Headless Chromium.

# See command help
$ npx playwright-cli pdf https://en.wikipedia.org/wiki/PDF wiki.pdf

Known limitations

Opening WebKit Web Inspector will disconnect Playwright from the browser. In such cases, code generation will stop.

About

CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 88.8%
  • CSS 8.2%
  • JavaScript 1.8%
  • Other 1.2%