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

Question

我正尝试按照本文 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
}

这是基于上述文章。不确定我哪里出错了。

Answer 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')

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

Cypress cant seem to find any elements inside the iframe

javascript

iframe

reactjs

cypress