Locator practice · Web table

Web Table Employee Directory

A realistic employee table built for practising XPath sibling traversal, CSS :has(), checkbox selection, and extracting row data. The data is intentionally Indianised so the names feel familiar.

10Employee rows

7Visible columns

3Selector patterns

0External APIs

CloudOps India Employee Directory

Use this table to practise locating rows, checkboxes, and sibling columns.

Practice page

Username	Employee Name	User Role	City	Project	Status
Aarav.Sharma	ASAarav SharmaEMP-1001	QA Engineer	Pune	Cloud QA	Active
Priya.Nair	PNPriya NairEMP-1002	Product Owner	Bengaluru	Nimbus CRM	Active
Rohan.Mehta	RMRohan MehtaEMP-1003	SDET Lead	Gurugram	Cloud QA	Active
Ananya.Iyer	AIAnanya IyerEMP-1004	DevOps Engineer	Chennai	Monsoon Pay	Onboarding
Kabir.Khan	KKKabir KhanEMP-1005	Security Tester	Hyderabad	Udaan Risk	Active
Meera.Rao	MRMeera RaoEMP-1006	Automation Architect	Mumbai	Cloud Ledger	Active
Vikram.Singh	VSVikram SinghEMP-1007	API Tester	Noida	Bharat API	Inactive
Neha.Patel	NPNeha PatelEMP-1008	Release Manager	Ahmedabad	Cloud Retail	Active
Ishaan.Das	IDIshaan DasEMP-1009	Manual Tester	Kolkata	Cloud QA	Onboarding
Sana.Qureshi	SQSana QureshiEMP-1010	Data QA Analyst	Indore	Sky Analytics	Active

10 visible rows 0 selected

Selected usernames will appear here.

What students should practise

The page is the problem. Try these on your own first — the solution stays hidden until you reveal it.

Click the checkbox beside a username using XPath preceding-sibling.
Find a complete row using CSS tr:has(td:text(...)).
Read all the data after a username using following-sibling columns.
Filter rows by team, city, role, or status without relying on hardcoded row numbers.

Playwright solution Try the practice first — reveal the snippet only when you need a hint. Show solution

// select checkbox by username with XPath
await page.locator(
  "//td[text()='Aarav.Sharma']/preceding-sibling::td/input[@type='checkbox']"
).click();

// same idea using CSS :has()
await page
  .locator("tr:has(td:text('Rohan.Mehta'))")
  .locator("td")
  .first()
  .click();

// get all data after the username column
const userData = await page
  .locator("//td[text()='Priya.Nair']/following-sibling::td")
  .allInnerTexts();

console.log(userData);