Table of content

Iframes in Cypress IO

The IFrame is an HTML document embedded in another parent HTML document. CypressIO has no support for the iframe in its earlier version. But now, we can install the iframe as a plugin and we can perform the only action on iframe.

If you take a look at the DOM[Document object model] structure of a page that contains an iframe, you will never find the inner content of the iframe. And you won't be able to interact with it via the DOM. We have to switch into the frame to see the elements present in the frame.

Cypress has openly confirmed that handling iframes is difficult and they are still modifying the cypress structure to resolve the framework issues. The below image is from the cypress documentation about the framework issue.
frames-cypress-documentation

The below image shows the HTML structure of the iframe.
iframe-css-cypressio

Installation of iframe

  • Type the below command in the terminal of the VSCode to install the plugin for an iframe.
    npm install -D cypress-iframe​

    iframe-install-cypressio

  • Import the plugin by typing the below configuration in the .js file where you are about to write the testing program for an iframe.
    import "cypress-iframe";​
  • Now we are good to use the iframe in cypress. Let us learn how to use iframe in Cypress.

Example program: In this program, we are getting the CSS of the iframe element and after that, we have to do action in the checkbox.

  • To get the CSS elements of the iframe and to perform some actions in it, the cy.frameLoaded() command is used. But we can also use cy.get() to get the CSS of the iframe element but we cannot perform any action in the iframe.
  • After loading or getting the iframe element,cy.iframe()is used to perform any action or assertion in cypress.
import "cypress-iframe";
describe("frame test", function () {
  it("Demo example", function () {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/frames1");
    cy.frameLoaded("#frame3");
    cy.iframe().find("input#a").check();
  });
});

Output :

iframe-output-cypress

The main disadvantage of the cypress is we cannot perform multiple frame operations. If so error will occur as in the below image.
error-iframe

Intellisense for iframe in CypressIO

If you have already created a tsconfig.json file, the IntelliSense automatically popups for iframe methods too as below image.
intellisense-iframe-cypress

If you have not created a tsconfig.json file, then IntelliSense will not popup for the iframe methods. To get the IntelliSense for the iframe methods, we have to give the below command in the .js file where we are using the iframe concept.

/// <reference types = "Cypress-iframe"/>

Example program :

/// <reference types="cypress" />
/// <reference types = "Cypress-iframe"/>
import "cypress-iframe";
describe("frame test", function () {
  it("Demo example", function () {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/frames1");
    cy.frameLoaded("#frame3");
    cy.iframe().find("input#a").check();
  });
});

intellisense-popup-frame-cypress

0 results
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions