Playwright Locators — getByRole, getByLabel & getByText

// Buttons — the name is the visible/accessible label
await page.getByRole('button', { name: 'Sign in' }).click();
await page.getByRole('button', { name: /save|submit/i }).click();

// Links — even if wrapped in weird markup
await page.getByRole('link', { name: 'Pricing' }).click();

// Headings & landmarks
await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
await page.getByRole('navigation').getByRole('link', { name: 'Docs' }).click();

// Checkboxes & radios
await page.getByRole('checkbox', { name: 'I agree' }).check();
await page.getByRole('radio', { name: 'Standard shipping' }).check();

// Rows & cells inside a table
const row = page.getByRole('row', { name: /^Alice/ });
await expect(row.getByRole('cell').nth(2)).toHaveText('Admin');

// Preferred: matches <label for="email">Email</label>
await page.getByLabel('Email').fill('a@b.co');

// Placeholder-only inputs
await page.getByPlaceholder('Search products…').fill('lens');

// Alt text for images
await page.getByAltText('Company logo').click();

// Title attribute (tooltips)
await page.getByTitle('Delete row').click();

// Exact or substring visible text
await expect(page.getByText('Payment successful')).toBeVisible();
await expect(page.getByText('Payment successful', { exact: true })).toBeVisible();

// Regex — dynamic text
await expect(page.getByText(/order #\d{6}/)).toBeVisible();

// Filter matching elements
const rows = page.getByRole('row');
await rows.filter({ hasText: 'Alice' }).getByRole('button', { name: 'Edit' }).click();
await rows.filter({ hasNotText: 'Archived' }).first().click();

// Scope every action to the "Orders" section — no full-page ambiguity
const orders = page.getByRole('region', { name: 'Orders' });
await orders.getByRole('button', { name: 'Refresh' }).click();
await expect(orders.getByRole('row')).toHaveCount(10);

// Reusable locator variable — DRY, readable
const cartBadge = page.getByTestId('cart-badge');
await addToCart(page);
await expect(cartBadge).toHaveText('1');

// nth / first / last
await page.getByRole('article').first().click();
await page.getByRole('article').nth(2).click();
await page.getByRole('article').last().click();

// ❌ throws — three buttons named "Delete" on the page
await page.getByRole('button', { name: 'Delete' }).click();

// ✅ scope to the row you actually mean
await page.getByRole('row', { name: 'Milk' })
  .getByRole('button', { name: 'Delete' })
  .click();

// ✅ or filter by proximity
await page.getByRole('button', { name: 'Delete' })
  .and(page.locator(':near(:text("Milk"))'))
  .click();