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();
   });
});

执行结果

输出如下：

执行日志显示隐藏元素——步骤右侧图标表示的“顶部”按钮。