Angular Academy · Lesson

Selectors and Assertions

Target elements and assert on state.

Selectors and Assertions is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Good Selectors Make Stable Tests

How you find elements determines how robust your tests are. Selectors tied to CSS classes or DOM structure break on every redesign. Semantic, user-facing locators survive refactors because they reflect what users actually perceive.

getByRole: The Preferred Locator

getByRole finds elements by their accessibility role and accessible name. It is the most resilient locator and doubles as an accessibility check.

page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });

getByLabel and getByPlaceholder

For form fields, locate by their associated label or placeholder, exactly how a user identifies them.

page.getByLabel('Email address');
page.getByPlaceholder('Search products');

getByText and getByTestId

getByText matches visible text. When no semantic handle exists, fall back to getByTestId, which reads a data-testid attribute you add deliberately.

page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">

Avoid Brittle CSS Selectors

You can still use page.locator('.css-selector'), but treat it as a last resort. Class names and nesting change often; roles and labels rarely do.

// Fragile, avoid when possible:
page.locator('div.row > button.primary');

Web-First Assertions

Playwright's expect for locators is web-first: it automatically retries until the condition is met or times out. This is the key to non-flaky assertions.

await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();

Common Assertion Matchers

The matcher describes the expected state of an element or page.

await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);

Asserting Counts on Lists

To check repeated elements, locate them all and assert the count. The locator matches every element, and toHaveCount retries until stable.

const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');

Negative Assertions

Use .not to assert something is absent or hidden, for example after deleting an item.

await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();

Filtering and Chaining Locators

Refine a locator with filter or chain to scope inside a parent, which keeps assertions precise.

const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();

Why Web-First Beats Manual Polling

Web-first assertions retry the whole expression, not just re-read a stale snapshot. So await expect(loc).toHaveText('Done') waits for the text to appear, eliminating the race conditions that plague hand-written waits.

Quick Check

Pick the most resilient locator.

Recap

Prefer semantic locators: getByRole, getByLabel, getByText, with getByTestId as a fallback. Assert with web-first matchers (toBeVisible, toHaveText, toHaveCount, toHaveURL) that auto-retry, and use .not and filter to stay precise.

Frequently asked questions

Is the “Selectors and Assertions” lesson free?

Yes — the full text of “Selectors and Assertions” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Selectors and Assertions”?

Target elements and assert on state. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Selectors and Assertions” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy