使用 Cypress 處理框架

Cypress 在早期版本中無法處理框架。但是，在其最新版本中，他們為我們提供了自動化包含框架的場景的解決方案。框架是一個 html 結構，它位於另一個 html 結構內。

如果我們想訪問框架內的元素，首先 Cypress 必須將其焦點從整個網頁轉移到框架，然後與該框架內的元素進行互動。我們需要安裝一個外掛才能在 Cypress 中使用框架。

我們將從專案路徑執行命令 **npm install –D cypress-iframe**。安裝完成後，我們將獲得確認以及版本和其他詳細資訊。最後，我們必須在程式碼中 **import 'cypress-iframe'**，所有 iframe 方法都將可用。

為了在我們的程式碼中獲得框架方法的自動建議，我們必須新增 **/// <reference types="Cypress-iframe" />**。包含嵌入式框架的 html 文件將在其程式碼中使用 <frame> 或 <iframe> 標記確認。我們需要使用 css 定位器來識別框架。

Cypress 將在使用 **frameload()** 命令識別框架後加載框架，然後將其焦點從主頁面轉移到框架，並與其中的元素進行互動。這是透過 **cy.iframe()** 實現的，然後將其與 find() 命令連結以獲取框架內元素的控制權。

示例

帶有框架的程式碼實現。

/// <reference types = "Cypress"/>
/// <reference types = "Cypress-iframe"/>
import 'cypress-iframe'
describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case7', function (){
      // launch the application
      cy.visit("https://jqueryui.com/draggable/");
      // load the frame
      cy.frameLoaded('.demo-frame');
      //shift the focus to frame
      cy.iframe().find("#draggable").then(function(txt){
         const txtframe = txt.text();
         //assertion to verify text
         expect(txtframe).to.contains('Drag me around');
         cy.log(txtframe);
      })
   });
});

測試執行程式日誌如下所示：