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 });
});

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

what can I do to get that checkbox?

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 });
});

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

what can I do to get that checkbox?

• javascript
• cypress

Share Improve this question Follow edited Dec 25, 2020 at 9:37 Mario Petrovic 8,3621515 gold badges4343 silver badges6666 bronze badges asked Dec 23, 2020 at 15:13 user2298581user2298581 68233 gold badges1616 silver badges3838 bronze badges 6

• Have you tried using cy.get('input.checkbox_0.0').should('be.visible').click({ force: true }) – Alapan Das Commented Dec 23, 2020 at 15:17
• 2 I've tried it now and still: CypressError: Timed out retrying: Expected to find element: 'input.checkbox_0.0', but never found it. I guess that since the "get" fails then it can't do the should() ? – user2298581 Commented Dec 23, 2020 at 15:26
• You can add a bit of timeout specific to this get cy.get('input.checkbox_0.0', {timeout: 10000}).should('be.visible').click({ force: true }) – Alapan Das Commented Dec 23, 2020 at 15:27
• 1 tried but doesn't work, I dont think it's a problem of time because the checkbox appears in a sec, but for some reason it seems that Cypress can get only the elements present in the page when page first loaded..I have no clues on how to solve it – user2298581 Commented Dec 23, 2020 at 15:34
• Did you try using Cypress's Selector Playground button within the test runner? I'm curious to see if it suggests a different selector. – MetaWhirledPeas Commented Dec 23, 2020 at 23:45

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 1

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./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 });

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();