How to handle iframe in cypress?

@raven_corwin 

To handle iframes in Cypress, you can use the .its() function to access the iframe element, then use the .then() function to interact with the content inside the iframe. Here is an example of how to handle iframes in Cypress:

1
2
3
4

cy.get('iframe').its('0.contentDocument.body').should('not.be.empty')
  .then(cy.wrap)
  .find('#yourElementInsideIframe')
  .click();

In this example, we first select the iframe element using cy.get('iframe'), then use the .its() function to access the content inside the iframe. We use .should('not.be.empty') to ensure that the iframe content is loaded before interacting with it.

Then, we chain a .then() function and use cy.wrap to wrap the iframe content in a Cypress command. Finally, we use .find() to locate an element inside the iframe and interact with it.

You can also use the .within() function to interact with elements inside the iframe, like this:

1
2
3
4
5
6
7
8
9

cy.get('iframe')
  .should('have.attr', 'src', 'yourIframeUrl')
  .then(($iframe) => {
    const $body = $iframe.contents().find('body');
    
    cy.wrap($body)
      .find('#yourElementInsideIframe')
      .click();
  });

In this example, we select the iframe element and check that it has the expected src attribute value. Then, we use .then() with a callback function to access the body element inside the iframe using .contents().find('body').

Finally, we use cy.wrap to wrap the body element and interact with an element inside the iframe using .find().