Widget practice · Keyboard

Register by keyboard only

Focus the first input, type, then drive the rest with page.keyboard.press('Tab') + page.keyboard.type(...). Practise locator.pressSequentially() with per-character delay, Space to toggle a checkbox, Enter to submit.

Create account

Tab order: First name → Last name → Email → Phone → Password → Confirm → Newsletter (Yes / No) → Privacy → Submit.

First name

Last name

Phone

Password

Confirm password

Newsletter

Yes, subscribe No thanks

I agree to the privacy policy and terms.

id=input-firstname · input-lastname · input-email · input-telephone · input-password · input-confirm · input-agree · register-submit data-testid=firstname · lastname · email · telephone · password · confirm · newsletter-yes · newsletter-no · agree · register-submit tab order=firstname → lastname → email → telephone → password → confirm → newsletter-yes → newsletter-no → agree → submit

No submit yet.

What students should practise

Focus #input-firstname, then pressSequentially('Testing', { delay: 200 }).
Tab through the form using page.keyboard.press('Tab') + type(...).
Use Space to toggle the privacy checkbox; assert it became checked.
Use Enter to submit; assert the JSON output contains every value.
Build a unique email helper: `tta-${'$'}{Date.now()}@mail.com`.

Playwright solutionTab-driven sign-up via keyboard only. Show solution

import { Browser, chromium, Page } from '@playwright/test';

(async () => {
  const browser: Browser = await chromium.launch({ headless: false, channel: 'chrome' });
  const page: Page = await browser.newPage();
  await page.goto('/playwright/widgets/keyboard-form.html');

  await page.locator('#input-firstname').focus();
  await page.locator('#input-firstname').pressSequentially('Testing', { delay: 200 });

  await page.keyboard.press('Tab');
  await page.keyboard.type('TTA', { delay: 200 });

  await page.keyboard.press('Tab');
  await page.keyboard.type(getRandomEmail(), { delay: 200 });

  await page.keyboard.press('Tab');
  await page.keyboard.type('9090909090', { delay: 200 });

  await page.keyboard.press('Tab');
  await page.keyboard.type('TTA@123', { delay: 200 });

  await page.keyboard.press('Tab');
  await page.keyboard.type('TTA@123', { delay: 200 });

  // Tab past two newsletter radios, then toggle the privacy checkbox
  await page.keyboard.press('Tab');
  await page.keyboard.press('Tab');
  await page.keyboard.press('Tab');
  await page.keyboard.press('Space');

  await page.keyboard.press('Tab');
  await page.keyboard.press('Enter');
})();

function getRandomEmail(): string {
  return `tta-` + Date.now().toString() + `@mail.com`;
}