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

执行结果

输出如下 -

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