Comment passer à iFrame avec Cypress

Question

J'utilise Cypress pour automatiser la connexion à une application web, protégée par une iFrame.

Dans mon Selenium, je peux utiliser une commande pour passer en iFrame :

driver.switchTo().frame(driver.findElement(By.xpath(".//*@id='app']/iframe")));

Après cela, je peux également accéder aux éléments iFrame.

Mais avec Cypress, je ne connais pas la méthode pour passer en frame ?

Answer 1

Dans Cypress, vous devez installer un paquet appelé cypress-iframe afin de pouvoir travailler sur des éléments iFrame.

Exécutez cette commande dans votre terminal pour l'installation :

npm install -D cypress-iframe

Importation cypress-iframe dans votre fichier :

import 'cypress-iframe';

Pour charger une iFrame, utilisez :

cy.frameLoaded("#id-of-an-iframe");

Pour trouver un élément à l'intérieur d'iFrame, commencez par :

cy.iframe()

Voici l'exemple de code permettant d'utiliser les éléments iFrame dans Cypress :

/// <reference types="Cypress" />
/// <reference types="cypress-iframe" />
import 'cypress-iframe';

describe("Test Suite", () => {
    it("Test Case", () => {

        cy.visit("https://example.com");

        cy.frameLoaded("#iframe-id"); //Load iFrame

        cy.iframe().find("a[href*='services']").eq(0).click();  //click on link inside iFrame
        cy.iframe().find("h1[class*='service-title']").should("have.length", 2);  //assertion

    })
})