Web Tables

A table with add, edit, delete, search and pagination – the closest thing to a real application screen.

First Name	Last Name	Email	Age	Department	Action

Practice tasks

Count the rows on page 1 and assert it matches the rows-per-page value.
Add a new record and assert it appears in the table.
Search for a name and assert that only matching rows are shown; search for zzz and assert No rows found appears.
Edit a record's department and assert the cell shows the new value.
Delete a record and assert the row count drops by one.
Click a column header to sort, then assert the first row changed.
Switch to 5 rows per page and assert pagination moves to 2 pages.

Sample automation code

List<WebElement> rows = driver.findElements(By.cssSelector("#records-body tr"));
Assert.assertEquals(rows.size(), 10);

driver.findElement(By.id("search-box")).sendKeys("Divya");
Assert.assertEquals(driver.findElements(By.cssSelector("#records-body tr")).size(), 1);

driver.findElement(By.id("add-record")).click();
driver.findElement(By.id("f-first")).sendKeys("Arun");
driver.findElement(By.id("f-last")).sendKeys("Kumar");
driver.findElement(By.id("f-email")).sendKeys("arun@example.com");
driver.findElement(By.id("f-age")).sendKeys("28");
driver.findElement(By.id("f-dept")).sendKeys("QA");
driver.findElement(By.id("save-record")).click();

await expect(page.locator('#records-body tr')).toHaveCount(10);

await page.getByTestId('search').fill('Divya');
await expect(page.locator('#records-body tr')).toHaveCount(1);

await page.getByTestId('add-record').click();
await page.getByTestId('f-first').fill('Arun');
await page.getByTestId('f-last').fill('Kumar');
await page.getByTestId('f-email').fill('arun@example.com');
await page.getByTestId('f-age').fill('28');
await page.getByTestId('f-dept').fill('QA');
await page.getByTestId('save-record').click();