Files
v10/apps/e2e/tests/keyboard.spec.ts
T
2026-04-15 15:28:38 -07:00

74 lines
2.7 KiB
TypeScript

import { expect, test } from '@playwright/test';
import { DATA_ATTRS, SELECTORS } from '../fixtures/selectors';
import { PlayerPage } from '../page-objects/player';
test.describe('Keyboard Navigation', () => {
let player: PlayerPage;
test.beforeEach(async ({ page }) => {
player = new PlayerPage(page);
await page.goto('/pages/html-video-mp4.html');
await player.waitForMediaReady();
});
test('Space key toggles play/pause on play button', async ({ page }) => {
await player.playButton.focus();
await expect(player.playButton).toHaveAttribute(DATA_ATTRS.paused, '');
await page.keyboard.press('Space');
await expect(player.playButton).not.toHaveAttribute(DATA_ATTRS.paused);
await page.keyboard.press('Space');
await expect(player.playButton).toHaveAttribute(DATA_ATTRS.paused, '');
});
test('Enter key toggles play/pause on play button', async ({ page }) => {
await player.playButton.focus();
await expect(player.playButton).toHaveAttribute(DATA_ATTRS.paused, '');
await page.keyboard.press('Enter');
await expect(player.playButton).not.toHaveAttribute(DATA_ATTRS.paused);
await page.keyboard.press('Enter');
await expect(player.playButton).toHaveAttribute(DATA_ATTRS.paused, '');
});
test('Tab navigates between controls', async ({ page }) => {
await player.playButton.focus();
await expect(player.playButton).toBeFocused();
await page.keyboard.press('Tab');
await expect(player.playButton).not.toBeFocused();
});
test('Arrow keys adjust time slider', async ({ page }) => {
// Seek somewhere first so arrow keys have room to adjust
await player.seekTo(50);
// The slider thumb (role="slider") receives keyboard focus, not the slider root
const sliderThumb = page.locator(SELECTORS.sliderThumb).first();
await sliderThumb.focus();
// Press ArrowRight — should trigger a seek (data-started is already set from seekTo)
const timeBefore = await player.currentTime.textContent();
await page.keyboard.press('ArrowRight');
await page.waitForTimeout(500);
// Time should have changed after arrow key
const timeAfter = await player.currentTime.textContent();
expect(timeAfter).not.toBe(timeBefore);
});
test('Space key toggles mute on mute button', async ({ page }) => {
await player.muteButton.focus();
// Media starts muted (see PlayerPage.waitForMediaReady)
await expect(player.muteButton).toHaveAttribute(DATA_ATTRS.muted, '');
await page.keyboard.press('Space');
await expect(player.muteButton).not.toHaveAttribute(DATA_ATTRS.muted);
await page.keyboard.press('Space');
await expect(player.muteButton).toHaveAttribute(DATA_ATTRS.muted, '');
});
});