Iframes in Cypress: Tutorial

Testing iframes in Cypress requires a different approach because Cypress can not immediately access the contents of an iframe due to browser security restriction. To interact with elements inside an iframe, you must first get the iframe ’ s document and body, then wrap the contents habituate Cypress bidding.

This article explains everything related to iframes in Cypress, including how to automate it.

What is an iFrame in Web Development

An iframe is an HTML element use to engraft another within the current document. It works like a window inside a page that displays external message such as video, forms, or entire websites without redirecting the user. An iframe has its own and context, separate from the parent page.

When to use an iframe in Cypress?

does not natively support iframe traversal like it perform with standard DOM factor. However, you may need to interact with iframe substance in scenarios such as:

• Testing third-party content embedded via iframes (like or outside forms)
• Verifying dynamical or modular content lade inside iframes
• Simulating user interactions within iframe-hosted components
• Checking layout, data, or behavior inside embedded applications

Why are iframes in Cypress Challenging?

Cypress runs within a single browser circumstance and tightly controls the DOM to see stable and predictable tests. However, iframes make a separate browsing context, which makes automation hard.

Key challenge include:

• Separate DOM Context:Since iframes preserve their own DOM, Cypress can not directly access or interact with elements inside an iframe without especial treatment.
• Cross-Origin Restrictions:If the iframe load substance from a different origin, browser protection policies preclude Cypress from accessing it.
• Asynchronous Loading Issues:If iframes are not fitly handled, Cypress may try to interact with the iframe before amply loading, leading to fault or off-the-wall tests.

• No Aboriginal Support in Core: Cypress make not furnish built-in command for iframes, so you must rely on custom-made solutions or third-party plugins.

How to Automate iFrames in Cypress?

You can automate iframe component using plugins like cypress-iframe or by write custom commands. However, you can only interact with iframe content on the like origin (domain, port, and protocol) as your independent application. Cypress can not access cross-origin iframes due to browser security limitation.

What you can do with same-origin iframes:

• Access and interact with elements inside the iframe.
• Wait for the iframe to laden before performing actions.
• Use to formalise content within the iframe.

How to Perform iFrames Testing with Cypress?

To test iframe content in Cypress, you can either use the cypress-iframe plugin or define a custom bidding tailored to your project.

Approach 1: Using the Cypress-iframe Plugin

This plugin simplifies iframe interaction habituate frameLoaded () and iframe () helpers. It works well for squad looking for a plug-and-play solution.

npm install -D cypress-iframe importee 'cypress-iframe '; cy.frameLoaded (' # my-iframe '); cy.iframe (' # my-iframe ') .find ('button.submit ') .click ();

Approach 2: Using a Custom Command

This method manually accesses the iframe ’ s contentDocument.body, waits for it to load, and wraps it so that Cypress can interact with its elements. It ’ s useful when you need more control or plugins don ’ t employment for your specific iframe construction.

Cypress.Commands.add ('getIframeBody ', (selector) = & gt; {return cy.get (selector) .its (' 0.contentDocument.body ') .should ('not.be.empty ') .then (cy.wrap);}); cy.getIframeBody (' # my-iframe ') .within (() = & gt; {cy.get ('input # name ') .type ('Ayush '); cy.get ('button # submit ') .click ();});

How to Test iFrame in Cypress Using Native Commands?

You can screen iframe content in Cypress using only native commands if the iframe is on the same origin as your test suite. Cross-origin iframes are blocked due to browser protection policy.

Here are the two method to be used for interacting with iFrames in Cypress:

1. Using .get (0)

This get the iframe & # 8217; s raw DOM node and accesses its contentDocument.body to interact with the content.

cy.get ('iframe # my-frame ') .get (0) .then ((iframe) = & gt; {const body = iframe.contentDocument.body; cy.wrap (body) .find ('h1 ') .should ('contain.text ', 'Welcome ');});

2. Using .find (‘ body ’)

This method use .its () to accession the iframe ’ s substance document and body, then enfold it for farther interaction. It supports proper command chaining.

cy.get ('iframe # my-frame ') .its (' 0.contentDocument ') .should ('exist ') .its ('body ') .should ('not.be.empty ') .then (cy.wrap) .find ('input [name= '' e-mail ''] ') .type ('thakurayushsingh82 @ gmail.com');

How to Handle iframe in Cypress Using a Plugin?

To handle iframes in Cypress, firstly install the plugincypress-iframe

Execute the below bid from the root of your project where thepackage.jsonfile exist

npm install -D cypress-iframe

This will install thecypress-iframeplugin as dev dependency.

After the installment, open thecypress/support/commands.tsfile and add the below line to import the plugin globally

import'cypress-iframe '; // or expect ('cypress-iframe ');
For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

Cypress-iframe plugin provides three commands to interact with iframes.

• frameLoaded
• iframe
• enter

cy.frameLoaded (& lt; chooser & gt;)will ensure that the form is lade within the webpage

Example

cy.frameLoaded (`` # myframeID '')

cy.iframe (& lt; picker & gt;)will get the quotation for the iframe ground on the iframe selector provide. You can then chain the dictation to perform further activity on the iframe

Example

cy.iframe (`` # iframeID '') .contains (`` button '', `` Click Here '') .click ()

cy.enter (& lt; selector & gt;)will allow to execute multiple activeness within the iframe.

Example

cy.enter (`` # myiframeID '') .then (iframeBody = & gt; {iframeBody () .find (`` .button '') .click () iframeBody () .contains (`` p '', `` someText '') .should (`` be.visible ''))

How to Handle Slow-Loading, Empty, and Nested iframes in Cypress?

iFrame testing becomes more complex when dealing with slow-loading content,, or nestle iframe structures. Below are key strategy to handle these lawsuit effectively.

1. Slow Loading and Empty iFrames Validation

Cypress will betray if the iframe & # 8217; s body is still empty. To forestall such issues, validate that the iframe has charge before interacting. Here ’ s how.

cy.get ('iframe # my-frame ') .its (' 0.contentDocument.body ') .should ('not.be.empty ') .then (cy.wrap) .find ('h1 ') .should ('contain.text ', 'Welcome ');

To meliorate readability, implement this logic into a custom command:

Cypress.Commands.add ('getIframeBody ', (selector) = & gt; {return cy.get (picker) .its (' 0.contentDocument.body ') .should ('not.be.empty ') .then (cy.wrap);});

2. Reusing Code for Multiple Tests

Instead of repeating iframe access logic in every test, split it into utility functions or custom bidding. This improves test maintainability and makes it easy to update handling in one place if the DOM changes.

Cypress.Commands.add ('iframeFind ', (iframeSelector, innerSelector) = & gt; {revert cy.get (iframeSelector) .its (' 0.contentDocument.body ') .should ('not.be.empty ') .then (cy.wrap) .find (innerSelector);});

3. Navigating Inside the iframe

Once the iframe ’ s body is wrapped using cy.wrap (), continue using Cypress commands as usual like .click (), .type (), .select (), and assertions.

cy.getIframeBody (' # login-frame ') .within (() = & gt; {cy.get ('input # username ') .type ('admin '); cy.get ('input # password ') .type ('123456 '); cy.get ('button [type= '' submit ''] ') .click ();});

4. Handling Nested iFrames

Nested iframes are more complex due to the traversal across multiple papers layers. To address this, you ’ ll want to access the inner iframe through the outer one ’ s papers.

cy.get ('iframe # outer-frame ') .its (' 0.contentDocument.body ') .should ('not.be.empty ') .then (cy.wrap) .within (() = & gt; {cy.get ('iframe # inner-frame ') .its (' 0.contentDocument.body ') .should ('not.be.empty ') .then (cy.wrap) .find (' p ') .should ('contain.text ', 'Nested Content ');});

5. Cross-Origin Testing with cy.origin ()

If the iframe lade substance from a different orbit, Cypress focuses on browser security and won ’ t allow direct DOM admission. However, starting with Cypress v10+, cy.origin () command can interact with cross-origin message by defining logic inside a special context.

cy.origin ('https: //external-domain.com ', () = & gt; {cy.visit ('/iframe-content '); cy.get ('h2 ') .should ('contain.text ', 'External Frame ');});

Why Use BrowserStack Automate to Run Cypress Tests?

Here ’ s why you should run your Cypress exam on Real Devices & amp; Browsers apply BrowserStack Automate:

• Diverse Environment Testing: It enables the executing of Cypress tests across a broad pick of browsers and operating systems, eliminating the requirement for maintaining local testing infrastructure. This ensures consistent coating execution across various platforms.

• : BrowserStack Automate importantly reduces total testing clip by allowing simultaneous execution of multiple Cypress test rooms, facilitating quicker iterative feedback and accelerated deployment cycles.

• Integration: The program seamlessly integrates with major CI/CD system, including Jenkins, Travis CI, CircleCI, and GitHub Actions, automating the essay procedure within the evolution line.
• Diagnostic Tools for Better Debugging: BrowserStack provides comprehensive diagnostic capabilities, include detailed logs, screenshots, and video recordings of test sessions, aiding in the fleet identification and resolution of issues.
• Testing on Existent Devices: Beyond simulated environments, BrowserStack also endorse testing on real device and browser on the cloud, proffer more precise and real-world trial outcomes.
• Customizable Test Execution: Users can tailor test executions to meet specific needs through BrowserStack ’ s user interface or APIs, enabling adaptable and controlled test runs.

is an excellent alternative for running Cypress tests because it offers a scalable, cloud-based infrastructure that eliminates the need for complex local setups.

With support for real-time cross-browser testing, parallel performance, and integrations with CI/CD pipelines, BrowserStack ensures faster test runs and streamlined workflows.

Choose BrowserStack Automate to heighten the reliability and performance of your Cypress test rooms with simplicity.

Talk to an Expert

Best Practices for Testing iframe in Cypress Using Native Methods

Here are some of the best pattern for testing iframe in Cypress using native methods:

• Use Custom Commands: Accessing iframe content with native Cypress methods involves multiple chained steps. Creating custom-made commands improves readability and reduces duplication. This too centralizes iframe logic, so you can update it in one spot when needed.
• Avoid Cross-Origin iFrames:Cypress can not access iframe content from a different area using native methods due to browser protection restrictions. Always exam iframe content hosted on the same beginning as your application.
• Wait for the iframe to Load Fully:iFrames often load asynchronously. Always verify the iframe ’ s content has loaded by checking that the body is not hollow before interact with its elements to deflect examination failures.

• Modularize Tests:Instead of implant iframe logic into every test case, part it into reclaimable constituent or helper functions. This reduce duplication, create tryout easier to understand and sustain.

• Validate the Visibility and State of iFrames:Before interact with iframe content, ensure that the iframe is seeable and interactive. Depending on user behaviour or the page & # 8217; s province, iFrames can be enshroud, founder, or conditionally rendered.

Conclusion

Testing iframes in Cypress can be gainsay due to the complexities of handling slow-loading, nestle, and cross-origin frames. However, by leverage native command and plugins, you can overcome these challenges and assure your tests are efficient and reliable.

ply an added advantage by offering essay, cross-browser compatibility, and a scalable infrastructure for. This allows you to secure that your iframe interactions act seamlessly across different environment.

Utilitarian Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Related Guides