Hero Gazette Editor · iFrame Editor
A WYSIWYG editor inside a real cross-document iframe — the layout that breaks every locator that forgot to switch frames first.
Tomorrow's headline is typed inside an iframe. The editor-in-chief demands bold.
iFrame Editor is a medium Frames, Windows & DOM challenge on Fun UI Playground. A WYSIWYG editor inside a real cross-document iframe — the layout that breaks every locator that forgot to switch frames first. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “iframe-”, and the techniques it exercises are switch into iframes, contenteditable typing, toolbar buttons, switch back to parent.
At a glance
- Category
- Frames, Windows & DOM
- Difficulty
- medium
- Teaches
- switch into iframes · contenteditable typing · toolbar buttons · switch back to parent
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixediframe-
Selectors on this page
| Locator | What it is |
|---|---|
#iframe-editor | The editor iframe is #iframe-editor, loading /frames/editor.html |
#editor-bold #editor-italic | Inside the frame: contenteditable <body id="editor-body"> plus #editor-bold / #editor-italic toolbar buttons |
#iframe-preview | The parent page mirrors the frame's current HTML into #iframe-preview (via postMessage) — assert there without frame-switching, or inside the frame directly for the full exercise |
Frequently asked questions
How do I type into an editor inside an iframe?
Switch into #iframe-editor (which loads /frames/editor.html) first, then type into the contenteditable <body id="editor-body"> and use #editor-bold / #editor-italic. A locator evaluated on the parent document will never see inside the frame.
Can I assert the iframe's content without switching frames?
Yes — the parent mirrors the frame's current HTML into #iframe-preview over postMessage, which is the shortcut. Doing it inside the frame is the full exercise; the document is same-origin, so drivers can reach into it once switched.
More Frames, Windows & DOM
- Multiverse Portals · Multiple Windows
- Mission Control · Nested Frames
- Droid Memory Core · Shadow DOM
- The Waiting Room · Modal & Focus Trap
- The Vanishing Act · Visibility Semantics
- The Reshuffled Floor · Challenging DOM
- All Frames, Windows & DOM challenges
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.