how does cypress locate element in iframe

Question

It doesn't work at cy.wrap($doc.find("#input")).type("test", { force: true }): CypressError: Timed out retrying: Expected to find element: 'undefined', but never found it.

it('iframe - check it', function () {
    cy.visit("https://jsfiddle.net/1w9jpnxo/1/");
    cy.get("iframe[name='result']").then($iframe => {

        const $doc = $iframe.contents();
        cy.wrap($doc.find("#input")).type("test", { force: true });
        //cy.wrap($doc.find("#submit")).click({ force: true });
    });
})

"cypress": "^3.8.3"

Above is the common practice in internet but it doesn't work for me.

I also read through the open proposal on https://docs.cypress.io/faq/questions/using-cypress-faq.html?#How-do-I-test-elements-inside-an-iframe but cannot understand what the solution is.

You can check my answer in this question (https://stackoverflow.com/questions/57605596/cypress-run-test-in-iframe/57609872#57609872). Iframes in Cypress are tricky but there's a workaround which worked for me to evaluating element's visibility within an iframe. Not sure if it''ll work also for interacting with elements but you can try. — DurkoMatko, Jan 27 '20 at 10:05
@DurkoMatko Appreciated! Could you please share the code how you locate the element like an input in iframe? I cannot try your solution for now but I cannot wait. Thanks again! — rong, Jan 28 '20 at 00:26

score 1 · Answer 1 · answered Jan 28 '20 at 08:10

After you add a helper function to your cypress/support/commands.js as I describe in my answer here (Cypress - run test in iframe), you can evaluate whether the input exists with:

cy.get('#iframe-id')
  .iframe('body #yourInputId')
  .should('exist')

I'm not sure whether typing into it will work, but you can definitely try:

cy.get('#iframe-id')
  .iframe('body #yourInputId')
  .type('test text')

Let me know if it worked, I'm curious myself..

how does cypress locate element in iframe

1 Answers1