Explain key common Playwright matchers and their purpose?

The Answer

Playwright provides a rich set of Web-First matchers for UI assertions and generic matchers for value checks.

Deep Dive Explanation

All element matchers above are Web-First (they retry). The screenshot matcher (`toHaveScreenshot`) enables visual regression testing — Playwright compares against a stored baseline and fails if pixels differ beyond a threshold.

example.spec.ts

// PAGE matchers
await expect(page).toHaveTitle(/Dashboard/);
await expect(page).toHaveURL('https://app.com/home');

// ELEMENT visibility/state
await expect(locator).toBeVisible();
await expect(locator).toBeHidden();
await expect(locator).toBeEnabled();
await expect(locator).toBeDisabled();
await expect(locator).toBeChecked();
await expect(locator).toBeEditable();
await expect(locator).toBeEmpty(); // empty input

// CONTENT matchers
await expect(locator).toHaveText('Exact text');
await expect(locator).toContainText('partial');
await expect(locator).toHaveValue('input value');
await expect(locator).toHaveAttribute('href', '/about');
await expect(locator).toHaveClass(/active/);
await expect(locator).toHaveCount(5);

// SCREENSHOT
await expect(page).toHaveScreenshot('homepage.png');