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.com/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，我们可以在代码中添加 /// <reference types = "Cypressiframe"/>。