Puppeteer vs Playwright: Comprehensive Comparison for Test Automation

npm install puppeteer
# Downloads Chrome for Testing automatically

npm install puppeteer-core
# No browser download, use system Chrome

npm install playwright
npx playwright install  # Downloads all browsers

npm install @playwright/test  # With test runner
npx playwright install chromium  # Single browser

const puppeteer = require('puppeteer');

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

    await page.goto('https://example.com');
    await page.type('#username', 'testuser');
    await page.type('#password', 'password123');
    await page.click('button[type="submit"]');

    await page.waitForSelector('.dashboard');
    const title = await page.title();
    console.log('Page title:', title);

    await browser.close();
})();

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

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

    await page.goto('https://example.com');
    await page.fill('#username', 'testuser');
    await page.fill('#password', 'password123');
    await page.click('button[type="submit"]');

    await page.waitForSelector('.dashboard');
    const title = await page.title();
    console.log('Page title:', title);

    await browser.close();
})();

// CSS selectors
await page.click('#submit-button');
await page.click('.form-control:nth-child(2)');

// XPath
await page.waitForXPath('//button[contains(text(), "Submit")]');
const [button] = await page.$x('//button[@type="submit"]');
await button.click();

// Custom text selector (via page.evaluate)
await page.evaluate(() => {
    const button = Array.from(document.querySelectorAll('button'))
        .find(b => b.textContent.includes('Submit'));
    button.click();
});

// CSS selectors
await page.click('#submit-button');

// Text selector
await page.click('text=Submit');
await page.click('button:has-text("Submit")');

// XPath
await page.click('xpath=//button[@type="submit"]');

// Advanced selectors
await page.click('button >> text=Submit');  // Chaining
await page.click('button:right-of(:text("Username"))');  // Layout-based
await page.click('button:below(#header)');
await page.click('button:near(.form-group)');

// Role-based (accessibility)
await page.click('role=button[name="Submit"]');

// Manual waiting often needed
await page.waitForSelector('#result');
await page.waitForFunction(() => document.querySelector('#result').textContent !== '');

// Network idle waiting
await page.goto('https://example.com', { waitUntil: 'networkidle2' });

// Custom waits
await page.waitForTimeout(1000);
await page.waitForFunction(
    () => window.appReady === true,
    { timeout: 5000 }
);

// Automatic waiting built-in
await page.click('#result');  // Waits for element automatically

// Auto-waits for:
// - Element to be visible
// - Element to be stable (not animating)
// - Element to be enabled
// - Element to receive events

// Still supports explicit waits
await page.waitForSelector('#result', { state: 'visible' });
await page.waitForLoadState('networkidle');
await page.waitForFunction(() => window.appReady === true);

const browser = await puppeteer.launch();

// Incognito contexts
const context1 = await browser.createIncognitoBrowserContext();
const context2 = await browser.createIncognitoBrowserContext();

const page1 = await context1.newPage();
const page2 = await context2.newPage();

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

// Isolated storage, cookies, sessions

const browser = await chromium.launch();

// Browser contexts (like incognito)
const context1 = await browser.newContext({
    viewport: { width: 1920, height: 1080 },
    userAgent: 'Custom User Agent',
    locale: 'en-US',
    timezoneId: 'America/New_York',
    permissions: ['geolocation']
});

const context2 = await browser.newContext({
    viewport: { width: 375, height: 667 },  // Mobile
    isMobile: true,
    hasTouch: true
});

// Parallel execution with different contexts
const [page1, page2] = await Promise.all([
    context1.newPage(),
    context2.newPage()
]);

const { chromium, firefox, webkit } = require('playwright');

async function testAllBrowsers() {
    for (const browserType of [chromium, firefox, webkit]) {
        const browser = await browserType.launch();
        const page = await browser.newPage();

        await page.goto('https://example.com');
        // Same API across all browsers
        await page.screenshot({ path: `screenshot-${browserType.name()}.png` });

        await browser.close();
    }
}

const { test, expect } = require('@playwright/test');

test.describe('Cross-browser login', () => {
    test('should login successfully', async ({ page, browserName }) => {
        await page.goto('https://example.com/login');
        await page.fill('#username', 'testuser');
        await page.fill('#password', 'password123');
        await page.click('button[type="submit"]');

        await expect(page.locator('.dashboard')).toBeVisible();

        // Browser-specific assertions
        if (browserName === 'webkit') {
            // Safari-specific checks
            await expect(page.locator('.webkit-notice')).toBeVisible();
        }
    });
});

await page.setRequestInterception(true);

page.on('request', (request) => {
    if (request.resourceType() === 'image') {
        request.abort();
    } else if (request.url().includes('/api/users')) {
        request.respond({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify([
                { id: 1, name: 'Test User' }
            ])
        });
    } else {
        request.continue();
    }
});

await page.goto('https://example.com');

// Route-based interception
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());

await page.route('**/api/users', route => {
    route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify([
            { id: 1, name: 'Test User' }
        ])
    });
});

// Or modify requests
await page.route('**/api/**', route => {
    const headers = route.request().headers();
    headers['Authorization'] = 'Bearer fake-token';
    route.continue({ headers });
});

await page.goto('https://example.com');

// Requires third-party library
const PuppeteerHar = require('puppeteer-har');

const har = new PuppeteerHar(page);
await har.start({ path: 'output.har' });
await page.goto('https://example.com');
await har.stop();

// Built-in HAR support
const context = await browser.newContext({
    recordHar: { path: 'output.har' }
});

const page = await context.newPage();
await page.goto('https://example.com');
await context.close();  // HAR automatically saved

// jest-puppeteer.config.js
module.exports = {
    launch: {
        headless: true,
        args: ['--no-sandbox']
    },
    browserContext: 'default'
};

// test.spec.js
describe('Login Test', () => {
    beforeAll(async () => {
        await page.goto('https://example.com');
    });

    it('should display login form', async () => {
        await expect(page).toMatch('Login');
        const title = await page.title();
        expect(title).toBe('Login - Example');
    });

    it('should login successfully', async () => {
        await page.type('#username', 'testuser');
        await page.type('#password', 'password123');
        await page.click('button[type="submit"]');
        await page.waitForSelector('.dashboard');

        const url = page.url();
        expect(url).toContain('/dashboard');
    });
});

// playwright.config.js
module.exports = {
    testDir: './tests',
    timeout: 30000,
    retries: 2,
    use: {
        headless: true,
        viewport: { width: 1920, height: 1080 },
        screenshot: 'only-on-failure',
        video: 'retain-on-failure',
        trace: 'on-first-retry'
    },
    projects: [
        { name: 'chromium', use: { browserName: 'chromium' } },
        { name: 'firefox', use: { browserName: 'firefox' } },
        { name: 'webkit', use: { browserName: 'webkit' } }
    ]
};

// test.spec.js
const { test, expect } = require('@playwright/test');

test.describe('Login Test', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('https://example.com');
    });

    test('should display login form', async ({ page }) => {
        await expect(page.locator('h1')).toHaveText('Login');
        await expect(page).toHaveTitle('Login - Example');
    });

    test('should login successfully', async ({ page }) => {
        await page.fill('#username', 'testuser');
        await page.fill('#password', 'password123');
        await page.click('button[type="submit"]');

        await expect(page).toHaveURL(/.*dashboard/);
        await expect(page.locator('.dashboard')).toBeVisible();
    });
});

// Slowmo
const browser = await puppeteer.launch({
    headless: false,
    slowMo: 100  // Slow down by 100ms
});

// Devtools
const browser = await puppeteer.launch({
    headless: false,
    devtools: true
});

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

// Console logs
page.on('console', msg => console.log('PAGE LOG:', msg.text()));

// Page errors
page.on('pageerror', error => console.log('PAGE ERROR:', error.message));

// Inspector (interactive debugging)
// Set environment variable
// PWDEBUG=1 npm test

// Or in code
await page.pause();  // Opens inspector

// Trace viewer (time-travel debugging)
const context = await browser.newContext({
    recordVideo: { dir: 'videos/' },
    recordTrace: { dir: 'traces/' }
});

// View trace: npx playwright show-trace trace.zip

// Codegen (record actions)
// npx playwright codegen https://example.com

// Headed mode with slomo
const browser = await chromium.launch({
    headless: false,
    slowMo: 1000
});

# Interactive debugging with:
# - Step through actions
# - Inspect selectors
# - View console logs
# - Edit and continue
PWDEBUG=1 npx playwright test

// Record trace
const context = await browser.newContext();
await context.tracing.start({ screenshots: true, snapshots: true });

// ... perform actions ...

await context.tracing.stop({ path: 'trace.zip' });

// View: npx playwright show-trace trace.zip
// Shows:
// - Action log with timing
// - DOM snapshots at each step
// - Network activity
// - Console logs
// - Screenshots

console.time('test');
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com/form');
await page.type('#name', 'John Doe');
await page.type('#email', 'john@example.com');
await page.click('button[type="submit"]');
await page.waitForSelector('.success-message');
await browser.close();
console.timeEnd('test');

console.time('test');
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com/form');
await page.fill('#name', 'John Doe');
await page.fill('#email', 'john@example.com');
await page.click('button[type="submit"]');
await page.waitForSelector('.success-message');
await browser.close();
console.timeEnd('test');

const iPhone = puppeteer.devices['iPhone 12'];
await page.emulate(iPhone);

// Or custom
await page.setViewport({ width: 375, height: 667, isMobile: true });
await page.setUserAgent('Mozilla/5.0 (iPhone...');

const { devices } = require('playwright');
const iPhone12 = devices['iPhone 12'];

const context = await browser.newContext({
    ...iPhone12,
    locale: 'en-US',
    geolocation: { latitude: 40.7128, longitude: -74.0060 },
    permissions: ['geolocation']
});

// Or Playwright's mobile browsers (Android)
const { android } = require('playwright');
const [device] = await android.devices();
await device.installApk('app.apk');
const context = await device.launchBrowser();

npm i puppeteer                               # package + Chrome for Testing + chrome-headless-shell
PUPPETEER_SKIP_DOWNLOAD=true npm i puppeteer  # package only, no browser download
npm i puppeteer-core                          # library only, never downloads a browser
npx puppeteer browsers install                # download the browsers manually

// puppeteer-core with the Chrome already installed on the machine
const puppeteer = require('puppeteer-core');
const browser = await puppeteer.launch({ channel: 'chrome' });

npm i -D playwright                       # library only, no browsers
npx playwright install                    # default browsers: Chromium, Firefox, WebKit
npx playwright install chromium           # a single browser
npx playwright install --only-shell       # Chromium headless shell only, no full Chromium
npx playwright install --no-shell         # skip the Chromium headless shell
npx playwright install --dry-run          # print what would be installed, download nothing
npx playwright install --list             # list browsers from all Playwright installations
npx playwright uninstall                  # remove browsers of the current installation

// Google Chrome already installed on the machine
const { chromium } = require('playwright');
const browser = await chromium.launch({ channel: 'chrome' });   // or 'msedge'

du -sh ~/.cache/puppeteer/*                 # Puppeteer browsers (default cache)
du -hs ~/Library/Caches/ms-playwright/*     # Playwright browsers, macOS
du -hs ~/.cache/ms-playwright/*             # Playwright browsers, Linux
du -sh node_modules                         # npm packages only (default browser caches live outside node_modules)
npx playwright install --dry-run            # what Playwright would download and where

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com', { waitUntil: 'networkidle2' });

    await page.screenshot({ path: 'page.png' });                       // visible viewport
    await page.screenshot({ path: 'full.png', fullPage: true });       // full scrollable page

    const heading = await page.waitForSelector('h1');
    await heading.screenshot({ path: 'h1.png' });                      // single element

    await browser.close();
})();

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

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');

    await page.screenshot({ path: 'page.png' });                       // visible viewport
    await page.screenshot({ path: 'full.png', fullPage: true });       // full scrollable page
    await page.locator('h1').screenshot({ path: 'h1.png' });           // single element

    const buffer = await page.screenshot();                            // no path: returns a Buffer

    await browser.close();
})();

# Syntax: npx playwright screenshot [options] <url> <filename>
npx playwright screenshot https://example.com example.png

# Entire scrollable page
npx playwright screenshot --full-page https://example.com full.png

# Another browser engine: cr/chromium, ff/firefox, wk/webkit
npx playwright screenshot -b webkit https://example.com webkit.png

# Device emulation and dark color scheme
npx playwright screenshot --device "iPhone 11" --color-scheme dark https://example.com mobile.png

# Wait for an element and a timeout (ms) before capturing
npx playwright screenshot --wait-for-selector "h1" --wait-for-timeout 1000 https://example.com ready.png

# All options
npx playwright screenshot --help

const puppeteer = require('puppeteer');

async function scrapeProducts() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto('https://example.com/products');

    const products = await page.evaluate(() => {
        return Array.from(document.querySelectorAll('.product')).map(el => ({
            name: el.querySelector('.name').textContent,
            price: el.querySelector('.price').textContent,
            image: el.querySelector('img').src
        }));
    });

    await browser.close();
    return products;
}

const { test, expect } = require('@playwright/test');

test.describe('Checkout Flow', () => {
    test('should complete purchase', async ({ page }) => {
        await page.goto('https://example.com/product/123');
        await page.click('text=Add to Cart');
        await page.click('text=Checkout');

        await page.fill('#card-number', '4242424242424242');
        await page.fill('#expiry', '12/25');
        await page.fill('#cvv', '123');

        await page.click('text=Complete Purchase');

        await expect(page.locator('.success-message')).toBeVisible();
        await expect(page.locator('.order-number')).toContainText(/ORD-\d+/);
    });
});

const puppeteer = require('puppeteer');

async function generateInvoice(data) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // Generate HTML from template
    const html = `
        <html>
            <body>
                <h1>Invoice #${data.invoiceNumber}</h1>
                <p>Customer: ${data.customerName}</p>
                <p>Amount: $${data.amount}</p>
            </body>
        </html>
    `;

    await page.setContent(html);
    await page.pdf({
        path: `invoice-${data.invoiceNumber}.pdf`,
        format: 'A4',
        printBackground: true,
        margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' }
    });

    await browser.close();
}

const { test, expect } = require('@playwright/test');

test.describe('Visual Regression', () => {
    test('homepage should match snapshot', async ({ page }) => {
        await page.goto('https://example.com');
        await expect(page).toHaveScreenshot('homepage.png', {
            maxDiffPixels: 100,
            threshold: 0.2
        });
    });

    test('should match across browsers', async ({ page, browserName }) => {
        await page.goto('https://example.com');
        await expect(page).toHaveScreenshot(`homepage-${browserName}.png`);
    });
});

npm uninstall puppeteer
npm install playwright @playwright/test
npx playwright install

// Before
const puppeteer = require('puppeteer');

// After
const { chromium } = require('playwright');
// or
const { test, expect } = require('@playwright/test');

// Before
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();

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

// Or simplified
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();

// Before
const element = await page.$('#submit');
await element.click();

// After (recommended)
await page.click('#submit');

// Or using locators
const element = page.locator('#submit');
await element.click();

// Before: Custom test setup
const puppeteer = require('puppeteer');

describe('My Tests', () => {
    let browser, page;

    beforeAll(async () => {
        browser = await puppeteer.launch();
        page = await browser.newPage();
    });

    afterAll(async () => {
        await browser.close();
    });

    test('test case', async () => {
        await page.goto('https://example.com');
        // assertions
    });
});

// After: Playwright Test Runner
const { test, expect } = require('@playwright/test');

test.describe('My Tests', () => {
    test('test case', async ({ page }) => {
        await page.goto('https://example.com');
        await expect(page.locator('h1')).toHaveText('Welcome');
    });
});