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

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