Cypress似乎找不到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')