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 ✅

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?

No! It will need extra custom code though..

Let's start coding!

Iframe Demo App

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

Any questions?