Cypress按官方教程操作仍无法定位iframe内元素该如何解决？

1. 元素查询方法使用错误 #

你当前代码里 getIframeBody().get('#root') 存在逻辑错误：Cypress 的 .get() 命令默认从全局顶层文档查找元素，即便你前面已经 wrap 了 iframe 的 body，.get() 还是会跳出 iframe 上下文到顶层文档查询，自然找不到元素。
正确写法是替换 .get() 为 .find()，find() 会在当前选中的上下文（也就是iframe body）内部查询元素。

2. 缺少iframe内容加载完成的判定 #

你当前只判断了 contentDocument 存在、body 不为空，但没有确认 iframe 内部的页面已经完成加载渲染，很可能查询时 #root 元素还没渲染出来，可以补充对iframe加载状态的判定。

修改后可运行的代码 #

describe('example to-do app', () => {
    const getIframeDocument = () => {
        return cy
            // 增加超时适配慢加载场景
            .get('iframe[data-cy="iframe"]', {timeout: 10000})
            .its('0.contentDocument').should('exist')
    }

    const getIframeBody = () => {
        return getIframeDocument()
            .its('body').should('not.be.undefined')
            // 补充判断body已经可见，确保内容已经开始渲染
            .should('be.visible')
            .then(cy.wrap)
    }

    it('finds the root', () => {
        cy.visit('http://localhost:3000/view')
        // 替换get为find，在iframe内部查询元素
        getIframeBody().find('#root').should('exist');
    })
});

额外配置检查 #

如果修改后还是无法查询到元素，可以补充以下配置到 cypress.json：

{
    "chromeWebSecurity": false,
    "experimentalSessionAndOrigin": true,
    "includeShadowDom": true
}

同时确认你 iframe 的 src 指向的地址在测试运行时可以正常访问，没有出现跨域报错或者资源加载失败的情况。

内容的提问来源于stack exchange，提问作者Chaim Friedman