Web table practice · Wide grid

Tall buildings web table practice

A wider, six-column table — Structure, Country, City, Height, Built, Rank. Ideal for practising nth-child, multi-cell row reads, sorting assertions, and locating cells by sibling text.

Tallest buildings

Static data

id=buildings-table data-testid=buildings-table row data-testid=row-burj-khalifa · row-clock-tower · … cell data-col=structure / country / city / height / built / rank

Structure	Country	City	Height	Built	Rank
Burj Khalifa	UAE	Dubai	829m	2010	1
Clock Tower Hotel	Saudi Arabia	Mecca	601m	2012	2
Taipei 101	Taiwan	Taipei	509m	2004	3
Financial Center	China	Shanghai	492m	2008	4

What students should practise

Pull the row whose Structure is Taipei 101 and read its Built year.
Read every Height using nth-child(4) and assert ordering.
Find the rank of the building in Saudi Arabia via row-text matching.
Use both CSS (tr:has(td:text(...))) and XPath (following-sibling::td) for the same query.

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

// pull built year for Taipei 101
const built = await page
  .getByTestId('row-taipei-101')
  .locator('[data-col="built"]')
  .innerText();
expect(built).toBe('2004');

// every height value
const heights = await page
  .locator('#buildings-table tbody tr td:nth-child(4)')
  .allInnerTexts();
expect(heights).toEqual(['829m', '601m', '509m', '492m']);

// rank of the row whose Country is Saudi Arabia (XPath)
const rank = await page
  .locator("//td[text()='Saudi Arabia']/following-sibling::td[3]")
  .innerText();
expect(rank).toBe('2');

// CSS :has() equivalent
const rankByHas = await page
  .locator("tr:has(td:text('Saudi Arabia')) td:nth-child(6)")
  .innerText();