trouble finding iframe with cypress

Question

I am trying to have cypress find my iframe. I found a GitHub issue which discusses work arounds to the limitation of cypress regarding iframes, and this is the solution I went with.

Cypress.Commands.add('iframe', { prevSubject: 'element' }, $iframe => {
    return new Cypress.Promise(resolve => {
        $iframe.on('load', () => {
            resolve($iframe.contents().find('body'));
        });
    });
});

Here is where I actually use this command.

context("Basic simple test", () => {
    it("can visit our app", () => {
        cy.visit("http://localhost:3000");
        cy.get('#haha').iframe();
    })
})

And here is my iframe code.

<StyledFrame
   sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups allow-presentation"
   title="sandbox"
   id="hahah"
   srcDoc={this.state.isLoading ? loader : this.state.bundle}
 />

Cypress however, tells me that it cannot find an element with the id of haha .

Answer 1

This might just be because the id you are looking for is #haha and the id of the iframe is hahah (with an extra h ). Although there is no guarantee that you won't accidentally misspell an id I would suggest using more descriptive names so that it as least less likely.