Browser Automation Skill

Expert in browser automation using Playwright, Puppeteer, and Selenium. Specializes in UI testing, web scraping, form automation, and automated workflows.

Expertise Areas

1. Playwright Automation

•Browser Control: Launch, navigate, interact with pages
•Element Selection: CSS selectors, XPath, text-based, data-testid
•Actions: Click, fill, select, hover, drag-and-drop
•Waiting Strategies: waitForSelector, waitForNavigation, waitForTimeout
•Network Interception: Mock APIs, block resources, modify requests
•Screenshots & Videos: Full page, element-specific, video recording

2. Testing Frameworks

•End-to-End Testing: Playwright Test, Cypress-like workflows
•Visual Regression: Screenshot comparison, pixel diff analysis
•Accessibility Testing: ARIA validation, keyboard navigation
•Performance Testing: Page load times, Core Web Vitals
•Mobile Testing: Emulate devices, touch gestures

3. Web Scraping

•Data Extraction: Parse HTML, extract structured data
•Pagination: Navigate through multi-page results
•Dynamic Content: Handle lazy loading, infinite scroll
•Authentication: Login flows, session management
•Rate Limiting: Throttle requests, respect robots.txt

4. Form Automation

•Input Fields: Text, email, password, number inputs
•Selections: Dropdowns, radio buttons, checkboxes
•File Uploads: Single and multiple file uploads
•Date Pickers: Custom date widgets
•Multi-Step Forms: Wizard-style form flows

Code Examples

Basic Page Navigation

typescript

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await browser.close();

Form Automation with Validation

typescript

// Fill and submit form
await page.fill('input[name="email"]', 'test@example.com');
await page.fill('input[name="password"]', 'SecurePass123!');
await page.click('button[type="submit"]');

// Wait for success message
const success = await page.waitForSelector('.success-message', { timeout: 5000 });
const message = await success.textContent();
console.log('Success:', message);

Data Extraction from Multiple Pages

typescript

const products = [];
let page = 1;

while (page <= 10) {
  await browser.goto(`https://example.com/products?page=${page}`);

  const items = await browser.$$eval('.product-item', (elements) =>
    elements.map((el) => ({
      title: el.querySelector('.title')?.textContent,
      price: el.querySelector('.price')?.textContent,
      image: el.querySelector('img')?.src,
    }))
  );

  products.push(...items);
  page++;
}

Network Interception

typescript

await page.route('**/api/analytics', (route) => route.abort());
await page.route('**/api/user', (route) =>
  route.fulfill({
    status: 200,
    body: JSON.stringify({ id: 1, name: 'Test User' }),
  })
);

Visual Regression Testing

typescript

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

// Capture baseline
await page.screenshot({ path: 'baseline.png' });

// After changes, compare
const screenshot = await page.screenshot();
expect(screenshot).toMatchSnapshot('homepage.png');

Selector Strategies

1. CSS Selectors (Preferred)

typescript

// ID selector (most reliable)
await page.click('#submit-button');

// Data attribute (best practice)
await page.click('[data-testid="login-button"]');

// Class selector
await page.click('.btn-primary');

// Combined selector
await page.click('button.submit[type="submit"]');

2. XPath (When CSS isn't enough)

typescript

// Text-based selection
await page.click('//button[contains(text(), "Submit")]');

// Complex hierarchy
await page.click('//div[@class="form"]//input[@name="email"]');

3. Playwright-Specific

typescript

// Text-based
await page.getByText('Submit').click();

// Role-based (accessibility)
await page.getByRole('button', { name: 'Submit' }).click();

// Label-based
await page.getByLabel('Email address').fill('test@example.com');

// Placeholder-based
await page.getByPlaceholder('Enter your email').fill('test@example.com');

Best Practices

1. Use Stable Selectors

❌ Bad: .css-4j6h2k-button (auto-generated class) ✅ Good: [data-testid="submit-button"]

2. Add Explicit Waits

❌ Bad: await page.waitForTimeout(3000); ✅ Good: await page.waitForSelector('.results', { state: 'visible' });

3. Handle Errors Gracefully

typescript

try {
  await page.click('button', { timeout: 5000 });
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  console.error('Click failed:', error.message);
  throw error;
}

4. Clean Up Resources

typescript

try {
  // automation code
} finally {
  await browser.close();
}

5. Use Page Object Model (POM)

typescript

class LoginPage {
  constructor(private page: Page) {}

  async login(email: string, password: string) {
    await this.page.fill('[data-testid="email"]', email);
    await this.page.fill('[data-testid="password"]', password);
    await this.page.click('[data-testid="submit"]');
  }

  async isLoggedIn() {
    return this.page.locator('[data-testid="dashboard"]').isVisible();
  }
}

Common Pitfalls

1. Race Conditions

typescript

// ❌ Race condition
await page.click('button');
const text = await page.textContent('.result'); // May fail!

// ✅ Wait for element
await page.click('button');
await page.waitForSelector('.result');
const text = await page.textContent('.result');

2. Stale Element References

typescript

// ❌ Element may become stale
const element = await page.$('button');
await page.reload();
await element.click(); // Error: element detached from DOM

// ✅ Re-query after page changes
await page.reload();
await page.click('button');

3. Timing Issues with Dynamic Content

typescript

// ❌ Assumes immediate load
await page.goto('https://example.com');
await page.click('.dynamic-content'); // May fail!

// ✅ Wait for dynamic content
await page.goto('https://example.com');
await page.waitForLoadState('networkidle');
await page.click('.dynamic-content');

Debugging Tools

1. Headful Mode

typescript

const browser = await chromium.launch({ headless: false, slowMo: 100 });

2. Screenshot on Failure

typescript

test.afterEach(async ({ page }, testInfo) => {
  if (testInfo.status !== 'passed') {
    await page.screenshot({ path: `failure-${testInfo.title}.png` });
  }
});

3. Trace Recording

typescript

await context.tracing.start({ screenshots: true, snapshots: true });
await page.goto('https://example.com');
// ... automation steps
await context.tracing.stop({ path: 'trace.zip' });

4. Console Logs

typescript

page.on('console', (msg) => console.log('Browser log:', msg.text()));

Performance Optimization

1. Block Unnecessary Resources

typescript

await page.route('**/*.{png,jpg,jpeg,gif,svg,css}', (route) => route.abort());

2. Reuse Browser Contexts

typescript

const context = await browser.newContext();
const page1 = await context.newPage();
const page2 = await context.newPage();
// Share cookies, storage, etc.

3. Parallel Execution

typescript

await Promise.all([
  page1.goto('https://example.com/page1'),
  page2.goto('https://example.com/page2'),
  page3.goto('https://example.com/page3'),
]);

Activation Keywords

Ask me about:

•"How do I automate browser testing with Playwright?"
•"Web scraping with Playwright/Puppeteer"
•"Screenshot automation and visual regression"
•"Form filling automation"
•"Element selection strategies"
•"Handling dynamic content in web automation"
•"Best practices for UI testing"
•"Debugging Playwright tests"

Related Skills

•E2E Testing: e2e-playwright skill
•Frontend Development: frontend skill for understanding DOM structure
•API Testing: api-testing skill for mocking network requests

Tools & Frameworks

•Playwright: Modern browser automation (recommended)
•Puppeteer: Chrome/Chromium-specific automation
•Selenium: Legacy cross-browser automation
•Playwright Test: Full testing framework
•Cypress: Alternative E2E testing framework