Web table practice · Simple grid

Companies web table practice

A minimal three-column table — Company, Contact, Country. Perfect for practising row counting, cell text reads, and locator strategies before scaling up to bigger tables.

Companies directory

Static data

id=companies-table data-testid=companies-table row data-testid=row-google · row-meta · row-microsoft · … cell data-col=company / contact / country

Company	Contact	Country
Google	Maria Anders	Germany
Meta	Francisco Chang	Mexico
Microsoft	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Adobe	Yoshi Tannamuri	Canada
Amazon	Giovanni Rovelli	Italy

What students should practise

Count rows: page.locator('table tbody tr').count().
Read all Country cells and assert they include Italy.
Find the row whose Company is Adobe and read its Contact.
Pull the entire row text using allInnerTexts().

Playwright solution Reveal once you have written your own attempts. Show solution

// total row count
const rowCount = await page.locator('table tbody tr').count();
expect(rowCount).toBe(6);

// every country in column 3
const countries = await page
  .locator('table tbody tr td:nth-child(3)')
  .allInnerTexts();
expect(countries).toContain('Italy');

// row with Company = Adobe -> read Contact
const adobeContact = await page
  .locator("tr:has(td:text('Adobe')) td:nth-child(2)")
  .innerText();
expect(adobeContact).toBe('Yoshi Tannamuri');

// XPath equivalent — following-sibling::td
const contactByXPath = await page
  .locator("//td[text()='Adobe']/following-sibling::td[1]")
  .innerText();

Bonus · Paginated web table

Employees web table with pagination

24 employee rows split across 3 pages (8 per page). Practise the classic interview pattern — walk every page, collect every row — in two styles: known page count (for loop) and unknown page count (while next-button enabled).

Employees directory

24 rows · 3 pages

id=employees-table data-testid=employees-table · employees-tbody · page-summary · pager-nav · prev-page · next-page · page-{n} row data-testid=emp-row-{id} · cell data-col=id/name/role/email/country

#	Name	Role	Email	Country

What students should practise

Walk every page with a for loop (page count = 3 is known).
Walk every page with a while loop until next-page is disabled (page count unknown).
Collect every row's Email across all pages into one array.
Find the row whose Name is Priya Kapoor — first detect which page, then read the row.
Assert page-summary text after clicking page-2.

Playwright solution Two patterns: known page count + unknown. Show solution

// PATTERN 1 — Known page count (for loop)
const pageCount = 3;
const allEmails: string[] = [];

for (let p = 1; p <= pageCount; p++) {
  await page.getByTestId(`page-${p}`).click();
  const emails = await page
    .locator('#employees-tbody tr td[data-col="email"]')
    .allInnerTexts();
  allEmails.push(...emails);
}
expect(allEmails).toHaveLength(24);

// PATTERN 2 — Unknown page count (while next-page enabled)
const collected: string[] = [];
while (true) {
  const names = await page
    .locator('#employees-tbody tr td[data-col="name"]')
    .allInnerTexts();
  collected.push(...names);

  const next = page.getByTestId('next-page');
  if (await next.isDisabled()) break;
  await next.click();
}
expect(collected).toContain('Priya Kapoor');

// PATTERN 3 — Find a row by name (walk pages until found)
async function findRowByName(name: string) {
  while (true) {
    const row = page.locator(`#employees-tbody tr:has(td:text("${name}"))`);
    if (await row.count()) return row;
    const next = page.getByTestId('next-page');
    if (await next.isDisabled()) throw new Error(`Row not found: ${name}`);
    await next.click();
  }
}
const priya = await findRowByName('Priya Kapoor');
await expect(priya.locator('td[data-col="role"]'))
  .toHaveText('QA Engineer');

// PATTERN 4 — Assert page-summary after jumping to page 2
await page.getByTestId('page-2').click();
await expect(page.getByTestId('page-summary'))
  .toHaveText('Showing 9–16 of 24');