Cypress · Browser testing end to end

How do you interact with iframes in Cypress?

HardiframescontentDocumentcross-originUpdated Oct 2026

Short answer

Cypress does not chain into iframe content automatically. Access the iframe's contentDocument, wrap its body with cy.wrap, and query inside it. For cross-origin frames, use cy.origin or a dedicated plugin.

An iframe is a separate document. A normal cy.get searches the top document, not the frame. To work inside a same-origin iframe, read its contentDocument from the iframe element, verify the body exists, wrap the body, and then use ordinary Cypress commands within that subject.

cy.get("iframe#payment")
  .its("0.contentDocument.body")
  .should("not.be.empty")
  .then(cy.wrap)
  .find("[data-cy=card-number]")
  .type("4242424242424242");

its reaches the frame body, cy.wrap puts it back into the Cypress chain, and find scopes the query to the frame.

Different frame situations

Same-origin frame: contentDocument and cy.wrap are enough
Cross-origin frame: the browser blocks direct document access; use cy.origin where the frame is navigable
A third-party payment frame: often needs a test-mode key or a dedicated helper
Repeated frame access: extract a helper or use the cypress-iframe plugin
Never assume the frame body is ready; assert it is not empty first

cy.origin is designed for navigating and interacting with a different origin. It does not make an arbitrary cross-origin iframe's document readable by the parent, because that is a browser security boundary. Check whether the provider offers a sandbox or test mode before building a deep frame automation strategy.

Wrapping the body once and chaining many commands is faster than re-entering the frame for every action, but re-query if the frame reloads. A stale body after navigation is a common source of confusing failures.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

1Why does cy.get not find elements inside an iframe?
2Can cy.origin read a cross-origin iframe document?
3How do you handle an iframe that reloads?
4When would you use the cypress-iframe plugin?

Say it in the interview

Cypress does not search inside an iframe by default, so I reach the frame's contentDocument body and wrap it back into the chain. Then I can query and interact normally. For a cross-origin frame, the browser blocks direct access, so I use cy.origin when it applies or a test mode from the provider. I always assert the frame body is ready and re-query if the frame reloads.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live Cypress mock interview and get scored feedback on depth, clarity and confidence.

Start a free Cypress interview Browse all questions

Different frame situations

Follow-ups you should expect

Related questions

Now say it out loud.