Cypress - run test in iframe

问题:

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.

回答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.

回答2:

that is correct. Cypress doesn't support Iframes. It is simple not possible at the moment. You can follow (and upvote) this ticket: https://github.com/cypress-io/cypress/issues/136

回答3:

This works for me locally and via CI. Credit: Gleb Bahmutov iframes blog post

 export const getIframeBody = (locator) => {
  // get the iframe > document > body
  // and retry until the body element is not empty
  return cy
    .get(locator)
    .its('0.contentDocument.body').should('not.be.empty')
    // wraps "body" DOM element to allow
    // chaining more Cypress commands, like ".find(...)"
    // https://on.cypress.io/wrap
    .then(cy.wrap)
}

spec file:

    let iframeStripe = 'iframe[name="stripe_checkout_app"]'
  getIframeBody(iframeStripe).find('button[type="submit"] .Button-content > span').should('have.text', `Buy me`)