Handling Frames and iFrames in Cypress

In today’s world, users have become closely associated to the web. People rely on the internet to get almost anything and everything that they want. Modern web technology has evolved to a more sophisticated manner of convenience regarding access and functionality. In order to facilitate easier access and smoother functional experience for the people. Under these web technologies, Frames and iFrames have been used to give the maximum and optimized functionality with a minimum loading time and easy access as well.

What is a Frame in Web Development

Frame is a web technology which we are using to divide a single HTML document into a few different sections, which can load a separate HTML document. So by using the frames, you can divide and conquer the loading time issue. A set of frames inside an HTML document is known as a “frameset.” Hence from HTML5 onwards <frame> tag was deprecated, and the <frameset> tag, along with rows and cols attributes with which we can define how the set frames are dividing the page, is introduced instead.

What is an iFrame in Web Development

iFrame is a frame which is used in inline style. Hence it got the name Inline Frame (iFrame). iFrame does not belong to <frame> / <frameset> types instead, it can be used in anywhere of the document.<iframe> defines a portion of the document to be used as a separate piece of another document with scrollbars and everything.  Basically, iFrame can render another HTML document inside an HTML document within any rectangular portion of the document. iFrames use the “src” attribute to define the path to the HTML document it is rendering. 

Difference between Frames and iFrames

Usually, both frames and iframes are used to render multiple HTML documents inside the scope of a single HTML document. So by using the frame layouts, you can give the user the chance to load multiple web pages/ HTML documents at the cost of loading a single HTML page. 

Usually, frames are used as placeholders for the information that is being used for the website, and iframes are used for web elements with more volatile and dynamic behavior. With iframes, a designer can only refresh the said iframe without having to require a whole page refresh. So with this advantage with iframes, we can do better optimization for the moving parts of a website while not having to worry about decreased functional capabilities.

With the frames, the users are able to resize them with whatever their measurements or viewing discretion would be. But with iframes, it resizes based on the information or the content that you are feeding to it. So with iframes, the designer does not have to worry about repositioning and spacing. 

So with these points, you can decide whether to use a frame/frameset or an inline frame for a given website layout.

How to handle iframes and frames in Cypress: Example

To handle iframes in Cypress, firstly install the plugin cypress-iframe

Execute the below command from the root of your project where the package.json file exist

npm install -D cypress-iframe

This will install the cypress-iframe plugin as dev dependency.

After the installation, open the cypress/support/commands.ts file and add the below line to import the plugin globally

import 'cypress-iframe';
// or
require('cypress-iframe');

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

• frameLoaded
• iframe
• enter

cy.frameLoaded(<selector>) will ensure that the frame is loaded within the webpage

Example

cy.frameLoaded("#myframeID")

cy.iframe(<selector>) will get the reference for the iframe based on the iframe selector provided. You can then chain the command to perform further actions on the iframe

Example

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

cy.enter(<selector>) will allow to perform multiple actions within the iframe.

Example

cy.enter("#myiframeID").then(iframeBody => {
iframeBody().find(".button").click()
iframeBody().contains("p", "someText").should("be.visible")
)

Talk to an Expert

Why use BrowserStack Automate to run Cypress Tests?

Here’s why you should run your Cypress tests on Real Devices & Browsers using BrowserStack Automate:

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

• Parallel Testing: BrowserStack Automate significantly reduces total testing time by allowing simultaneous execution of multiple Cypress test suites, facilitating quicker iterative feedback and accelerated deployment cycles.

• CI/CD Integration: The platform seamlessly integrates with major CI/CD systems, including Jenkins, Travis CI, CircleCI, and GitHub Actions, automating the testing process within the development pipeline.
• Diagnostic Tools for Better Debugging: BrowserStack provides comprehensive diagnostic capabilities, including detailed logs, screenshots, and video recordings of test sessions, aiding in the swift identification and resolution of issues.
• Testing on Real Devices: Beyond simulated environments, BrowserStack also supports testing on real devices and browsers on the cloud, offering more precise and real-world test 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.

BrowserStack Automate is an excellent choice 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 execution, and integrations with CI/CD pipelines, BrowserStack ensures faster test runs and streamlined workflows.

Choose BrowserStack Automate to enhance the reliability and performance of your Cypress test suite with ease.

Conclusion

With the use of iframes as well as frames, web technologies have evolved into more versatile and interesting technology, which has inspired many people in the world to connect and interact with the global village concept. Nowadays, one can safely assume that these frames and iframes technology can and will expand further inside the web world.

This article helps you handle frames and iframes in Cypress. It is essential to test your websites and apps that contain frames and iframes on real devices and browsers to ensure compatibility and reliability. 

Try BrowserStack Now