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();
});