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.