Cypress 简明教程

Cypress - Mouse Actions

Cypress 可以处理隐藏元素。有时只有在将鼠标悬停在主菜单上时才会显示子菜单。这些子菜单最初使用 CSS 属性 display:none 制成隐藏状态。

Cypress can handle hidden elements. There are occasions when submenus get displayed only on hovering over the main menu. These submenus are initially made hidden with the CSS property display:none.

为了处理隐藏元素，Cypress 使用 jQuery 方法 show。它必须在 Cypress 命令（invoke['show']）的帮助下调用。

For handling hidden elements, Cypress takes the help of the jQuery method show. It has to be invoked with the help of the Cypress command (invoke['show']).

例如，将鼠标悬停在“Mouse Hover”按钮上时，Top 和 Reload 按钮会显示，如下所示：

For example, on hovering over the Mouse Hover button, the Top and Reload buttons get displayed, as shown below −

将鼠标移出“Mouse Hover”按钮时，Top 和 Reload 按钮会隐藏，如下所示：

On moving the mouse out of the Mouse Hover button, the Top and Reload buttons get hidden, as shown below −

Implementation with jQuery show method

下面是 Cypress 中使用 jQuery show 方法的实现：

Given below is the implementation with jQuery show method in Cypress −

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

Execution Results

输出如下 −

The output is as follows −

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

The execution logs show the hidden element – Top button represented by an icon at the right of the steps.