Search code examples
javascripthtmliframecypress

Click on element inside iFrame - Cypress

Can anyone, please assist in following:

Want to click element which resides on found iframe. Also, imported plugin import 'cypress-iframe'; in commands class. Code for founding iframe and clicking on element:

clickIFrameElement(elementCss, element1Css) {
    cy.frameLoaded(elementCss);
    cy.iframe(elementCss).find(element1Css).then(function(){
       cy.get(element1Css).click({ force: true })
    })
}

In test, I call this command:

cy.frameLoaded(elementCss).eq(0);
cy.iframe().find(element1Css).should('be.visible').click()

It does find iframe, but do not click on element. Error which get:

Timed out retrying after 20000ms: Expected to find element: #grouped-pageload-Banner button[class*="save-consents evSpAcceptBtn"], but never found it.

HTML for iframe: enter image description here

What I am doing wrong, or what is incorrect in code?

Thank you in advance

UPDATE

Tried also second approach with following command:

cy.iframe().find(#grouped-pageload-Banner button[class*="save-consents evSpAcceptBtn"]).should('be.visible').click()

But got second error:

cypress-iframe commands can only be applied to exactly one iframe at a time.  Instead found 7
Solution

  • Please replace this line into your code

    cy.iframe('#ifrmCookieBanner')
    .find('#grouped-pageload-Banner button[class*="save-consents evSpAcceptBtn"]')
    .should('be.visible')
    .click()

    And put this in your support/index.js

    Cypress.on('uncaught:exception', (err, runnable) => {
    // returning false here prevents Cypress from
    // failing the test
return false
})