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

Question

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

一个例子 ：

网址：电影

我试图从该悬停上单击菜单项，但测试失败，说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

赛普拉斯具有独特的工作流，该工作流基于将尽可能多的测试烘烤为默认行为。在模拟包含“ Family”的元素的点击之前，它会检查操作性。这是一个内置测试，如果隐藏了元素display:none（在这种情况下），大小为0,0等，则将失败。仅在通过该测试后，它才会模拟对包含“ Family”的元素的操作。

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

进行此测试的正确方法是触发下拉菜单，以使该元素变得可见，然后单击。如果要查找“流派”菜单项，显示下拉菜单，然后单击“家庭”项，则将执行以下操作：

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命令。