Cypress - 隱藏元素

Cypress 可以處理隱藏元素。在某些情況下，子菜單隻有在將滑鼠懸停在主選單上時才會顯示。這些子選單最初使用層疊樣式表 (CSS) 屬性 display:none 隱藏。

為了處理隱藏元素，Cypress 利用 jQuery 方法 show。它必須藉助 Cypress 命令 (invoke['show']) 呼叫。

例如，將滑鼠懸停在“登入”選單上時，會顯示“登入”按鈕，如下所示：

將滑鼠移出“登入”選單後，“登入”按鈕會隱藏，如下所示：

實現

使用 jQuery show 方法實現隱藏元素如下所示：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://www.amazon.com/");
      // show hidden element with invoke
      cy.get('#nav-flyout-ya-signin').invoke('show');
      //click hidden element
      cy.contains('Sign').click();
   });
});

執行結果

輸出結果如下所示：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://www.amazon.com/");
      // show hidden element with invoke
      cy.get('#nav-flyout-ya-signin').invoke('show');
      //click hidden element
      cy.contains('Sign').click();
   });
});

執行結果

輸出結果如下所示：

執行日誌顯示隱藏元素在步驟右側由一個圖標表示。

Cypress 還有另一種處理隱藏元素的技術。

例如，要單擊隱藏元素，我們可以使用 Cypress 命令 click 並將選項 {force : true} 作為引數傳遞給它 - click({ force: true })。

這會修改隱藏元素的隱藏特性，我們可以單擊它。

使用 click 實現

以下是使用包含選項的 click 在 Cypress 中進行實現：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://www.amazon.com/");
      //click hidden element
      cy.contains('Sign').click({force:true});
   });
});

執行結果

輸出結果如下所示：

執行日誌顯示已單擊隱藏元素（登入），並且我們已導航到下一頁。