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

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

// 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

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

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

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)

// 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)

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

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

3. Playwright-Specific

// 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

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

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

5. Use Page Object Model (POM)

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

// ❌ 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

// ❌ 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

// ❌ 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

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

2. Screenshot on Failure

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

3. Trace Recording

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

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

Performance Optimization

1. Block Unnecessary Resources

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

2. Reuse Browser Contexts

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

3. Parallel Execution

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