Cypress - 框架

Cypress 的早期版本无法访问框架内的元素。但是，最新版本为框架提供了解决方案。

要使用框架，首先，我们必须使用下面给出的命令安装 Cypress 插件 −

npm install –D cypress-iframe

将显示的屏幕如下所示 −

对于 Cypress 中的框架实现，我们必须在代码中添加语句 import 'cypressiframe'。 html 代码中使用名为 frame/iframe 的标记名来表示框架。

您的计算机上将显示以下屏幕 −

Cypress 命令 frameload 用于将焦点从主页移动到框架。焦点转移后，我们可以与框架内的元素进行交互。

这是通过 cy.iframe 方法完成的。

实现

下面给出了使用 cy.iframe 方法实现框架的 Cypress 命令 −

import 'cypress-iframe'
describe('Tutorialspoint Test', function () {
    // 测试用例
    it('Test Case6', function (){
        // 启动 URL
        cy.visit("https://jqueryui.com/draggable/");
        // 框架加载
        cy.frameLoaded('.demo-frame');
        // 转移焦点
        cy.iframe().find("#draggable").then(function(t){
            const frmtxt = t.text()
            // 断言以验证文本
            expect(frmtxt).to.contains('Drag me around');
            cy.log(frmtxt);
        })
    });
});

执行结果

输出结果如下 −

执行日志显示框架内的访问元素以及其中抓取的文本。

Cypress 无法处理页面中的多个框架。

此外，对于 Cypress 的框架 Intellisense，我们可以将 /// <reference types = "Cypressiframe"/> 添加到代码中。