Cypress Expected to find element: '.checkbox_0.0', but never found it

user_2298581 0
Viewed 6929

I have a problem with cypress not being able to find a checkbox on the page.

This checkbox is rendered after cypress click on a button, but even if the checkbox is visible on the page cypress gives an error:

CypressError: Timed out retrying: Expected to find element: '.checkbox_0.0', but never found it.

it('add a sibling"', () => {
  //click the button:
  cy.pause();
  cy.get('#ciccia').click({ force: true });

  //click the checkbox that has just appeared:
  cy.get('.checkbox_0.0').click({ force: true });
});

enter image description here

even if the checkbox_0.0 is present as you can see in the image

what can I do to get that checkbox? enter image description here

cypress javascript
2 Answers

Based on my experience (sorry, it would be ideal to see the source code too), but this could be due to the element being inside an iframe. At this stage, Cypress does not seem to support elements residing inside iframe with this Github issue still open: https://github.com/cypress-io/cypress/issues/136

From a few workarounds on the link above, this resolved my issue:

Cypress.Commands.add('iframe', { prevSubject: 'element' }, $iframe => {
    return new Cypress.Promise(resolve => {
        $iframe.on('load', () => {
            resolve($iframe.contents().find('body'));
        });
    });
});
// for <iframe id="foo" src="bar.html"></iframe>
cy.get('#foo').iframe().find('.checkbox_0.0').click({ force: true });
user_65271430

You can simply write this method if elements is inside iframe:

getIframeDocument = () => {
        return cy.get('object').its('0.contentDocument').its('body').then(cy.wrap)
    }

And then call this method like :

this.getIframeDocument().find("yourlocater").click();
user_122007650
Related