← Back to library
Cypressselectorsadvancedv10+

Interact with content inside an iframe

Access a same-origin iframe's DOM by chaining through its contentDocument body.

1it('fills a payment form inside an iframe', () => {
2  cy.visit('/checkout');
3
4  // Store the iframe body as an alias to avoid repeating the chain
5  cy.get('[data-testid="payment-iframe"]')
6    .its('0.contentDocument.body')
7    .should('not.be.empty')   // wait for the iframe to finish loading
8    .then(cy.wrap)
9    .as('frame');
10
11  cy.get('@frame').find('[placeholder="Card number"]').type('4242 4242 4242 4242');
12  cy.get('@frame').find('[placeholder="CVC"]').type('123');
13
14  cy.get('[type="submit"]').click();
15  cy.contains('Payment successful').should('be.visible');
16});
#iframe#contentDocument#same-origin#embed#wrap