Forms

Inputs

Beginner

Work email

Live preview: —

Awaiting submission…

Live widget · interact freely

Manual test goal

Type into a text field, validate format, and confirm the live preview updates as the user types.

Expected result

Submitting a valid email reveals the success state with the typed value echoed back.

Stable selectors

Email input[data-testid="input-email"]
Live preview[data-testid="input-preview"]
Submit[data-testid="input-submit"]
Result row[data-testid="input-result"]

Reference Playwright spec

inputs.spec.ts

import { test, expect } from '@playwright/test';

test('input field — type and submit', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/inputs');

  const email = page.getByTestId('input-email');
  await email.fill('hasan.qa@hakdogan.com');

  await expect(page.getByTestId('input-preview')).toHaveText(
    'hasan.qa@hakdogan.com',
  );
  await page.getByTestId('input-submit').click();
  await expect(page.getByTestId('input-result')).toContainText('Captured');
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idleinputs.spec.ts

https://lab.hakdogan.com/practice/inputs

# console output will stream here