使用 Cypress 实现鼠标悬停操作


鼠标悬停操作在网页中非常常见,当我们悬停在某个元素上时,会显示一系列元素列表。Cypress 不像 Selenium 等其他自动化工具那样支持鼠标悬停操作,因为它认为这种操作不稳定

Cypress 将操作 DOM 元素以执行鼠标悬停操作。Cypress 利用 JQuery 中的 show() 方法。show() 方法显示隐藏的元素(具有 CSS 属性display:none)并将其选中。此外,show() 方法仅对隐藏元素在 DOM 中的直接父级起作用。

现在,为了调用任何 JQuery 函数,Cypress 利用invoke() 命令,该命令用于调用函数。invoke() 方法不能直接与 cy 链接。

语法

.invoke(name of function)
.invoke(options, name of function)
.invoke(name of function, arguments..)
.invoke(name of function, arguments..)
.invoke(options, name of function, arguments…)

函数名称指的是要调用的函数。此外,我们可以向函数调用传递其他参数,并且对参数数量没有限制。

如下所示,可以有两种类型的选项可以修改 .invoke() 的默认行为:

  • log - log 的默认值为 true。

  • timeout - timeout 参数的默认值为 defaultCommandTimeout(4000 毫秒)。这是等待 .invoke() 完成的持续时间。

cy.get('#txt').invoke('show')

示例

使用 JQuery show() 方法的编码实现。

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case5', function (){
      // launch the application
      cy.visit("https://www.amazon.com/");
      // to display hidden element with invoke() with show
      cy.get('#nav-flyout-ya-signin').invoke('show');
      //click on the hidden element
      cy.contains('Sign').click();
      //assert to verify the url
      cy.url().should('include','signin');
   });
});

Cypress 还有另一种解决方法来点击仅在页面上鼠标悬停操作时出现的隐藏元素。这是通过将选项作为参数传递给 Cypress 中的 click() 命令来完成的。

click({ force: true }) - 将 force 选项设置为 true [force:true] 的 click() 命令会修改隐藏元素的默认行为,我们可以点击它。

语法

cy.get('.butn').click({ force: true })

示例

使用 force 选项处理隐藏元素的编码实现。

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case5', function (){
      // launch the application
      cy.visit("https://www.amazon.com/");
      //click on the hidden element with option force set to true
      cy.contains('Sign').click({force:true});
      //assert to verify the url
      cy.url().should('include','signin');
   });
});

更新于: 2020-08-05

2K+ 浏览量

开启你的职业生涯

通过完成课程获得认证

开始学习
广告