Cypress - 隐藏元素

Cypress可以处理隐藏的元素。有时，子菜单仅在将鼠标悬停在主菜单上时才会显示。这些子菜单最初是通过级联样式表 (CSS) 属性 display:none 隐藏的。

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

例如，将鼠标悬停在“登录”菜单上时，将显示“登录”按钮，如下所示 -

将鼠标移出“登录”菜单后，“登录”按钮将被隐藏，如下所示 -

执行

使用 jQuery show 方法实现隐藏元素如下 -

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://www.amazon.com/");
      // show hidden element with invoke
      cy.get('#nav-flyout-ya-signin').invoke('show');
      //click hidden element
      cy.contains('Sign').click();
   });
});

执行结果

输出如下 -

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://www.amazon.com/");
      // show hidden element with invoke
      cy.get('#nav-flyout-ya-signin').invoke('show');
      //click hidden element
      cy.contains('Sign').click();
   });
});

执行结果

输出如下 -

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

Cypress还有另一种处理隐藏元素的技术。

例如，要单击隐藏元素，我们可以使用 Cypress 命令 click 并将选项 {force : true} 作为参数传递给它 - click({ force: true })。

这修改了隐藏元素的隐藏特性，我们可以点击它。

点击实施

下面给出的是Cypress中单击选项的实现 -

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://www.amazon.com/");
      //click hidden element
      cy.contains('Sign').click({force:true});
   });
});

执行结果

输出如下 -

执行日志显示单击的隐藏元素（登录），我们将导航到下一页。