如何使用Cypress切换到iFrame

我使用Cypress自动登录到受iFrame保护的web应用程序

在我的Selenium中，我可以使用命令切换到iFrame：

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

之后，我还可以访问iFrame元素

---

但是对于Cypress，我不知道如何切换到frame？

在Cypress中，您需要安装一个名为

Cypress iframe

的包，以便处理iframe元素

在终端中运行此命令以安装：

npm install -D cypress-iframe

将

cypress-iframe

包导入到您的文件：

import 'cypress-iframe';

要加载iFrame，请使用：

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

要查找iFrame中的元素，请从以下内容开始：

cy.iframe()

下面是关于如何在Cypress中使用iFrame元素的代码示例：

/// <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

    })
})

//
/// 
进口“cypress iframe”；
描述（“测试套件”，（）=>{
它（“测试用例”，（）=>{
访问（”https://example.com");
cy.frameLoaded（“#iframe id”）；//加载iframe
cy.iframe（）.find（“a[href*='services']”）.eq（0）。单击（）；//单击iframe内部的链接
cy.iframe（）.find（“h1[class*='service-title']”）。应该（“have.length”，2）；//断言
})
})

可能重复：@JoshuaWade:谢谢你的评论，我已经找到了解决方法。然后（函数（$element）{const$body=$element.contents（）.find（'body'）const-cyElement=cy.wrap（$body）cyElement.find（'[class=xxx]'）。单击（{force:true}），我希望这可以帮助某人节省您的时间。