How to handle iframe in cypress?

by raven_corwin , in category: Javascript , 10 months ago

How to handle iframe in cypress?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by lottie , 10 months ago

@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().

Related Threads:

How does cypress locate element in iframe?
How to get element inside iframe by cypress?
How to handle with iframe under <script> tag in selenium?
How to handle nested iframe using javascript?
How to assert a url in cypress?
How to update an iframe with javascript?