8.3High-Risk Areas in Detail

Form Controls

Native form controls are the most inconsistent area across browsers. The <input type="date"> element renders a completely different date picker in Chrome, Safari, and Firefox:

test('date picker works across browsers', async ({ page, browserName }) => {
    await page.goto('/booking');

    const dateInput = page.locator('input[type="date"]');

    // Different approaches needed per browser
    if (browserName === 'chromium') {
        // Chrome: can type directly in YYYY-MM-DD format
        await dateInput.fill('2026-03-15');
    } else if (browserName === 'webkit') {
        // Safari: may need to interact with native picker
        await dateInput.click();
        await dateInput.type('03/15/2026');
    } else if (browserName === 'firefox') {
        // Firefox: supports direct input
        await dateInput.fill('2026-03-15');
    }

    // Verify the value regardless of input method
    await expect(dateInput).toHaveValue('2026-03-15');
});

Best practice: Use a custom date picker component (like react-datepicker) for consistent cross-browser behavior. If you use native date inputs, test them on all Tier 1 browsers.

Web APIs

test('clipboard API works across browsers', async ({ page, browserName }) => {
    await page.goto('/share');

    // Grant clipboard permission
    if (browserName === 'chromium') {
        await page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
    }

    // Click copy button
    await page.click('[data-testid="copy-link-btn"]');

    // Verify clipboard content
    // Note: Safari requires user gesture for clipboard access
    const clipboardText = await page.evaluate(async () => {
        return navigator.clipboard.readText();
    });

    expect(clipboardText).toContain('example.com/share/');
});

Scrolling and Touch

test('infinite scroll loads more items', async ({ page, browserName }) => {
    await page.goto('/products');

    const initialCount = await page.locator('.product-card').count();

    // Scroll to bottom -- behavior differs between browsers
    await page.evaluate(() => {
        window.scrollTo({
            top: document.body.scrollHeight,
            behavior: 'smooth'
        });
    });

    // Wait for new items to load
    await page.waitForTimeout(1000);

    const newCount = await page.locator('.product-card').count();
    expect(newCount).toBeGreaterThan(initialCount);
});