Iframe interaction strategies in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the iframe body for interaction.

Cypress

cy.get('iframe').its('0.contentDocument.body').should('[1]', 'not.be.empty').then(cy.wrap)

Drag options to blanks, or click blank then click option'

Aexist

Bbe.visible

Ccontain

Dhave.length

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'be.visible' causes flaky tests if iframe is hidden initially.

Using 'contain' is incorrect because we check existence, not content.

We use should('exist') to ensure the iframe's body is present before interacting.

2fill in blank

medium

Complete the code to click a button inside the iframe.

Cypress

cy.get('iframe').its('0.contentDocument.body').should('exist').then(cy.wrap).find('[1]').click()

Drag options to blanks, or click blank then click option'

Ainput[type='text']

Bdiv.button

Cbutton.submit

D#submitBtn

Attempts:

3 left

💡 Hint

Common Mistakes

Using input[type='text'] selects a text field, not a button.

Using class selectors may select multiple elements causing test failures.

The selector #submitBtn targets the button by its unique ID inside the iframe.

3fill in blank

hard

Fix the error in the code to correctly access iframe contents.

Cypress

cy.get('iframe').[1]('0.contentDocument.body').should('exist').then(cy.wrap)

Drag options to blanks, or click blank then click option'

Afind

Bits

Cget

Dcontains

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'find' causes an error because '0.contentDocument.body' is not a selector.

Using 'contains' is for text matching, not property access.

The its command accesses a property of the iframe element, here 0.contentDocument.body.

4fill in blank

hard

Fill both blanks to wait for iframe load and then interact with its body.

Cypress

cy.get('iframe').[1]('load').then(() => {
  cy.get('iframe').its('[2]').should('exist').then(cy.wrap)
})

Drag options to blanks, or click blank then click option'

Ashould

B0.contentDocument.body

C0.contentWindow.document.body

Dtrigger

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'should' instead of 'trigger' does not wait for load event.

Using '0.contentWindow.document.body' is less common and may cause confusion.

We use trigger('load') to wait for the iframe to load, then access 0.contentDocument.body to interact.

5fill in blank

hard

Fill all three blanks to create a custom command to get iframe body.

Cypress

Cypress.Commands.add('getIframeBody', () => {
  return cy.get('iframe').[1]('0.contentDocument.body').should('[2]', 'not.be.empty').then(cy.[3])
})

Drag options to blanks, or click blank then click option'

Aits

Bexist

Cwrap

Dfind

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'find' instead of 'its' causes errors accessing properties.

Using 'should('be.visible')' may fail if iframe is hidden.

This custom command uses its to get the iframe body, asserts it exists and is not empty, then wraps it for Cypress chaining.