Iframe interaction strategies in Cypress - Test Execution Trace

Test Overview

This test demonstrates how to interact with an iframe using Cypress. It verifies that a button inside the iframe can be clicked and that the expected text appears after the click.

Test Code - Cypress

Cypress

describe('Iframe interaction test', () => {
  it('Clicks button inside iframe and verifies text', () => {
    cy.visit('https://example.com/page-with-iframe')
    cy.get('iframe#iframe-id').then($iframe => {
      const iframeBody = $iframe.contents().find('body')
      cy.wrap(iframeBody).find('button#inside-iframe-btn').click()
      cy.wrap(iframeBody).find('p#result-text').should('contain.text', 'Button clicked!')
    })
  })
})

Execution Trace - 8 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner initialized	-	PASS
2	Browser opens and navigates to 'https://example.com/page-with-iframe'	Page with iframe loaded	URL is correct	PASS
3	Find iframe element with selector 'iframe#iframe-id'	Iframe element found in DOM	Iframe element exists	PASS
4	Access iframe's document body using jQuery contents() and find('body')	Iframe's body element accessed	Iframe body is accessible	PASS
5	Wrap iframe body and find button with selector 'button#inside-iframe-btn'	Button inside iframe found	Button element exists inside iframe	PASS
6	Click the button inside the iframe	Button clicked, iframe content updated	-	PASS
7	Find paragraph with selector 'p#result-text' inside iframe and check text content	Paragraph element found inside iframe	Text contains 'Button clicked!'	PASS
8	Test ends	Test completed successfully	-	PASS

Failure Scenario

Failing Condition: The iframe or button inside it is not found or the expected text does not appear after clicking the button

Execution Trace Quiz - 3 Questions

What is the correct way to access the body of an iframe in Cypress?

A Use cy.get('iframe').then($iframe => $iframe.contents().find('body'))

B Use cy.get('iframe').click() directly

C Use cy.get('iframe').find('button') without accessing contents()

D Use cy.get('body') to access iframe content

Key Result

When testing iframes with Cypress, always access the iframe's document body using jQuery contents() and wrap it with cy.wrap() to chain Cypress commands inside the iframe context.