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，我們可以向程式碼中新增 `/// `。