使用赛普拉斯处理悬停在菜单上

Question

我最近偶然发现了 e2e 工具 - Cypress.io。我目前正在为与我合作的公司做 POC，以对 React 应用程序进行端到端测试。它有一个悬停在菜单上的菜单，就像现在大多数网络应用程序一样。

一个例子：

我试图通过悬停单击菜单项，但测试失败，显示 display 设置为 none。

在Selenium中，我们使用moveElement的方法去到这个元素，然后做任何我们需要做的事情。但是，我没有使用赛普拉斯这样做。

考虑到现在的菜单，我写了这个

it('goes to specific element in Genre',()=>{
        cy.get('#menu').within(()=>{
            cy.get('ul').within(()=>{
                cy.contains('Family').click();
            });
        });
    });

错误：

Answer 1

Cypress 有一个独特的工作流程，它基于将尽可能多的测试融入其默认行为。在它模拟点击包含 "Family" 的元素之前，它是 checks for actionability。这是一个内置测试，如果元素被隐藏，display:none（这里就是这种情况），大小 0,0 等，它将失败。只有在通过该测试后，它才会模拟对包含 [ 的元素的操作=29=].

您可以使用 .click({force:true}) 覆盖可操作性检查，但这样您就无法保证用户实际上能够找到并单击该元素。

进行此测试的正确方法是触发下拉菜单，使元素可见，然后单击。如果您想找到 "Genre" 菜单项，显示下拉菜单，然后单击 "Family" 项，您将执行以下操作：

describe('Hover Menu',()=>{
    it('can click on a genre sub-menu item',()=>{
        cy.get('#menu').contains('Genre').next('.sub-menu').then($el=>{
            cy.wrap($el).invoke('show')
            cy.wrap($el).contains('Family').click()
        })
    })
})

这里，show是一个jQuery方法，修改CSS属性使元素可见。

cy.wrap($el) 将 jQuery 元素转换为 Cypress Chainer，然后您可以在其上调用 Cypress 命令。

使用赛普拉斯处理悬停在菜单上

Handling Hover over menu's using Cypress

javascript

e2e-testing

cypress