Cypress - 滑鼠操作

Cypress可以處理隱藏元素。有時，子菜單隻有在將滑鼠懸停在主選單上時才會顯示。這些子選單最初使用CSS屬性display:none隱藏。

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

例如，將滑鼠懸停在“滑鼠懸停”按鈕上時，將顯示“頂部”和“重新載入”按鈕，如下所示：

將滑鼠移出“滑鼠懸停”按鈕後，“頂部”和“重新載入”按鈕將隱藏，如下所示：

使用jQuery show方法的實現

以下是使用Cypress中jQuery show方法的實現：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://learn.letskodeit.com/p/practice");
      // show hidden element with invoke
      cy.get('div.mouse-hover-content').invoke('show');
      //click hidden element
      cy.contains('Top').click();
   });
});

執行結果

輸出如下：

執行日誌顯示隱藏元素——步驟右側圖標表示的“頂部”按鈕。