0

Cypress iframe plugin is not working after upgrading to cypress 12 . It was working fine when i was using 8.2 . But there is no information available if it is not supported by cypress 12 ..

The command throws following error TypeError: cy.iframe is not a function

Tried adding to plugin file and installed via package.json . Still issue exist https://www.npmjs.com/package/cypress-iframe

Achtung
  • 199
  • 9
Shobhit Srivastava
  • 1
  • 1

1 Answers1

0

An alternative solution to using the plugin is to either make a cypress command or a module which you can import into your tests like so:

const getDocument = (selector) => {
  return cy.get(selector).its('0.contentDocument').should('exist');
};

const getBody = (selector) => {
  // Find the body of the iframe and wrap it so that more commands can be chained to it
  // https://on.cypress.io/wrap
  return getDocument(selector).its('body').should('not.be.undefined').then(cy.wrap);
};

const iframe = { getBody, getDocument };

export default iframe;

You can then import this into your test file and chain to the getBody method to check things in the iframe

import iframe from '../support/iframe';

describe('Test iframe', () => {
  it('Can interact with iframe elements with Cypress', () => {
    iframe.getBody('iframe[id=iframe]').find('something in iframe');
  });
});

Also note:

if your iframe is cross-domain you will need to set chromeWebSecurity: false in your cypress.config.js otherwise you will not be able to wrap its contentDocument.body

RichardODonoghue
  • 266
  • 1
  • 2
  • 7