Cypress 简明教程

Cypress - Frames

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

The earlier versions of Cypress were unable to access the elements inside frames. But, the recent versions have a solution for frame.

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

To work with frames, first, we have to install a Cypress plugin with the command given below −

npm install –D cypress-iframe

将显示的屏幕如下所示：

The screen which will be displayed is given below −

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

For the frame implementation in Cypress, we have to add the statement *import 'cypressiframe'*in the code. A tagname called frame/iframe is used to represent frames in the html code.

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

The following screen will appear on your computer −

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

Cypress command frameload is used to move the focus from the main page to the frame.Once the focus is shifted, we can interact with the elements inside the frame.

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

This is done with the cy.iframe method.

Implementation

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

Given below is the implementation of the Cypress command for frames, by using the cy.iframe method −

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

输出如下 −

The output is as follows −

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

The execution logs show the accessing elements inside a frame and the text grabbed within it.

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

Cypress cannot handle more than one frame in a page.

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

Also, for frame Intellisense to Cypress, we can add /// <reference types = "Cypressiframe"/> to the code.