Cypress how to deal with one iframe into another iframe

user_19744563 0
Viewed 50

The main goal is to get access to the input field and submit some data. Problem - These elements are located in one iframe (we can't add there any attributes like id, etc) which is wrapped into another iframe (I was able to get access to it by id). The top iframe is accessible using cy.frameLoaded('#3ds-iframe'); The lower iframe isn't accessible using cy.frameLoaded('#cko-3ds2-iframe'); or cy.frameLoaded('[name="cko-3ds2-iframe"]') DOM elements screenshot

Thanks in advance

cypress-iframe cypress iframe javascript
1 Answers

Here's one way I found works with nested iframes, at least with very simple HTML.

  • Using .enter() which is part of the cypress-iframe package, move inside the first iframe.

  • Using getBody() helper from same package, location the 2nd iframe.

  • Use conventional Cypress commands (from Working with iframes in Cypress) to extract the body of the the nested iframe.

  • Use Cypress command .within() to focus the next commands inside that 2nd iframe.

cy.enter('#iframe1').then(getBody => {
  getBody().find('#iframe2')
    .its('0.contentDocument')
    .its('body').within(() => {
      // working inside nested iframe
      cy.get('div').should('contain', 'Inside iframe2')
    })
})

This may need extra steps if the 2nd iframe takes longer to load than the outer iframe. The cypress-iframe command only checks the content of the outer frame, but hopefully the inner frame is also ready in that time period.

This is the HTML I tested

<iframe id="iframe1" width="300" height="200" src="./iframe2.html">
  #document
  <html>
    <head></head>
    <body>
      <iframe id="iframe2" width="300" height="200" src="./iframe-content.html">
        #document
        <html>
          <head></head>
          <body>
            <div>Inside iframe2</div>
          </body>
        </html>
      </iframe>
    </body>
  </html>
</iframe>
user_169977070
Related