Cypress Error on chaining Cypress-If / Cypress-Drag-Drop commands with Cypress-iFrame commands

Question

The application, which I have to automate, is completely inside an iframe. To continue, I used cypress-iframe plugin.

However, when I am trying to chain the commands of cypress-drag-drop or cypress-if over cypress-iframe, its returning the following error:

cy.iframe(...).find(...).should(...).if is not a function

Here's the script that's throwing the error: cy.iframe('#iframeID').find('#checkboxLocator').should('be.visible').if('not.checked').check();

Is there any solution to it?

Answer 1

It seems like you are trying to chain the "if" command from the cypress-if plugin with the "should" command from Cypress, but you are encountering an error that says "if is not a function."

The issue might be that the cypress-if plugin is not properly loaded, or there might be a naming conflict with other plugins or libraries that you are using.

One solution is to try to wrap the "if" command inside a function and call it, like this:

cy.iframe('#iframeID')
  .find('#checkboxLocator')
  .should('be.visible')
  .then(checkbox => {
    cy.wrap(checkbox).if('not.checked').check();
  });

Another solution is to try to use the "then" command to conditionally check the checkbox, like this:

cy.iframe('#iframeID')
  .find('#checkboxLocator')
  .should('be.visible')
  .then(checkbox => {
    if (!checkbox.is(':checked')) {
      checkbox.check();
    }
  });

Try both solutions and see which one works for you.