使用 Cypress 處理子標籤頁


有時點選連結或按鈕時,它會在同一瀏覽器中開啟另一個標籤頁。與其他自動化工具(如 Selenium 和 Protractor)不同,Cypress 具有處理子標籤頁的獨特方式。它基本上透過將焦點從父標籤頁轉移到子標籤頁來不保留子標籤頁的資訊。

現在讓我們瞭解為什麼連結或按鈕會在不同標籤頁上開啟一個新網頁,這被認為是子標籤頁。這是由於該元素的 html 中設定的target屬性導致的。如果省略,它將在同一視窗中開啟。

Cypress 無法直接處理子標籤頁,它提供了一種變通方法,透過從 html 程式碼中刪除 target 屬性來繼續在父標籤頁上執行我們的任務。這是藉助 Cypress 中的invoke()命令完成的,該命令呼叫 JQuery 函式removeAttr() [這將刪除作為函式引數傳遞的屬性]。

現在點選連結或按鈕,它將在父標籤頁本身開啟,我們將在那裡執行必要的操作和驗證。最後,使用go() Cypress 命令返回到瀏覽器歷史記錄中的上一個 URL。

go() 方法用於分別在瀏覽器歷史記錄中向前和向後移動到上一個或下一個 URL。我們還可以將數字作為引數指定給 go()。[-1 返回一頁,1 前進一頁]

語法

cy.go(direction), cy.go('back')

如下所示,可以有兩種型別的選項可以修改 go() 方法的預設行為:

  • log - log 的預設值為 true。

  • timeout - timeout 引數的預設值為 pageLoadTimeout(60000 毫秒)。這是等待 cy.go() 完成其載入事件的持續時間。

示例

處理子標籤頁的程式碼實現。

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case4', function (){
      // launch the url
      cy.visit("https://tutorialspoint.tw/selenium /selenium_automation_practice.htm");
      // removing the target attribute from the link with removeAttr()
      cy.get('a[title="TutorialsPoint - Home"]')
      .invoke('removeAttr', 'target').click();
      // assertion to verify the current Url
      cy.url().should('include','https://tutorialspoint.tw/index.htm');
      // moving back to the parent tab with the help of go() method
      cy.go('back');
   });
});

最後,我們可以使用斷言透過 cy.url() 驗證我們是否已移動到正確的 URL。

更新於: 2020年8月5日

1K+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.