Cypress 简明教程

Cypress - Frames

早期版本的 Cypress 无法访问框架中的元素。但是，最近的版本有针对框架的解决方案。

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

npm install –D cypress-iframe

将显示的屏幕如下所示：

cypress plugin

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

以下屏幕将出现在您的计算机上：

cypressiframe

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

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

Implementation

下面通过使用 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);
      })
   });
});

Execution Results

输出如下 −

draggable

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

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

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