Cypress - 框架

早期版本的 Cypress 无法访问框架内的元素。但是，最新版本已经解决了这个问题。

要使用框架，首先，我们必须使用以下命令安装 Cypress 插件：

npm install –D cypress-iframe

将显示以下屏幕：

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

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

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

这可以通过 `cy.iframe` 方法实现。

实现

以下是使用 `cy.iframe` 方法实现 Cypress 框架命令的示例：

import 'cypress-iframe'
describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case6', function (){
      // launch URL
      cy.visit("https://jqueryui.jqueryjs.cn/draggable/");
      // frame loading
      cy.frameLoaded('.demo-frame');
      //shifting focus
      cy.iframe().find("#draggable").then(function(t){
         const frmtxt = t.text()
         //assertion to verify text
         expect(frmtxt).to.contains('Drag me around');
         cy.log(frmtxt);
      })
   });
});

执行结果

输出如下：

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

Cypress 无法处理页面中超过一个框架。

此外，为了实现 Cypress 的框架 IntelliSense，我们可以向代码中添加 `/// `。