Cypress cant seem to find any elements inside the iframe

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.

Answer

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