赛普拉斯似乎无法在 iframe 中找到任何元素答案

【问题标题】：Cypress cant seem to find any elements inside the iframe赛普拉斯似乎无法在 iframe 中找到任何元素
【发布时间】：2021-08-12 17:10:48
【问题描述】：

我正在尝试按照本文here 中列出的提示访问我的 iframe 中的元素，但由于某种原因，cypress 似乎无法在 iframe 中找到任何内容。

这是我的测试代码

describe('example to-do app', () => {
    const getIframeDocument = () => {
        return cy
            .get('iframe[data-cy="iframe"]')
            .its('0.contentDocument').should('exist')
    }

    const getIframeBody = () => {
        return getIframeDocument()
            .its('body').should('not.be.undefined')
            .then(cy.wrap)
    }

    it('finds the root', () => {
        cy.visit('http://localhost:3000/view')
        getIframeBody().get('#root');
    })
});

这是我的 iframe

<iframe data-cy="iframe" title="iframe" style={{ height: '100%', width: '100%' }} src={url} />

最后这就是我的cypress.json 中的内容

{
    "chromeWebSecurity": false
}

这是基于上面的文章。不知道我哪里错了。

【问题讨论】：

标签： javascript reactjs iframe cypress

【解决方案1】：

您可以使用名为cypress-iframe 的插件。安装完成后去cypress/support/commands.js添加如下内容：

import 'cypress-iframe';

在你的测试中你可以直接使用：

cy.iframe('[data-cy="iframe"]').find('.some-button').should('be.visible').click()
cy.iframe('[data-cy="iframe"]').contains('Some element').should('not.be.visible')

【讨论】：