9. Dialogs & Frames

Alerts, Confirms & Prompts

// Accept dialog
page.on('dialog', dialog => dialog.accept());
await page.getByText('Show Alert').click();

// Dismiss dialog
page.on('dialog', dialog => dialog.dismiss());

// Get dialog message
page.on('dialog', dialog => {
  console.log(dialog.message());
  dialog.accept('typed text');  // for prompt dialogs
});

Hidden vs Displayed Elements

// Check visibility
await expect(page.getByTestId('loading-spinner')).toBeHidden();
await expect(page.getByTestId('success-message')).toBeVisible();

// Force click even if hidden
await page.getByText('Hidden Button').click({ force: true });

Handling IFrames

// Get frame by name or URL
const frame = page.frame({ name: 'iframe-name' });
// OR
const frame = page.frameLocator('#my-iframe');

// Interact with elements inside the frame
await frame.getByLabel('Name').fill('John');
await frame.getByRole('button', { name: 'Submit' }).click();

// Nested frames
const innerFrame = frame.frameLocator('.nested-frame');

Frame Navigation

test('iframe navigation', async ({ page }) => {
  await page.goto('https://example.com/iframe-page');
  const frame = page.frameLocator('#content-frame');
  await frame.getByRole('link', { name: 'Next Page' }).click();
  await expect(frame.locator('h1')).toHaveText('Page 2');
});