Cypress cant seem to find any elements inside the iframe

user_6356919 0
Viewed 111

I am trying to access elements within my iframe following the tips listed in this article here, but for some reason cypress cannot seem to find anything in the iframe.

Here is my test code

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');
    })
});

And this is my iframe

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

Finally this is what I have in my cypress.json

{
    "chromeWebSecurity": false
}

This is based on the above article. Not sure where I am going wrong.

cypress reactjs iframe javascript
1 Answers

You can use a plugin called cypress-iframe. After installation, go to cypress/support/commands.js and add the following:

import 'cypress-iframe';

In your test you can directly use :

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