Iframe interaction strategies in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Cypress iframe interaction code

What will be the output of this Cypress test code snippet when it tries to get the text inside an iframe's body?

Cypress

cy.get('iframe#myFrame').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap).invoke('text').then(text => cy.log(text))

A Fails because 'contentDocument' is undefined in Cypress

B Throws a syntax error due to incorrect chaining

C Logs '[object HTMLBodyElement]' instead of text content

D Logs the text content inside the iframe body if iframe is loaded

💡 Hint

Remember that Cypress can access iframe contentDocument if same-origin policy allows.

The code accesses the iframe's body element, wraps it for Cypress commands, then invokes 'text' to get the text content and logs it. This works if the iframe is loaded and same-origin policy is satisfied.

❓ assertion

intermediate

Correct assertion for iframe content visibility

Which assertion correctly verifies that an element with id 'submitBtn' inside an iframe with id 'loginFrame' is visible using Cypress?

A cy.frameLoaded('#loginFrame').find('#submitBtn').should('be.visible')

B cy.get('#submitBtn').should('be.visible')

C cy.get('iframe#loginFrame').its('0.contentDocument.body').find('#submitBtn').should('be.visible')

D cy.get('iframe#loginFrame').find('#submitBtn').should('be.visible')

💡 Hint

You need to access the iframe's document body before finding elements inside it.

Option C correctly accesses the iframe's contentDocument body, then finds the element inside it and asserts visibility. Other options either miss accessing iframe content or use invalid chaining.

🔧 Debug

advanced

Debugging iframe element not found error

You have this Cypress code to click a button inside an iframe, but it fails with 'element not found' error. What is the most likely cause?

Cypress

cy.get('iframe#paymentFrame').its('0.contentDocument.body').find('button#payNow').click()

A The iframe content is not fully loaded before the find command runs

B The selector 'button#payNow' is invalid syntax

C The iframe selector 'iframe#paymentFrame' is incorrect

D Cypress cannot access iframe content due to cross-origin restrictions

💡 Hint

Consider timing and loading of iframe content before accessing elements inside.

The most common cause is that the iframe content is not fully loaded when Cypress tries to find the button, causing element not found error. Waiting or retrying is needed.

❓ framework

advanced

Best Cypress approach for interacting with cross-origin iframes

Which approach is recommended to interact with elements inside a cross-origin iframe in Cypress?

A Directly access iframe's contentDocument and find elements

B Use cy.origin() command to run commands inside the iframe's origin context

C Use cy.get() with iframe selector and chain find() commands

D Inject JavaScript into iframe to bypass cross-origin policy

💡 Hint

Cypress added special support for cross-origin testing recently.

Cypress's cy.origin() command allows running commands inside a different origin context, enabling interaction with cross-origin iframes safely and correctly.

🧠 Conceptual

expert

Why direct iframe DOM manipulation is discouraged in Cypress

Why is directly manipulating iframe DOM elements using native JavaScript (e.g., contentDocument.body.innerHTML = '') discouraged in Cypress tests?

A It bypasses Cypress's command queue and retry-ability, causing flaky tests

B It causes syntax errors in Cypress test runner

C It is not allowed by browser security policies

D It slows down test execution significantly

💡 Hint

Think about how Cypress manages commands and retries.

Direct DOM manipulation bypasses Cypress's command queue and automatic retries, which can cause tests to be flaky and unreliable. Using Cypress commands ensures proper synchronization.