diff --git a/examples/fundamentals__chrome-remote-debugging/cypress.config.js b/examples/fundamentals__chrome-remote-debugging/cypress.config.js index 177b0775f..2fdbcda09 100644 --- a/examples/fundamentals__chrome-remote-debugging/cypress.config.js +++ b/examples/fundamentals__chrome-remote-debugging/cypress.config.js @@ -73,22 +73,34 @@ module.exports = defineConfig({ await client.DOM.enable() await client.CSS.enable() - // as the Window consists of two IFrames, we must retrieve the right one + // The window contains multiple same-origin iframes (e.g. the reporter + // frame and the app frame), so find the one that actually holds the + // element rather than assuming a fixed position. const allRootNodes = await client.DOM.getFlattenedDocument() const isIframe = (node) => { return node.nodeName === 'IFRAME' && node.contentDocument } - const filtered = allRootNodes.nodes.filter(isIframe) + const frames = allRootNodes.nodes.filter(isIframe) - // The first IFrame is our App - const root = filtered[0].contentDocument + let nodeId - const { nodeId } = await client.DOM.querySelector({ - nodeId: root.nodeId, - selector, - }) + for (const frame of frames) { + const { nodeId: found } = await client.DOM.querySelector({ + nodeId: frame.contentDocument.nodeId, + selector, + }) + + if (found) { + nodeId = found + break + } + } + + if (!nodeId) { + throw new Error(`Could not find an iframe containing selector: ${selector}`) + } return client.CSS.forcePseudoState({ nodeId,