Form Automation Practice

Practice end-to-end form automation — filling inputs, selecting dropdowns, toggling checkboxes, triggering validation errors, and asserting success states.

Intermediate20 min5 scenarios15 test cases

Interactive Forms

F01Login FormBeginner

F02Personal Details FormBeginner

F03Address FormHard

F05Account Setup FormChallenge

Showing 15 test cases

ID	Scenario	Type	Priority
FRM_001	Fill all required fields with valid data and submit successfully Expected: Success message appears showing the submitted first name ✅ positivehigh	positive	high
FRM_002	Required field errors appear on empty submit Expected: Validation error messages display under each required field ❌ negativehigh	negative	high
FRM_003	Invalid email format shows validation error Expected: Error message tells the user the email format is invalid ❌ negativehigh	negative	high
FRM_004	Invalid phone number format shows error Expected: Error message tells the user the phone must be 10 digits ❌ negativehigh	negative	high
FRM_005	Password shorter than 6 characters shows validation error Expected: Password minimum length error message appears ❌ negativehigh	negative	high
FRM_006	Mismatched passwords show confirm password error Expected: Error message saying passwords do not match appears under confirm password ❌ negativehigh	negative	high
FRM_007	Unchecked Terms checkbox shows required error Expected: An error message prompts the user to accept the terms ❌ negativemedium	negative	medium
FRM_008	Success message displays the submitted first name Expected: The submitted-name element contains the first name that was entered ✅ positivehigh	positive	high
FRM_009	Reset button clears all fields Expected: All inputs return to their empty/default state after reset ✅ positivehigh	positive	high
FRM_010	Gender radio button selection Expected: Only the selected radio reflects a checked state; others are unchecked ✅ positivemedium	positive	medium
FRM_011	Country dropdown selection Expected: The selected country value is reflected in the select element ✅ positivemedium	positive	medium
FRM_012	Multiple interest checkboxes can be selected independently Expected: Each selected checkbox is independently checked and others are unaffected ✅ positivemedium	positive	medium
FRM_013	Form fields retain values after a validation failure Expected: Filled fields keep their values when submit fails due to another field being invalid ⚠️ edgemedium	edge	medium
FRM_014	Fill Again button returns to empty form from success state Expected: Clicking Fill Again hides the success message and shows a fresh empty form ✅ positivemedium	positive	medium
FRM_015	Form page loads without JavaScript errors Expected: No console errors on page load; all form fields are present and interactive ✅ positivelow	positive	low

Overview

Forms combine every element type — text inputs, dropdowns, radio buttons, checkboxes, and passwords. Automating them well means filling all field types correctly, triggering and asserting validation error messages, submitting and verifying the success state, and resetting the form.

1 · Fill Text Inputs

Text inputs are the baseline. Use fill() in Playwright (replaces the full value) or sendKeys() in Selenium (appends). Target fields by their id or data-testid.

TypeScript

// Playwright
await page.fill("#firstName", "John");
await page.fill("#lastName", "Doe");
await page.fill("#email", "[email protected]");
await page.fill("#phone", "9876543210");
await page.fill("#city", "Mumbai");

2 · Fill Date of Birth

Date inputs accept ISO strings (YYYY-MM-DD). Always use fill() or sendKeys() directly with the formatted string — avoid clicking calendar pickers where possible.

TypeScript

// Playwright
await page.fill("#dob", "1995-06-15");

3 · Select Radio Button (Gender)

Radio buttons belong to a named group. Check the specific option by its id or data-testid, then assert it is checked. Assert siblings are unchecked to confirm exclusive selection.

TypeScript

// Playwright
await page.getByTestId("radio-gender-male").check();
await expect(page.getByTestId("radio-gender-male")).toBeChecked();

4 · Select Country from Dropdown

The country field uses a native HTML <select>. Use selectOption() in Playwright or Select.selectByVisibleText() in Selenium. The data-testid on the select element makes it easy to target.

TypeScript

// Playwright — native select
await page.getByTestId("select-country").selectOption({ label: "India" });
// or by value
await page.getByTestId("select-country").selectOption("IN");

5 · Check Interest Checkboxes

Each interest checkbox is independently checkable. Each one has a unique data-testid following the pattern checkbox-interest-{name}. Check multiple in sequence and assert each one.

TypeScript

// Playwright
await page.getByTestId("checkbox-interest-selenium").check();
await page.getByTestId("checkbox-interest-playwright").check();
await expect(page.getByTestId("checkbox-interest-selenium")).toBeChecked();

6 · Fill Password & Confirm Password

Password and confirm password fields share the same fill/sendKeys approach. The mismatch validation runs on submit — fill both fields with different values to trigger the error.

TypeScript

// Playwright
await page.fill("#password", "secret123");
await page.fill("#confirmPassword", "secret123");

7 · Accept Terms & Submit

The terms checkbox must be checked before submit. Without it, a validation error appears. Use check() / click() to toggle it and assert isChecked() or toBeChecked().

TypeScript

// Playwright
await page.getByTestId("checkbox-terms").check();
await page.getByTestId("submit-form-btn").click();

8 · Assert Validation Errors

Validation errors appear under each field after a failed submit. They carry predictable ids and data-testids so you can assert text content and visibility.

TypeScript

// Playwright — assert validation errors
await page.getByTestId("submit-form-btn").click();
await expect(page.getByTestId("error-first-name")).toBeVisible();
await expect(page.getByTestId("error-email")).toHaveText("Email is required.");
await expect(page.getByTestId("error-gender")).toBeVisible();
// password mismatch
await page.fill("#password", "secret123");
await page.fill("#confirmPassword", "wrong456");
await page.getByTestId("submit-form-btn").click();
await expect(page.getByTestId("error-confirm-password"))
  .toHaveText("Passwords do not match.");
// success state
await page.getByTestId("submit-form-btn").click();
await expect(page.getByTestId("form-success-msg")).toBeVisible();
await expect(page.getByTestId("submitted-name")).toContainText("John");

Method Summary

Quick reference across all three frameworks.

Action	Selenium	Playwright JS	Playwright PY	Cypress
Fill text input	`sendKeys("text")`	`fill("text")`	`fill("text")`	`.type("text")`
Select dropdown	`selectByVisibleText()`	`selectOption({ label: ... })`	`select_option(label=...)`	`.select('value')`
Radio button	`click()`	`check()`	`check()`	`.check()`
Checkbox	`click()`	`check() / uncheck()`	`check() / uncheck()`	`.check() / .uncheck()`
Submit form	`click() on submit`	`click() on submit`	`click() on submit`	`.click() / .submit()`
Assert error	`getText() on error el`	`toHaveText(...)`	`to_have_text(...)`	`should('have.text', ...)`
Assert visible	`isDisplayed()`	`toBeVisible()`	`to_be_visible()`	`should('be.visible')`

FAQ