2

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

Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
user2298581
  • 532
  • 3
  • 11
  • 37
  • Have you tried using `cy.get('input.checkbox_0.0').should('be.visible').click({ force: true })` – Alapan Das Dec 23 '20 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 Dec 23 '20 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 Dec 23 '20 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 Dec 23 '20 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 Dec 23 '20 at 23:45
  • Could you provide an example code that can repro your problem? – Joshua Dec 25 '20 at 09:21

2 Answers2

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.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 });
ebanster
  • 886
  • 1
  • 12
  • 29
0

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();
Sudheer Singh
  • 555
  • 5
  • 10