How to Handle iFrames in Selenium and Playwright

// Switch into an iframe by data-testid
const frame = page.frameLocator('[data-testid="iframe-basic"]');

// Fill an input inside the frame
await frame.getByTestId('iframe-name-input').fill('Jane');

// Click a button inside the frame
await frame.getByTestId('iframe-submit-btn').click();

// Assert text inside the frame
await expect(frame.locator('#result')).toContainText('Hello, Jane');

// Locate by role inside the frame
await frame.getByRole('textbox', { name: 'Your name' }).fill('Jane');
await frame.getByRole('button', { name: 'Submit' }).click();

// Two-level nested iframes — chain frameLocator calls
const outerFrame = page.frameLocator('[data-testid="iframe-outer"]');
const innerFrame = outerFrame.frameLocator('iframe[title="Inner Frame"]');

// Interact with the innermost content
await innerFrame.getByTestId('iframe-inner-input').fill('secret');
await innerFrame.getByTestId('iframe-inner-submit').click();

// Assert inner result text
await expect(innerFrame.locator('#inner-result')).toContainText('Unlocked');

// Three levels: just add another .frameLocator() to the chain
// const deepFrame = page.frameLocator('…').frameLocator('…').frameLocator('…');

// Locate iframe by name attribute
const frameByName = page.frameLocator('iframe[name="frame-two"]');
// Button inside has no data-testid — use role + aria-label
await frameByName.getByRole('button', { name: 'Activate Frame Two' }).click();

// Locate iframe by title attribute
const frameByTitle = page.frameLocator('iframe[title="Frame Three"]');
// Button has no testid or aria-label — use visible text
await frameByTitle.getByRole('button', { name: 'Confirm Action' }).click();

// Locate using the page.frame() API (returns a Frame, not FrameLocator)
const frameRef = page.frame({ name: 'frame-two' });
if (frameRef) {
  await frameRef.getByRole('button', { name: 'Activate Frame Two' }).click();
}

// Locate by URL pattern
const frameByUrl = page.frame({ url: /iframe-multi-2/ });

// Switch into the dynamic iframe
const dynFrame = page.frameLocator('[data-testid="iframe-dynamic"]');

// Wait for the dynamically revealed button (no data-testid)
const revealBtn = dynFrame.getByRole('button', { name: 'Reveal Secret' });
await expect(revealBtn).toBeVisible({ timeout: 5000 });

// Fill input (located by aria-label — no testid)
await dynFrame.getByRole('textbox', { name: 'Reveal code input' }).fill('qaplayer');

// Click the reveal button
await revealBtn.click();

// Assert result (by text content, no testid)
await expect(dynFrame.locator('#dyn-result')).toContainText('Secret revealed');

// XPath alternative for the button
// await dynFrame.locator("//button[@aria-label='Reveal Secret']").click();