From Manual to Automated: Streamlining Your Dev Workflow with Playwright CLI

2026-01-30

As a software engineer, you know that writing End-to-End (E2E) tests can sometimes feel like a chore—especially when you're hunting for the "perfect" CSS selector or trying to figure out why a click isn't registering. This tool is designed to take that friction away.

From an engineering perspective, the Playwright CLI isn't just a "helper"; it’s a productivity booster. Here’s why

Zero-Effort Code Generation
Instead of manually typing out every await page.goto(), you can just perform the actions in a browser and let the CLI write the script for you.

Selector Debugging
It provides a real-time "Pick Selector" tool. No more guessing if .btn-primary >> text=Submit is the right path; the CLI confirms it visually.

Rapid Prototyping
Need to check how a site looks on an iPhone 13? One command and you're there.

CI/CD Friendly
You can use it to install necessary browser binaries in your deployment pipelines with a single line.

If you already have a Node.js project, you likely have access to it via npx. If not, you can install it globally (though npx is usually preferred to keep your environment clean).

# Usually installed as part of playwright
npm install -g playwright

# Or just run it on the fly
npx playwright --help

This opens two windows
a browser and a "Playwright Inspector." As you click and type in the browser, the CLI generates clean, readable Playwright code in real-time.

npx playwright codegen https://example.com

Ever needed to quickly see how a bug looks on a specific device? You don't need a physical phone or a heavy emulator.

# Open example.com emulating an iPhone 13
npx playwright open --device="iPhone 13" https://example.com

Perfect for automated reports or quick visual checks without writing a single line of JS.

# Capture a full-page screenshot
npx playwright screenshot --full-page https://github.com/microsoft/playwright-cli github-shot.png

After running codegen, you’ll get a script that looks something like this. Notice how it handles waiting and selectors automatically

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();

  // Navigate to the site
  await page.goto('https://demo.playwright.dev/todomvc/');

  // Interact with elements
  await page.getByPlaceholder('What needs to be done?').fill('Buy milk');
  await page.getByPlaceholder('What needs to be done?').press('Enter');

  // Check a checkbox
  await page.getByRole('checkbox', { name: 'Toggle High Priority' }).check();

  // Close up shop
  await context.close();
  await browser.close();
})();

Use the npx playwright open --debug command. It allows you to step through your script line-by-line while highlighting the elements on the page. It makes debugging complex UI logic significantly less painful!