Testing iframes with Cypress

Marie Drake

Principal Test Automation Engineer @ News UK

mariedrake.com         @mcruzdrake

Cypress lunch and learn recap

• Cypress functional testing ✅
• Cypress API testing ✅
• Cypress Visual testing with Applitools ✅

Xpertise Recruitment

Remember the limitations?

Are there limitations?

• No support for multiple tabs.
• No support for visiting more than 1 domain.
• Iframe support limited

But.. workarounds are documented here.

https://docs.cypress.io/guides/references/trade-offs.html

What are iframes?

Cypress' limitations with iframes

• Cypress can't access iframes directly
• No built-in command to switch to iframes
• IFrames snapshots not shown on Cypress Test Runner

Does that mean we can't automate iframes with Cypress?

Let's start coding!

https://github.com/mdcruz/cypress-iframe-example

Iframe Demo App

https://the-internet.herokuapp.com/iframe

What we did

• Used jQuery property "0.contentDocument.body"
• Created a custom command to switch to the iframe
• Introduced cy.wrap
• Used cypress-iframe plugin
• Disabled chromeWebSecurity to test cross domains

Additional Resources

• Working with iframes in Cypress
• Targeting elements inside iframes
• cypress-iframe plugin

Any questions?