0

I want to capture inner Iframe and click element inside the inner iframe by using xpath. I tried so many ways to handle nested iframes in cypress. But I didn't find a proper way. Can anyone please tell me how to handle nested iframes and click element inside the inner iframe.

cy.iframe('iframe[id="app-iframe"]').then(($iframe) => {
            // Select the inner iframe inside the outer iframe
            const $innerIframe = $iframe.contents().find('iframe[class="k-content"]');
            // Select the element inside the inner iframe where you want to type
            cy.wrap($innerIframe)
            .cy.xpath('//body[@contenteditable="true"]', {timeout: 10000})
            .click().type('Hello World');
          });

I used the above code but it didn't work.

user16695029
  • 3,365
  • 5
  • 21
Iresh
  • 1
  • 2

1 Answers1

1

You should be able to do so with the cypress-iframe package.

This provides cy.enter() command to move inside the outer <iframe>, the use Cypress find() to get the inner frame.

Presuming your selectors are correct, this should work:

cy.enter('#app-iframe').then(getBody => {
  getBody().find('iframe.k-content')
    .its('0.contentDocument')
    .its('body').within(() => {
      cy.get('[@contenteditable="true"]')
        .click()
        .type('Hello World')
    })
user16695029
  • 3,365
  • 5
  • 21
  • Thank you for your response. I tried the above code. But it gave me a syntax error. Syntax error, unrecognized expression: [@contenteditable="true"] After that I used the below path. But that one also not working. xpath('//body[@contenteditable="true"]. – Iresh Apr 26 '23 at 08:39
  • Yes, that's why I said ***Presuming your selectors are correct*** - so you now found out `[@contenteditable="true"]` isn't correct. What should it be? – user16695029 Apr 27 '23 at 08:40