Advanced-DOMadvanced 14 min
Iframes & Cross-Frame Content — Practice in Playwright, Selenium & Cypress
Iframe automation practice — switch frames in Selenium, use frameLocator in Playwright, and cy.iframe in Cypress to automate secure payment-style embeds.
Live element
Locators cheat-sheet
| data-testid | Role | Accessible label | What it is |
|---|---|---|---|
| iframe-btn | button | Reveal secret | Lives inside an <iframe>. Click to reveal the hidden message. |
| iframe-secret | status | Iframe secret message | Initially hidden; appears inside the iframe after the button is clicked. |
Reference solutions
import { test, expect } from '@playwright/test';
test('reveals the secret inside the inner iframe', async ({ page }) => {
await page.goto('/practice/iframe');
// Outer widget iframe -> inner secret iframe (frame chaining)
const widget = page.frameLocator('iframe[title="Iframe live widget"]');
const inner = widget.frameLocator('iframe[title="Secret iframe"]');
await inner.getByTestId('iframe-btn').click();
await expect(inner.getByTestId('iframe-secret')).toBeVisible();
await expect(inner.getByTestId('iframe-secret')).toContainText('PILOT-42');
});