playwright-testing

Locator Strategies

BAD: CSS selectors couple tests to implementation. Breaks on refactors.

await page.locator('.btn-primary.submit-form').click();
await page.locator('#username-input').fill('alice');

GOOD: Semantic locators match user perception. Resilient to markup changes.

await page.getByRole('button', { name: 'Submit' }).click();
await page.getByLabel('Username').fill('alice');
await page.getByText('Welcome back').waitFor();
await page.getByPlaceholder('Search...').fill('query');
await page.getByTestId('checkout-total').textContent(); // Only when no semantic option

BAD: Fragile global selectors. Breaks with duplicate elements.

await page.getByRole('button', { name: 'Delete' }).click(); // Which delete button?

GOOD: Chain locators to scope within a parent container.

const row = page.getByRole('row', { name: 'Alice' });
await row.getByRole('button', { name: 'Delete' }).click();
await page.getByRole('listitem').filter({ hasText: 'Active' }).first().click();

Auto-Waiting and Assertions

BAD: Hardcoded delays cause flakiness and slow tests.

await page.waitForTimeout(2000);
await page.locator('.spinner').waitFor({ state: 'hidden' });
await page.locator('button').click();

GOOD: Use auto-waiting assertions. Retry until condition is met.

await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
await expect(page.getByText('Loading...')).not.toBeVisible();
await expect(page.getByLabel('Email')).toHaveValue('[email protected]');
await expect(page.getByRole('checkbox', { name: 'Terms' })).toBeChecked();
await expect(page.getByText('Report')).toBeVisible({ timeout: 30000 }); // Custom timeout

Network Mocking

BAD: Hitting real APIs in tests. Flaky, slow, pollutes production data.

await page.goto('/users');

GOOD: Mock API responses with route.fulfill(). Fast, deterministic.

await page.route('**/api/users', async (route) => {
  await route.fulfill({
    status: 200,
    body: JSON.stringify([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]),
  });
});
await page.goto('/users');
await expect(page.getByText('Alice')).toBeVisible();

// Conditional mocking
await page.route('**/api/**', async (route) => {
  route.request().url().includes('/logout') ? route.fulfill({ status: 200 }) : route.continue();
});

// Speed up tests by blocking resources
await page.route('**/*.{png,jpg,jpeg,webp}', (route) => route.abort());