6. Browser locators and meaningful visible results

qatestingplaywrightindependent-practice

Saved on this device

Full lesson · 4 learning steps Open any exercise for focused practice

Step 1 of 4 · intro card

6. Browser locators and meaningful visible results

Concept and contract

Find controls by their accessible purpose and verify the selected subset.

A locator describes how to find an element when an action or assertion needs it. Prefer roles and accessible names for user-facing controls. They connect the test to the interface’s meaning and often expose missing labels that a positional CSS selector would conceal.

A role locator does not prove full accessibility. It provides one useful observation. Choose exact names or scope to a meaningful region when several controls share a name, rather than using the first matching element to hide ambiguity.

Mechanism and worked example

The worked test selects Ukraine, enters qa and checks one matching list item with the expected title.

The worked test selects Ukraine, enters qa and checks one matching list item with the expected title. It distinguishes the intended conjunction from country-only and query-only behavior. The fixture contains records that make those wrong alternatives visible.

Scope the assertion to the Matching roles list so the Saved roles list cannot accidentally satisfy it. Stable test ids can be appropriate for nonsemantic structures, but they should not replace useful names for ordinary buttons and inputs.

Complete worked example

typescript

import { test, expect } from "../support/test.js";
test("combined filters show only the shared match", async ({page}) => {
  await page.goto("/");
  await page.getByLabel("Country", {exact:true}).selectOption("UA");
  await page.getByLabel("Search roles").fill("qa");
  const rows = page.getByRole("list", {name:"Matching roles"}).getByRole("listitem");
  await expect(rows).toHaveCount(1);
  await expect(rows.first()).toContainText("QA Engineer");
});

Reasoning: The result assertions distinguish AND semantics and are scoped to the intended list.

Counterexamples and common mistakes

The weak selector chooses the first input and clicks the second button.

The weak selector chooses the first input and clicks the second button. A harmless layout change can redirect those actions. The resulting failure says little about the user-facing contract, and the test may pass while interacting with a different control.

Avoid using nth or first merely to silence strict locator errors. Ask why several elements match, then choose a more precise name or container. A selector should document the intended target rather than encode an incidental DOM position.

Counterexample: what this check misses

typescript

import { test, expect } from "../support/test.js";
test("weak positional selector", async ({page}) => {
  await page.goto("/");
  await page.locator("input").first().fill("qa");
  await page.locator("button").nth(1).click();
});

Reasoning: Positions can select unrelated controls after an ordinary layout change.

Independent practice: small task

Write a browser test selecting United States and searching designer.

Write a browser test selecting United States and searching designer. Expect only Product Designer. Begin by finding the Country select and Search roles input by label, then add the scoped list assertion.

Check both count and text. Optional extension: verify an empty query still respects the selected country. Keep the initial task to two controls and one result rather than constructing a page-object framework immediately.

Step 1: Select US by the Country label. Step 2: Search designer and check the scoped row count and title.

Practice starter: solve before reading the solution

typescript

import { test, expect } from "../support/test.js";
test("US designer result", async ({page}) => {
  await page.goto("/");
  // TODO: use labels, then inspect the matching list.
});

Reasoning: Find the two controls by label before asserting the result.

Hint 1: Do not rely on DOM position.
Hint 2: A count and exact membership answer different questions.

Solution, tests and trade-offs

The solution scopes count and text assertions to the matching list.

The solution scopes count and text assertions to the matching list. It uses web-first assertions so the expected result can appear after the debounced request. The test does not need to know CSS classes or the implementation’s filtering function name.

The controlled OR-filter mutation causes the combined-filter worked test to fail. That negative run demonstrates that the locator and assertion observe a meaningful behavior rather than simply finding any visible list.

Practice solution and acceptance checks

typescript

import { test, expect } from "../support/test.js";
test("US designer result", async ({page}) => {
  await page.goto("/");
  await page.getByLabel("Country", {exact:true}).selectOption("US");
  await page.getByLabel("Search roles").fill("designer");
  const rows = page.getByRole("list", {name:"Matching roles"}).getByRole("listitem");
  await expect(rows).toHaveCount(1);
  await expect(rows.first()).toContainText("Product Designer");
});

Reasoning: The test observes user-visible membership without depending on CSS structure.

Interview reasoning and next step

In interviews, explain one semantic locator and one justified test-id use.

In interviews, explain one semantic locator and one justified test-id use. Show how an ambiguous selector could act on the wrong region. Discuss accessibility names as part of the product contract, not merely a convenient automation trick.

Next, use auto-waiting and retrying assertions correctly instead of adding fixed delays around these interactions.

Optional stretch — after the core task works: Clear the query and verify the country remains selected.

Computer practice: download the companion lab at https://applydjinn.com/typorithm/qa-lab-20261105.zip. Read its README, install the pinned tools and run the accepted examples before attempting a starter. The mobile reader preserves your reading and self-check progress; the local lab runs browser tests separately.

Find controls by their accessible purpose and verify the selected subset.