Inputsbeginner 8 min

Text Input Fields — Practice in Playwright, Selenium & Cypress

Practice text input automation in Playwright, Selenium, and Cypress. Type, clear, and assert on single-line and multi-line text fields with stable, user-facing locators.

Live element

Locators cheat-sheet

data-testid	Role	Accessible label	What it is
name-input	textbox	Your name	Single-line text field.
greet-btn	button	Greet me	Submits the name and renders a greeting.
greeting-result	status	Greeting result	Live region that displays the greeting after submit.

Reference solutions

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

test('greets the user by name', async ({ page }) => {
  await page.goto('/practice/text-input');
  const frame = page.frameLocator('iframe[title="Text input live widget"]');

  await frame.getByTestId('name-input').fill('Priya');
  await frame.getByTestId('greet-btn').click();

  await expect(frame.getByTestId('greeting-result')).toHaveText('Hello, Priya 👋');
});

Try it in the Practice Hub Open learning module