Locator practice · Login UI

Master multiple element filters on a real login UI

This dummy login page is built for practising allInnerTexts(), locator.all(), filter({ hasText }), and clicking a specific link from many similar links. Your target for the class exercise is the Forgotten Password link in the account panel.

13 a.list-group-item account links

16 footer a footer links

1 Exact Forgotten Password target

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

const rightPanelLinks = await page.locator('a.list-group-item').allInnerTexts();
console.log(rightPanelLinks.length);

for (const linkText of rightPanelLinks) {
  if (linkText === 'Forgotten Password') {
    await page.getByText(linkText).first().click();
    break;
  }
}

const footerLinks = await page.locator('footer a').all();
for (const link of footerLinks) {
  console.log(await link.innerText(), await link.getAttribute('href'));
}

Use case 1 — collect text

Capture all right-panel link texts and assert the count before clicking the target link.

page.locator('a.list-group-item').allInnerTexts()

Use case 2 — filter one link

Filter from many account links and click the one that has exact visible text.

filter({ hasText: 'Forgotten Password' })

Use case 3 — footer links

Collect every footer anchor, print its text and href, then validate important legal links.

page.locator('footer a').all()