automation - Cypress - run test in iframe

Question

I'm trying to find elements in iframe but it doesn't work.

Is there anyone who have some system to run tests with Cypress in iframe? Some way to get in iframe and work in there.

Answer 1

It's a known issue mentioned here. You can create your own custom cypress command which mocks the iframe feature. Add following function to your cypress/support/commands.js

Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe, selector) => {
  Cypress.log({
    name: 'iframe',
    consoleProps() {
      return {
        iframe: $iframe,
      };
    },
  });
  return new Cypress.Promise(resolve => {
    resolve($iframe.contents().find(selector));
  });
});

Then you can use it like this:

cy.get('#iframe-id')
  .iframe('body #elementToFind')
  .should('exist')

Also, because of CORS/same-origin policy reasons, you might have to set chromeWebSecurity to false in cypress.json (Setting chromeWebSecurity to false allows you to access cross-origin iframes that are embedded in your application and also navigate to any superdomain without cross-origin errors).

This is a workaround though, it worked for me locally but not during CI runs.