What is the extent that the cypress.io has support for iframe related scripting?

Question

I am trying out to use cypress.io tool for my web automation. My application has iframes and cypress.io on their website has mentioned that it has limited support for iframe pages. I wrote the following code:

cy.get('#installed_features_content').then($iframe => {
    const body = $iframe.contents().find('body');
    cy.wrap(body).as('installed_features_content_body');
});

and

cy.get('@installed_features_content_body').contains('Search for Updates');

The first line trying to get the contents of iframe and the second line is trying to use the contents to lookup an element that contains the text 'Search for Updates' which it is not finding though the element with that text is present under the body tag of the iframe. I am losing confidence in cypress.io.

Answer 1

First off, Cypress is not the only tool that fits all problems. If it doesn't work for you, perhaps it's time to try a different tool. You don't need to use Cypress just because it seems pupular.

Back to the question. I'd try two things:

1/ cross-domain

Browsers do not allow JS from one domain to access elements from another domain, so if your iframe is a different domain, it won't work. You can try setting:

{
    "chromeWebSecurity": false
}

which tells browser to allow this cross-domain access.

However, I don't know if this is your context, you don't mention it in your question.

2/ cypress-iframe plugin

Cypress has many plugins that simplify many different tasks. One of them is cypress-iframe that promises to add support for iframes in Cypress. I have't ever used this plugin, so unfortunately I can't be of more help here right now, but I guess it's worth exploring.

Answer 2

Posting this for reference more than as an answer to that question that's more than 1 month old, but here's how I do it here, in a context where I have an iframe nested in another iframe:

/**
 * Waits for the frame to be available and returns an alias to it.
 * @returns {string}
 */
enterFrame: function() {
    cy
        // finds the first iframe and waits until it is loaded
        .get("#frameinbody")
        .its('0.contentDocument.body').should('not.be.empty')
        .then(cy.wrap)

        // finds the second iframe and waits until it is loaded
        .find("#frameinframe")
        .its('0.contentDocument.body').should('not.be.empty')
        .then(cy.wrap).as('someAutogeneratedAlias');

    return 'someAutogeneratedAlias';
}

After fighting a bit with different things, this has been the most robust way I've found to make it work.