Practice Form
The full form: text fields, radio buttons, a date picker, a multi-select, checkboxes, file upload and dependent dropdowns. Submit opens a modal with everything you entered.
Thanks for submitting the form
Practice tasks
- Fill every field and submit; assert the modal opens and each value is shown in the table.
- Submit with an empty first name and assert the error list contains First name is required.
- Enter a 9-digit mobile number and assert the mobile validation error appears.
- Select a state and assert the city dropdown becomes enabled with the right options.
- Select two subjects and assert both appear in the modal.
- Close the modal and assert it is no longer visible.
Sample automation code
driver.findElement(By.id("firstName")).sendKeys("Karthik");
driver.findElement(By.id("lastName")).sendKeys("Raj");
driver.findElement(By.id("userEmail")).sendKeys("karthik@example.com");
driver.findElement(By.id("gender-male")).click();
driver.findElement(By.id("userNumber")).sendKeys("9876543210");
new Select(driver.findElement(By.id("state"))).selectByVisibleText("Tamil Nadu");
new Select(driver.findElement(By.id("city"))).selectByVisibleText("Salem");
driver.findElement(By.id("submit-form")).click();
WebElement modal = driver.findElement(By.id("result-modal"));
Assert.assertTrue(modal.isDisplayed());
await page.getByTestId('first-name').fill('Karthik');
await page.getByTestId('last-name').fill('Raj');
await page.getByTestId('email').fill('karthik@example.com');
await page.getByTestId('gender-male').check();
await page.getByTestId('mobile').fill('9876543210');
await page.getByTestId('state').selectOption('Tamil Nadu');
await page.getByTestId('city').selectOption('Salem');
await page.getByTestId('submit-form').click();
await expect(page.getByTestId('result-modal')).toBeVisible();