Playwright Local Browser Automation

Status: Production Ready ✅ Last Updated: 2026-01-21 Dependencies: Node.js 20+ (Node.js 18 deprecated) or Python 3.9+ Latest Versions: [email protected], [email protected], [email protected] Browser Versions: Chromium 143.0.7499.4 | Firefox 144.0.2 | WebKit 26.0

⚠️ v1.57 Breaking Change: Playwright now uses Chrome for Testing builds instead of Chromium. This provides more authentic browser behavior but changes the browser icon and title bar.

Quick Start (5 Minutes)

1. Install Playwright

Node.js:

npm install -D playwright
npx playwright install chromium

Python:

pip install playwright
playwright install chromium

Why this matters:

• playwright install downloads browser binaries (~400MB for Chromium)
• Install only needed browsers: chromium, firefox, or webkit
• Binaries stored in ~/.cache/ms-playwright/

2. Basic Page Scrape

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();

await page.goto('https://example.com', { waitUntil: 'networkidle' });
const title = await page.title();
const content = await page.textContent('body');

await browser.close();
console.log({ title, content });

CRITICAL:

• Always close browser with await browser.close() to avoid zombie processes
• Use waitUntil: 'networkidle' for dynamic content (SPAs)
• Default timeout is 30 seconds - adjust with timeout: 60000 if needed

3. Test Locally

# Node.js
npx tsx scrape.ts

# Python
python scrape.py

Why Playwright Local vs Cloudflare Browser Rendering

When to use Cloudflare: Serverless environments, simple scraping, cost-efficient at scale When to use Local: Anti-bot bypass needed, residential IP required, complex automation

The 7-Step Stealth Setup Process

⚠️ 2025 Reality Check: Stealth plugins work well against basic anti-bot measures, but advanced detection systems (Cloudflare Bot Management, PerimeterX, DataDome) have evolved significantly. The detection landscape now includes:

• Behavioral analysis (mouse patterns, scroll timing, keystroke dynamics)
• TLS fingerprinting (JA3/JA4 signatures)
• Canvas and WebGL fingerprinting
• HTTP/2 fingerprinting

Recommendations:

• Stealth plugins are a good starting point, not a complete solution
• Combine with realistic user behavior simulation (use steps option)
• Consider residential proxies for heavily protected sites
• "What works today may not work tomorrow" - test regularly
• For advanced scenarios, research alternatives like nodriver or undetected-chromedriver

Step 1: Install Stealth Plugin (Node.js)

npm install playwright-extra playwright-stealth

For puppeteer-extra compatibility:

npm install puppeteer-extra puppeteer-extra-plugin-stealth

Step 2: Configure Stealth Mode

playwright-extra:

import { chromium } from 'playwright-extra';
import stealth from 'puppeteer-extra-plugin-stealth';

chromium.use(stealth());

const browser = await chromium.launch({
  headless: true,
  args: [
    '--disable-blink-features=AutomationControlled',
    '--no-sandbox',
    '--disable-setuid-sandbox',
  ],
});

const context = await browser.newContext({
  userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
  viewport: { width: 1920, height: 1080 },
  locale: 'en-US',
  timezoneId: 'America/New_York',
});

Key Points:

• --disable-blink-features=AutomationControlled removes navigator.webdriver flag
• Randomize viewport sizes to avoid fingerprinting
• Match user agent to browser version (Chrome 120 example above)

Step 3: Mask WebDriver Detection

await page.addInitScript(() => {
  // Remove webdriver property
  Object.defineProperty(navigator, 'webdriver', {
    get: () => undefined,
  });

  // Mock plugins
  Object.defineProperty(navigator, 'plugins', {
    get: () => [1, 2, 3, 4, 5],
  });

  // Mock languages
  Object.defineProperty(navigator, 'languages', {
    get: () => ['en-US', 'en'],
  });

  // Consistent permissions
  const originalQuery = window.navigator.permissions.query;
  window.navigator.permissions.query = (parameters) => (
    parameters.name === 'notifications' ?
      Promise.resolve({ state: Notification.permission }) :
      originalQuery(parameters)
  );
});

Step 4: Human-Like Mouse Movement

// Simulate human cursor movement
async function humanClick(page, selector) {
  const element = await page.locator(selector);
  const box = await element.boundingBox();

  if (box) {
    // Move to random point within element
    const x = box.x + box.width * Math.random();
    const y = box.y + box.height * Math.random();

    await page.mouse.move(x, y, { steps: 10 });
    await page.mouse.click(x, y, { delay: 100 });
  }
}

Step 5: Rotate User Agents

const userAgents = [
  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
  'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
]