Browser Automation

Browser automation powers web testing, scraping, and AI agent interactions.

The difference between a flaky script and a reliable system comes down to

understanding selectors, waiting strategies, and anti-detection patterns.

This skill covers Playwright (recommended) and Puppeteer, with patterns for

testing, scraping, and agentic browser control. Key insight: Playwright won

the framework war. Unless you need Puppeteer's stealth ecosystem or are

Chrome-only, Playwright is the better choice in 2025.

Critical distinction: Testing automation (predictable apps you control) vs

scraping/agent automation (unpredictable sites that fight back). Different

problems, different solutions.

Principles

• Use user-facing locators (getByRole, getByText) over CSS/XPath

• Never add manual waits - Playwright's auto-wait handles it

• Each test/task should be fully isolated with fresh context

• Screenshots and traces are your debugging lifeline

• Headless for CI, headed for debugging

• Anti-detection is cat-and-mouse - stay current or get blocked

Capabilities

• browser-automation

• playwright

• puppeteer

• headless-browsers

• web-scraping

• browser-testing

• e2e-testing

• ui-automation

• selenium-alternatives

Scope

• api-testing → backend

• load-testing → performance-thinker

• accessibility-testing → accessibility-specialist

• visual-regression-testing → ui-design

Tooling

Frameworks

• Playwright - When: Default choice - cross-browser, auto-waiting, best DX Note: 96% success rate, 4.5s avg execution, Microsoft-backed

• Puppeteer - When: Chrome-only, need stealth plugins, existing codebase Note: 75% success rate at scale, but best stealth ecosystem

• Selenium - When: Legacy systems, specific language bindings Note: Slower, more verbose, but widest browser support

Stealth_tools

• puppeteer-extra-plugin-stealth - When: Need to bypass bot detection with Puppeteer Note: Gold standard for anti-detection

• playwright-extra - When: Stealth plugins for Playwright Note: Port of puppeteer-extra ecosystem

• undetected-chromedriver - When: Selenium anti-detection Note: Dynamic bypass of detection

Cloud_browsers

• Browserbase - When: Managed headless infrastructure Note: Built-in stealth mode, session management

• BrowserStack - When: Cross-browser testing at scale Note: Real devices, CI integration

Patterns

Test Isolation Pattern

Each test runs in complete isolation with fresh state

When to use: Testing, any automation that needs reproducibility

TEST ISOLATION:

"""

Each test gets its own:

• Browser context (cookies, storage)

• Fresh page

• Clean state

"""

Playwright Test Example

"""

import { test, expect } from '@playwright/test';

// Each test runs in isolated browser context

test('user can add item to cart', async ({ page }) => {

// Fresh context - no cookies, no storage from other tests

await page.goto('/products');

await page.getByRole('button', { name: 'Add to Cart' }).click();

await expect(page.getByTestId('cart-count')).toHaveText('1');

});

test('user can remove item from cart', async ({ page }) => {

// Completely isolated - cart is empty

await page.goto('/cart');

await expect(page.getByText('Your cart is empty')).toBeVisible();

});

"""

Shared Authentication Pattern

"""

// Save auth state once, reuse across tests

// setup.ts

import { test as setup } from '@playwright/test';

setup('authenticate', async ({ page }) => {

await page.goto('/login');

await page.getByLabel('Email').fill('user@example.com');

await page.getByLabel('Password').fill('password');

await page.getByRole('button', { name: 'Sign in' }).click();

// Wait for auth to complete

await page.waitForURL('/dashboard');

// Save authentication state

await page.context().storageState({

path: './playwright/.auth/user.json'

});

});

// playwright.config.ts

export default defineConfig({

projects: [

{ name: 'setup', testMatch: /.*.setup.ts/ },

{

name: 'tests',

dependencies: ['setup'],

use: {

storageState: './playwright/.auth/user.json',

},

},

],

});

"""

User-Facing Locator Pattern

Select elements the way users see them

When to use: Always - the default approach for selectors

USER-FACING LOCATORS:

"""

Priority order:

• getByRole - Best: matches accessibility tree

• getByText - Good: matches visible content

• getByLabel - Good: matches form labels

• getByTestId - Fallback: explicit test contracts

• CSS/XPath - Last resort: fragile, avoid

"""

Good Examples (User-Facing)

"""

// By role - THE BEST CHOICE

await page.getByRole('button', { name: 'Submit' }).click();

await page.getByRole('link', { name: 'Sign up' }).click();

await page.getByRole('heading', { name: 'Dashboard' }).isVisible();

await page.getByRole('textbox', { name: 'Search' }).fill('query');

// By text content

await page.getByText('Welcome back').isVisible();

await page.getByText(/Order #\d+/).click(); // Regex supported

// By label (forms)

await page.getByLabel('Email address').fill('user@example.com');

await page.getByLabel('Password').fill('secret');

// By placeholder

await page.getByPlaceholder('Search...').fill('query');

// By test ID (when no user-facing option works)

await page.getByTestId('submit-button').click();

"""

Bad Examples (Fragile)

"""

// DON'T - CSS selectors tied to structure

await page.locator('.btn-primary.submit-form').click();

await page.locator('#header > div > button:nth-child(2)').click();

// DON'T - XPath tied to structure

await page.locator('//div[@class="form"]/button[1]').click();

// DON'T - Auto-generated selectors

await page.locator('[data-v-12345]').click();

"""

Filtering and Chaining

"""

// Filter by containing text

await page.getByRole('listitem')

.filter({ hasText: 'Product A' })

.getByRole('button', { name: 'Add to cart' })

.click();

// Filter by NOT containing

await page.getByRole('listitem')

.filter({ hasNotText: 'Sold out' })

.first()

.click();

// Chain locators

const row = page.getByRole('row', { name: 'John Doe' });

await row.getByRole('button', { name: 'Edit' }).click();

"""

Auto-Wait Pattern

Let Playwright wait automatically, never add manual waits

When to use: Always with Playwright

AUTO-WAIT PATTERN:

"""

Playwright waits automatically for:

• Element to be attached to DOM

• Element to be visible

• Element to be stable (not animating)

• Element to receive events

• Element to be enabled

NEVER add manual waits!

"""

Wrong - Manual Waits

"""

// DON'T DO THIS

await page.goto('/dashboard');

await page.waitForTimeout(2000); // NO! Arbitrary wait

await page.click('.submit-button');

// DON'T DO THIS

await page.waitForSelector('.loading-spinner', { state: 'hidden' });

await page.waitForTimeout(500); // "Just to be safe" - NO!

"""

Correct - Let Auto-Wait Work

"""

// Auto-waits for button to be clickable

await page.getByRole('button', { name: 'Submit' }).click();

// Auto-waits for text to appear

await expect(page.getByText('Success!')).toBeVisible();

// Auto-waits for navigation to complete

await page.goto('/dashboard');

// Page is ready - no manual wait needed

"""

When You DO Need to Wait

"""

// Wait for specific network request

const responsePromise = page.waitForResponse(

response => response.url().includes('/api/data')

);

await page.getByRole('button', { name: 'Load' }).click();

const response = await responsePromise;

// Wait for URL change

await Promise.all([

page.waitForURL('**/dashboard'),

page.getByRole('button', { name: 'Login' }).click(),

]);

// Wait for download

const downloadPromise = page.waitForEvent('download');

await page.getByText('Export CSV').click();

const download = await downloadPromise;

"""

Stealth Browser Pattern

Avoid bot detection for scraping

When to use: Scraping sites with anti-bot protection

STEALTH BROWSER PATTERN:

"""

Bot detection checks for:

• navigator.webdriver property

• Chrome DevTools protocol artifacts

• Browser fingerprint inconsistencies

• Behavioral patterns (perfect timing, no mouse movement)

• Headless indicators

"""

Puppeteer Stealth (Best Anti-Detection)

"""

import puppeteer from 'puppeteer-extra';

import StealthPlugin from 'puppeteer-extra-plugin-stealth';

puppeteer.use(StealthPlugin());

const browser = await puppeteer.launch({

headless: 'new',

args: [

'--no-sandbox',

'--disable-setuid-sandbox',

'--disable-blink-features=AutomationControlled',

],

});

const page = await browser.newPage();

// Set realistic viewport

await page.setViewport({ width: 1920, height: 1080 });

// Realistic user agent

await page.setUserAgent(

'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ' +

'(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'

);

// Navigate with human-like behavior

await page.goto('https://target-site.com', {

waitUntil: 'networkidle0',

});

"""

Playwright Stealth

"""

import { chromium } from 'playwright-extra';

import stealth from 'puppeteer-extra-plugin-stealth';

chromium.use(stealth());

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

const context = await browser.newContext({

viewport: { width: 1920, height: 1080 },

userAgent: 'Mozilla/5.0 ...',

locale: 'en-US',

timezoneId: 'America/New_York',

});

"""

Human-Like Behavior

"""

// Random delays between actions

const randomDelay = (min: number, max: number) =>

new Promise(r => setTimeout(r, Math.random() * (max - min) + min));

await page.goto(url);

await randomDelay(500, 1500);

// Mouse movement before click

const button = await page.$('button.submit');

const box = await button.boundingBox();

await page.mouse.move(

box.x + box.width / 2,

box.y + box.height / 2,

{ steps: 10 } // Move in steps like a human

);

await randomDelay(100, 300);

await button.click();

// Scroll naturally

await page.evaluate(() => {

window.scrollBy({

top: 300 + Math.random() * 200,

behavior: 'smooth'

});

});

"""

Error Recovery Pattern

Handle failures gracefully with screenshots and retries

When to use: Any production automation

ERROR RECOVERY PATTERN:

Automatic Screenshot on Failure

"""

// playwright.config.ts

export default defineConfig({

use: {

screenshot: 'only-on-failure',

trace: 'retain-on-failure',

video: 'retain-on-failure',

},

retries: 2, // Retry failed tests

});

"""

Try-Catch with Debug Info

"""

async function scrapeProduct(page: Page, url: string) {

try {

await page.goto(url, { timeout: 30000 });

const title = await page.getByRole('heading', { level: 1 }).textContent();

const price = await page.getByTestId('price').textContent();

return { title, price, success: true };

} catch (error) {

// Capture debug info

const screenshot = await page.screenshot({

path: errors/${Date.now()}-error.png,

fullPage: true

});

const html = await page.content();

await fs.writeFile(`errors/${Date.now()}-page.html`, html);

console.error({

  url,

  error: error.message,

  currentUrl: page.url(),

});

return { success: false, error: error.message };

}

}

"""

Retry with Exponential Backoff

"""

async function withRetry(

fn: () => Promise,

maxRetries = 3,

baseDelay = 1000

): Promise {

let lastError: Error;

for (let attempt = 0; attempt < maxRetries; attempt++) {

try {

return await fn();

} catch (error) {

lastError = error;

if (attempt < maxRetries - 1) {

    const delay = baseDelay * Math.pow(2, attempt);

    const jitter = delay * 0.1 * Math.random();

    await new Promise(r => setTimeout(r, delay + jitter));

  }

}

}

throw lastError;

}

// Usage

const result = await withRetry(

() => scrapeProduct(page, url),

3,

2000

);

"""

Parallel Execution Pattern

Run tests/tasks in parallel for speed

When to use: Multiple independent pages or tests

PARALLEL EXECUTION:

Playwright Test Parallelization

"""

// playwright.config.ts

export default defineConfig({

fullyParallel: true,

workers: process.env.CI ? 4 : undefined, // CI: 4 workers, local: CPU-based

projects: [

{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },

{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },

{ name: 'webkit', use: { ...devices['Desktop Safari'] } },

],

});

"""

Browser Contexts for Parallel Scraping

"""

const browser = await chromium.launch();

const urls = ['url1', 'url2', 'url3', 'url4', 'url5'];

// Create multiple contexts - each is isolated

const results = await Promise.all(

urls.map(async (url) => {

const context = await browser.newContext();

const page = await context.newPage();

try {

  await page.goto(url);

  const data = await extractData(page);

  return { url, data, success: true };

} catch (error) {

  return { url, error: error.message, success: false };

} finally {

  await context.close();

}

})

);

await browser.close();

"""

Rate-Limited Parallel Processing

"""

import pLimit from 'p-limit';

const limit = pLimit(5); // Max 5 concurrent

const results = await Promise.all(

urls.map(url => limit(async () => {

const context = await browser.newContext();

const page = await context.newPage();

// Random delay between requests

await new Promise(r => setTimeout(r, Math.random() * 2000));

try {

  return await scrapePage(page, url);

} finally {

  await context.close();

}

}))

);

"""

Network Interception Pattern

Mock, block, or modify network requests

When to use: Testing, blocking ads/analytics, modifying responses

NETWORK INTERCEPTION:

Block Unnecessary Resources

"""

await page.route('*/', (route) => {

const url = route.request().url();

const resourceType = route.request().resourceType();

// Block images, fonts, analytics for faster scraping

if (['image', 'font', 'media'].includes(resourceType)) {

return route.abort();

}

// Block tracking/analytics

if (url.includes('google-analytics') ||

url.includes('facebook.com/tr')) {

return route.abort();

}

return route.continue();

});

"""

Mock API Responses (Testing)

"""

await page.route('**/api/products', async (route) => {

await route.fulfill({

status: 200,

contentType: 'application/json',

body: JSON.stringify([

{ id: 1, name: 'Mock Product', price: 99.99 },

]),

});

});

// Now page will receive mocked data

await page.goto('/products');

"""

Capture API Responses

"""

const apiResponses: any[] = [];

page.on('response', async (response) => {

if (response.url().includes('/api/')) {

const data = await response.json().catch(() => null);

apiResponses.push({

url: response.url(),

status: response.status(),

data,

});

}

});

await page.goto('/dashboard');

// apiResponses now contains all API calls

"""

Sharp Edges

Using waitForTimeout Instead of Proper Waits

Severity: CRITICAL

Situation: Waiting for elements or page state

Symptoms:

Tests pass locally, fail in CI. Pass 9 times, fail on the 10th.

"Element not found" errors that seem random. Tests take 30+ seconds

when they should take 3.

Why this breaks:

waitForTimeout is a fixed delay. If the page loads in 500ms, you wait

2000ms anyway. If the page takes 2100ms (CI is slower), you fail.

There's no correct value - it's always either too short or too long.

Recommended fix:

REMOVE all waitForTimeout calls

WRONG:

await page.goto('/dashboard');

await page.waitForTimeout(2000); # Arbitrary!

await page.click('.submit');

CORRECT - Auto-wait handles it:

await page.goto('/dashboard');

await page.getByRole('button', { name: 'Submit' }).click();

If you need to wait for specific condition:

await expect(page.getByText('Dashboard')).toBeVisible();

await page.waitForURL('**/dashboard');

await page.waitForResponse(resp => resp.url().includes('/api/data'));

For animations, wait for element to be stable:

await page.getByRole('button').click(); # Auto-waits for stable

NEVER use setTimeout or waitForTimeout in production code

CSS Selectors Tied to Styling Classes

Severity: HIGH

Situation: Selecting elements for interaction

Symptoms:

Tests break after CSS refactoring. Selectors like .btn-primary stop

working. Frontend redesign breaks all tests without changing behavior.

Why this breaks:

CSS class names are implementation details for styling, not semantic

meaning. When designers change from .btn-primary to .button--primary,

your tests break even though behavior is identical.

Recommended fix:

Use user-facing locators instead:

WRONG - Tied to CSS:

await page.locator('.btn-primary.submit-form').click();

await page.locator('#sidebar > div.menu > ul > li:nth-child(3)').click();

CORRECT - User-facing:

await page.getByRole('button', { name: 'Submit' }).click();

await page.getByRole('menuitem', { name: 'Settings' }).click();

If you must use CSS, use data-testid:

Submit

await page.getByTestId('submit-order').click();

Locator priority:

1. getByRole - matches accessibility

2. getByText - matches visible content

3. getByLabel - matches form labels

4. getByTestId - explicit test contract

5. CSS/XPath - last resort only

navigator.webdriver Exposes Automation

Severity: HIGH

Situation: Scraping sites with bot detection

Symptoms:

Immediate 403 errors. CAPTCHA challenges. Empty pages. "Access Denied"

messages. Works for 1 request, then gets blocked.

Why this breaks:

By default, headless browsers set navigator.webdriver = true. This is

the first thing bot detection checks. It's a bright red flag that

says "I'm automated."

Recommended fix:

Use stealth plugins:

Puppeteer Stealth (best option):

import puppeteer from 'puppeteer-extra';

import StealthPlugin from 'puppeteer-extra-plugin-stealth';

puppeteer.use(StealthPlugin());

const browser = await puppeteer.launch({

headless: 'new',

args: ['--disable-blink-features=AutomationControlled'],

});

Playwright Stealth:

import { chromium } from 'playwright-extra';

import stealth from 'puppeteer-extra-plugin-stealth';

chromium.use(stealth());

Manual (partial):

await page.evaluateOnNewDocument(() => {

Object.defineProperty(navigator, 'webdriver', {

get: () => undefined,

});

});

Note: This is cat-and-mouse. Detection evolves.

For serious scraping, consider managed solutions like Browserbase.

Tests Share State and Affect Each Other

Severity: HIGH

Situation: Running multiple tests in sequence

Symptoms:

Tests pass individually but fail when run together. Order matters -

test B fails if test A runs first. Random failures that "fix themselves"

on rerun.

Why this breaks:

Shared browser context means shared cookies, localStorage, and session

state. Test A logs in, test B expects logged-out state. Test A adds

item to cart, test B's cart count is wrong.

Recommended fix:

Each test must be fully isolated:

Playwright Test (automatic isolation):

test('first test', async ({ page }) => {

// Fresh context, fresh page

});

test('second test', async ({ page }) => {

// Completely isolated from first test

});

Manual isolation:

const context = await browser.newContext(); // Fresh context

const page = await context.newPage();

// ... test code ...

await context.close(); // Clean up

Shared authentication (the right way):

// 1. Save auth state to file

await context.storageState({ path: './auth.json' });

// 2. Reuse in other tests

const context = await browser.newContext({

storageState: './auth.json'

});

Never modify global state in tests

Never rely on previous test's actions

No Trace Capture for CI Failures

Severity: MEDIUM

Situation: Debugging test failures in CI

Symptoms:

"Test failed in CI" with no useful information. Can't reproduce

locally. Screenshot shows page but not what went wrong. Guessing

at root cause.

Why this breaks:

CI runs headless on different hardware. Timing is different. Network

is different. Without traces, you can't see what actually happened -

the sequence of actions, network requests, console logs.

Recommended fix:

Enable traces for failures:

playwright.config.ts:

export default defineConfig({

use: {

trace: 'retain-on-failure', # Keep trace on failure

screenshot: 'only-on-failure', # Screenshot on failure

video: 'retain-on-failure', # Video on failure

},

outputDir: './test-results',

});

View trace locally:

npx playwright show-trace test-results/path/to/trace.zip

In CI, upload test-results as artifact:

GitHub Actions:

• uses: actions/upload-artifact@v3

if: failure()

with:

name: playwright-traces

path: test-results/

Trace shows:

- Timeline of actions

- Screenshots at each step

- Network requests and responses

- Console logs

- DOM snapshots

Tests Pass Headed but Fail Headless

Severity: MEDIUM

Situation: Running tests in headless mode for CI

Symptoms:

Works perfectly when you watch it. Fails mysteriously in CI.

"Element not visible" in headless but visible in headed mode.

Why this breaks:

Headless browsers have no display, which affects some CSS (visibility

calculations), viewport sizing, and font rendering. Some animations

behave differently. Popup windows may not work.

Recommended fix:

Set consistent viewport:

const browser = await chromium.launch({

headless: true,

});

const context = await browser.newContext({

viewport: { width: 1280, height: 720 },

});

Or in config:

export default defineConfig({

use: {

viewport: { width: 1280, height: 720 },

},

});

Debug headless failures:

1. Run with headed mode locally

npx playwright test --headed

2. Slow down to watch

npx playwright test --headed --slowmo 100

3. Use trace viewer for CI failures

npx playwright show-trace trace.zip

4. For stubborn issues, screenshot at failure point:

await page.screenshot({ path: 'debug.png', fullPage: true });

Getting Blocked by Rate Limiting

Severity: HIGH

Situation: Scraping multiple pages quickly

Symptoms:

Works for first 50 pages, then 429 errors. Suddenly all requests fail.

IP gets blocked. CAPTCHA starts appearing after successful requests.

Why this breaks:

Sites monitor request patterns. 100 requests per second from one IP

is obviously automated. Rate limits protect servers and catch scrapers.

Recommended fix:

Add delays between requests:

const randomDelay = () =>

new Promise(r => setTimeout(r, 1000 + Math.random() * 2000));

for (const url of urls) {

await randomDelay(); // 1-3 second delay

await page.goto(url);

// ... scrape ...

}

Use rotating proxies:

const proxies = ['http://proxy1:8080', 'http://proxy2:8080'];

let proxyIndex = 0;

const getNextProxy = () => proxies[proxyIndex++ % proxies.length];

const context = await browser.newContext({

proxy: { server: getNextProxy() },

});

Limit concurrent requests:

import pLimit from 'p-limit';

const limit = pLimit(3); // Max 3 concurrent

await Promise.all(

urls.map(url => limit(() => scrapePage(url)))

);

Rotate user agents:

const userAgents = [

'Mozilla/5.0 (Windows...',

'Mozilla/5.0 (Macintosh...',

];

await page.setExtraHTTPHeaders({

'User-Agent': userAgents[Math.floor(Math.random() * userAgents.length)]

});

New Windows/Popups Not Handled

Severity: MEDIUM

Situation: Clicking links that open new windows

Symptoms:

Click button, nothing happens. Test hangs. "Window not found" errors.

Actions succeed but verification fails because you're on wrong page.

Why this breaks:

target="_blank" links open new windows. Your page reference still

points to the original page. The new window exists but you're not

listening for it.

Recommended fix:

Wait for popup BEFORE triggering it:

New window/tab:

const pagePromise = context.waitForEvent('page');

await page.getByRole('link', { name: 'Open in new tab' }).click();

const newPage = await pagePromise;

await newPage.waitForLoadState();

// Now interact with new page

await expect(newPage.getByRole('heading')).toBeVisible();

// Close when done

await newPage.close();

Popup windows:

const popupPromise = page.waitForEvent('popup');

await page.getByRole('button', { name: 'Open popup' }).click();

const popup = await popupPromise;

await popup.waitForLoadState();

Multiple windows:

const pages = context.pages(); // Get all open pages

Can't Interact with Elements in iframes

Severity: MEDIUM

Situation: Page contains embedded iframes

Symptoms:

Element clearly visible but "not found". Selector works in DevTools

but not in Playwright. Parent page selectors work, iframe content

doesn't.

Why this breaks:

iframes are separate documents. page.locator only searches the main

frame. You need to explicitly get the iframe's frame to interact

with its contents.

Recommended fix:

Get frame by name or selector:

By frame name:

const frame = page.frame('payment-iframe');

await frame.getByRole('textbox', { name: 'Card number' }).fill('4242...');

By selector:

const frame = page.frameLocator('iframe#payment');

await frame.getByRole('textbox', { name: 'Card number' }).fill('4242...');

Nested iframes:

const outer = page.frameLocator('iframe#outer');

const inner = outer.frameLocator('iframe#inner');

await inner.getByRole('button').click();

Wait for iframe to load:

await page.waitForSelector('iframe#payment');

const frame = page.frameLocator('iframe#payment');

await frame.getByText('Secure Payment').waitFor();

Validation Checks

Using waitForTimeout

Severity: ERROR

waitForTimeout causes flaky tests and slow execution

Message: Using waitForTimeout - remove it. Playwright auto-waits for elements. Use waitForResponse, waitForURL, or assertions instead.

Using setTimeout in Test Code

Severity: WARNING

setTimeout is unreliable for timing in tests

Message: Using setTimeout instead of Playwright waits. Replace with await expect(...).toBeVisible() or page.waitFor*.

Custom Sleep Function

Severity: WARNING

Sleep functions indicate improper waiting strategy

Message: Custom sleep function detected. Use Playwright's built-in waiting mechanisms instead.

CSS Class Selector Used

Severity: WARNING

CSS class selectors are fragile

Message: Using CSS class selector. Prefer getByRole, getByText, getByLabel, or getByTestId for more stable selectors.

nth-child CSS Selector

Severity: WARNING

Position-based selectors are very fragile

Message: Using position-based selector. These break when DOM order changes. Use user-facing locators instead.

XPath Selector Used

Severity: INFO

XPath should be last resort

Message: Using XPath selector. Consider getByRole, getByText first. XPath should be last resort for complex DOM traversal.

Auto-Generated Selector

Severity: WARNING

Framework-generated selectors are extremely fragile

Message: Using auto-generated selector. These change on every build. Use data-testid instead.

Puppeteer Without Stealth Plugin

Severity: INFO

Scraping without stealth is easily detected

Message: Using Puppeteer without stealth plugin. Consider puppeteer-extra-plugin-stealth for anti-detection.

navigator.webdriver Not Hidden

Severity: INFO

navigator.webdriver exposes automation

Message: Launching browser without hiding automation flags. For scraping, add stealth measures.

Scraping Loop Without Error Handling

Severity: WARNING

One failure shouldn't crash entire scrape

Message: Scraping loop without try/catch. One page failure will crash the entire scrape. Add error handling.

Collaboration

Delegation Triggers

• user needs full desktop control beyond browser -> computer-use-agents (Desktop automation for non-browser apps)

• user needs API testing alongside browser tests -> backend (API integration and testing patterns)

• user needs testing strategy -> test-architect (Overall test architecture decisions)

• user needs visual regression testing -> ui-design (Visual comparison and design validation)

• user needs browser automation in workflows -> workflow-automation (Durable execution for browser tasks)

• user building browser tools for agents -> agent-tool-builder (Tool design patterns for LLM agents)

Related Skills

Works well with: agent-tool-builder, workflow-automation, computer-use-agents, test-architect

When to Use

• User mentions or implies: playwright

• User mentions or implies: puppeteer

• User mentions or implies: browser automation

• User mentions or implies: headless

• User mentions or implies: web scraping

• User mentions or implies: e2e test

• User mentions or implies: end-to-end

• User mentions or implies: selenium

• User mentions or implies: chromium

• User mentions or implies: browser test

• User mentions or implies: page.click

• User mentions or implies: locator

Limitations

• Use this skill only when the task clearly matches the scope described above.

• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.

• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.