Modern QA2026Complete Flow Testing via Keyboard — tiles
Log inJoin
34 / 74 · 10 Visual & Accessibility Testing · Keyboard Navigation Testing← prev⊞ allnext →☰ Read as one page

7.2Complete Flow Testing via Keyboard

// tests/accessibility/keyboard-navigation.spec.ts
import { test, expect } from '@playwright/test';

test('entire checkout flow is completable via keyboard only', async ({ page }) => {
    await page.goto('/cart');

    // Tab to "Proceed to Checkout" button
    let attempts = 0;
    while (attempts < 20) {
        await page.keyboard.press('Tab');
        const focusedText = await page.evaluate(() =>
            document.activeElement?.textContent?.trim()
        );
        if (focusedText?.includes('Proceed to Checkout')) break;
        attempts++;
    }
    await page.keyboard.press('Enter');

    // Verify we reached the checkout page
    await expect(page).toHaveURL(/\/checkout/);

    // Fill shipping form via keyboard
    await page.keyboard.press('Tab'); // Focus first field
    await page.keyboard.type('John Doe');
    await page.keyboard.press('Tab');
    await page.keyboard.type('123 Main St');
    await page.keyboard.press('Tab');
    await page.keyboard.type('Springfield');
    await page.keyboard.press('Tab');

    // Select state from dropdown via keyboard
    await page.keyboard.press('Space'); // Open dropdown
    await page.keyboard.type('Il'); // Type to search
    await page.keyboard.press('Enter'); // Select Illinois

    await page.keyboard.press('Tab');
    await page.keyboard.type('62701'); // ZIP code

    // Tab to submit and press Enter
    attempts = 0;
    while (attempts < 10) {
        await page.keyboard.press('Tab');
        const focusedRole = await page.evaluate(() =>
            document.activeElement?.getAttribute('type')
        );
        if (focusedRole === 'submit') break;
        attempts++;
    }
    await page.keyboard.press('Enter');

    // Verify order confirmation
    await expect(page.locator('[data-testid="order-confirmation"]')).toBeVisible();
});