← 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