Element handling with Playwright

await page.getByTestId('full-name-input').fill('Ada Lovelace');
await page.getByTestId('submit-text-box').click();
await expect(page.getByTestId('output-name')).toHaveText('Name: Ada Lovelace');

await page.getByTestId('checkbox-select-all').check();
await expect(page.getByTestId('checkbox-documents')).toBeChecked();

await page.getByTestId('native-select').selectOption('Mumbai');
await expect(page.getByTestId('native-select-result')).toHaveText('Selected: Mumbai');

await page.getByTestId('autocomplete-input').fill('Ben');
await page.getByTestId('autocomplete-option-bengaluru').click();
await expect(page.getByTestId('autocomplete-result')).toHaveText('Picked: Bengaluru');

const row = page.getByTestId('table-row').filter({ hasText: 'Priya' });
await row.locator('[data-testid^="delete-row-"]').click();
await expect(page.getByTestId('table-row')).toHaveCount(2);

await page.getByTestId('double-click-me').dblclick();
await page.getByTestId('right-click-me').click({ button: 'right' });
await expect(page.getByTestId('right-click-result')).toBeVisible();

page.once('dialog', (d) => d.accept('Ada'));   // register BEFORE the click
await page.getByTestId('prompt-button').click();
await expect(page.getByTestId('prompt-result')).toHaveText('You entered Ada');

page.once('dialog', (d) => d.dismiss());
await page.getByTestId('confirm-button').click();
await expect(page.getByTestId('confirm-result')).toHaveText('You selected Cancel');

const frame = page.frameLocator('[data-testid="single-frame"]');
await frame.getByTestId('single-frame-button').click();
await expect(frame.getByTestId('single-frame-result')).toHaveText('Clicked inside iframe');

const inner = page.frameLocator('[data-testid="outer-frame"]')
  .frameLocator('[data-testid="innermost-frame"]');
await expect(inner.getByTestId('innermost-text')).toBeVisible();

const [tab] = await Promise.all([
  page.context().waitForEvent('page'),
  page.getByTestId('new-tab-button').click(),
]);
await expect(tab.getByTestId('new-tab-heading')).toBeVisible();

await page.getByTestId('draggable-box').dragTo(page.getByTestId('accept-zone'));
await expect(page.getByTestId('accept-zone')).toContainText('Accept (1)');

await page.getByTestId('file-input').setInputFiles('fixtures/sample.txt');
await expect(page.getByTestId('uploaded-file-info')).toContainText('sample.txt');

await page.getByTestId('tooltip-trigger').hover();
await expect(page.getByTestId('tooltip')).toBeVisible();

await page.getByTestId('loading-1-start').click();
// Auto-waits up to the expect timeout (5s by default).
await expect(page.getByTestId('loading-1-result')).toContainText('Hello World!');

// CSS locators pierce open shadow roots automatically.
await page.locator('shadow-counter #inc').click();
await expect(page.locator('shadow-counter #count')).toHaveText('Count: 1');

// Nested open roots: getByTestId pierces every level.
await page.getByTestId('nested-input').fill('Ada');
await page.getByTestId('nested-submit').click();
await expect(page.getByTestId('nested-result')).toHaveText('Hello, Ada!');

// Closed root: nothing can query inside — drive it with the keyboard.
await page.getByTestId('closed-host').click();          // delegatesFocus → the input
await page.keyboard.type('Ada');
await page.keyboard.press('Tab');                        // → Submit button
await page.keyboard.press('Enter');
await expect(page.getByTestId('closed-host')).toHaveAttribute('data-result', 'Hello, Ada!');

const frame = page.frameLocator('[data-testid=shadow-in-iframe]');
await frame.getByTestId('frame-nested-input').fill('Ada');
await frame.getByTestId('frame-nested-submit').click();
await expect(frame.getByTestId('frame-nested-result')).toHaveText('Hello, Ada!');

// Playwright handles cross-origin frames like any other.
const frame = page.frameLocator('[data-testid=cross-origin-frame]');
await frame.getByTestId('xorigin-input').fill('Ada');
await frame.getByTestId('xorigin-submit').click();
await expect(frame.getByTestId('xorigin-result')).toHaveText('Hello, Ada!');

// A plain click waits, then fails: "<div …> intercepts pointer events".
await page.getByTestId('remove-overlay').click();
await page.getByTestId('covered-button').click();
await expect(page.getByTestId('covered-result')).toBeVisible();
// Last resort only: click({ force: true }) skips actionability checks.

await page.getByRole('row', { name: /Farah Siddiqui/ }).getByRole('checkbox').check();
await expect(page.getByTestId('selected-users')).toContainText('EMP-1043');

await page.getByTestId('sort-amount').click();
await expect(page.getByTestId('sort-th-amount')).toHaveAttribute('aria-sort', 'ascending');
// "₹1,299.00" → 1299 — compare as numbers, never as strings
const nums = (await page.locator('[data-testid="sort-row"] [data-col="amount"]').allTextContents())
  .filter((t) => t !== '—').map((t) => Number(t.replace(/[^\d.]/g, '')));
expect(nums).toEqual([...nums].sort((a, b) => a - b));

// Accessible names are whitespace-normalised, so getByLabel just works.
await page.getByLabel('Delivery Address').fill('12 MG Road');
// …or the XPath way:
await page.locator("xpath=//label[normalize-space()='Delivery Address']/following::input[1]").fill('12 MG Road');

// ::before text isn't in the DOM — read the computed style.
const before = await page.getByTestId('pseudo-price').evaluate((el) => getComputedStyle(el, '::before').content);
expect(before).toContain('₹');

// HTML comments: evaluate an XPath that returns the comment's text.
const code = await page.evaluate(() => document.evaluate(
  "//span[@data-testid='comment-target']/following-sibling::comment()",
  document, null, XPathResult.STRING_TYPE, null).stringValue.trim());
expect(code).toBe('secret-code: QA-2026');

const row = page.locator('[data-order-id="ORD-1042"]');
while (!(await row.isVisible())) {
  await page.getByTestId('orders-next').click();        // throws if we run out of pages
}
await expect(row).toContainText('ORD-1042');

await page.getByTestId('key-input').press('Enter');
await expect(page.getByTestId('key-result')).toHaveText('You entered: Enter');