Input Field Automation Practice

Master text input interactions in Selenium, Playwright & Cypress — typing, appending with Tab, reading values, clearing fields, and detecting disabled & readonly states.

Beginner8 min6 scenarios12 test cases

Interactive Scenarios

S01Type a Movie Name

No input yet

S02Append Text & Press Tab

Current value: Avengers

S03Read the Field Value

Value: —

S04Clear the Field

Field contains: Inception

S05Disabled Input FieldDISABLED

Input is disabled — typing is blocked

S06Readonly Input FieldREADONLY

Readonly — value can be read but not edited

Showing 12 test cases

ID	Scenario	Type	Priority
INP_001	Text can be typed into an input field Expected: The field holds the typed value after entry ✅ positivehigh	positive	high
INP_002	Submitting the typed value updates the result Expected: Result reflects exactly what was entered ✅ positivehigh	positive	high
INP_003	Placeholder is replaced when text is entered Expected: Placeholder hides once the field has a value ✅ positivemedium	positive	medium
INP_004	Text is appended to existing content Expected: New text is added after the pre-filled value, not replacing it ✅ positivehigh	positive	high
INP_005	Tab moves focus away from the field Expected: Field loses focus and the blur result is recorded ✅ positivemedium	positive	medium
INP_006	Current field value can be read Expected: Reading returns the value currently in the field ✅ positivehigh	positive	high
INP_007	A populated field can be cleared Expected: Field becomes empty after clearing ✅ positivehigh	positive	high
INP_008	Disabled input rejects keyboard input Expected: Field is disabled and cannot receive text ❌ negativehigh	negative	high
INP_009	Readonly input cannot be edited Expected: Field has a value that the user cannot modify ❌ negativehigh	negative	high
INP_010	Readonly value is still readable Expected: Value can be read even though it is not editable ✅ positivemedium	positive	medium
INP_011	Field handles a long string without truncation Expected: Entire long value is retained in the field ⚠️ edgelow	edge	low
INP_012	Field state resets after a page refresh Expected: Reloading restores inputs to their initial values ⚠️ edgelow	edge	low

Overview

Text inputs are the most common element you will automate. This page covers the core actions across Playwright, Selenium, and Cypress: typing, appending, reading values, clearing, and detecting disabled & readonly states.

1 · Typing Text

Typing is the baseline interaction. Selenium's sendKeys() appends to existing content, while Playwright's fill() replaces the whole value first.

TypeScript

// Playwright
await page.locator('#movieNameInput').fill('Interstellar');
await expect(page.locator('#movieNameInput')).toHaveValue('Interstellar');

2 · Append & Tab

To add to existing text instead of replacing it, avoid fill(). Click into the field and type with the keyboard so the current value is preserved, then press Tab to trigger blur events.

TypeScript

// Playwright — fill() would clear first, so type instead
await page.locator('#appendInput').click();
await page.keyboard.type(' Endgame');
await page.keyboard.press('Tab');

3 · Read Value

Reading the current value lets you assert what the user (or your script) actually entered. Use the value attribute or the framework's input-value helper.

TypeScript

// Playwright
const value = await page.locator('#readValueInput').inputValue();
expect(value).not.toBe('');

4 · Clear Field

Clearing removes the existing content so a fresh value can be entered. Always assert the field is empty afterwards.

TypeScript

// Playwright
await page.locator('#clearInput').fill('');
await expect(page.locator('#clearInput')).toHaveValue('');

5 · Disabled State

Disabled inputs cannot receive focus or text. Assert the disabled state directly rather than trying to type, which keeps tests stable.

TypeScript

// Playwright
await expect(page.locator('#disabledInput')).toBeDisabled();

6 · Readonly State

Readonly inputs display a value that the user cannot change. The value is still readable, but typing has no effect — assert the readonly attribute.

TypeScript

// Playwright
await expect(page.locator('#readonlyInput'))
  .toHaveAttribute('readonly', '');

Method Summary

Quick reference across all three frameworks.

Action	Selenium	Playwright JS	Playwright PY	Cypress
Type text	`element.sendKeys("text")`	`locator.fill("text")`	`locator.fill("text")`	`.type('text')`
Append text	`element.sendKeys("text")`	`keyboard.type('text')`	`keyboard.type('text')`	`.type('text')`
Read value	`getAttribute("value")`	`locator.inputValue()`	`locator.input_value()`	`.invoke('val')`
Clear field	`element.clear()`	`locator.fill("")`	`locator.fill("")`	`.clear()`
Disabled assert	`!element.isEnabled()`	`expect(locator).toBeDisabled()`	`expect(locator).to_be_disabled()`	`.should('be.disabled')`
Readonly assert	`getAttribute("readonly")`	`toHaveAttribute('readonly', '')`	`to_have_attribute('readonly', '')`	`.should('have.attr', 'readonly')`

FAQ