How do you handle iframes in Cypress?

Question

Payment iframe from Stripe. cy.get inside the iframe returns undefined. What is the current pattern?

Arjun Patel · Accepted Answer

Cypress cannot cross same-origin boundaries into an iframe with plain `cy.get`, so you grab the iframe's body and scope commands to it.

```js
const getIframe = (selector) =>
  cy.get(selector)
    .its('0.contentDocument.body')
    .should('not.be.empty')
    .then(cy.wrap);

getIframe('#payment-frame')
  .find('input[name="cardNumber"]')
  .type('4242424242424242');
```

The `should('not.be.empty')` step is what makes it reliable — it retries until the iframe has actually rendered, which is the fix for the classic "element not found" flake. For cross-origin iframes (Stripe, reCAPTCHA, SSO) this will not work at all: enable `chromeWebSecurity: false` for same-site frames, or use `cy.origin()` for cross-origin pages. The plugin `cypress-iframe` wraps the same pattern in `cy.frameLoaded()` / `cy.iframe()` if you prefer readable helpers.

// cypress.config.ts
chromeWebSecurity: false,

// helper
Cypress.Commands.add('getIframeBody', (selector) => {
  return cy.get(selector)
    .its('0.contentDocument.body').should('not.be.empty')
    .then(cy.wrap);
});

cy.getIframeBody('iframe[title=Payment]')
  .find('input[name=cardnumber]')
  .type('4242 4242 4242 4242');

How do you handle iframes in Cypress?

1 answer