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

Question

我最近偶然发现了e2e工具 - Cypress.io。我正在为我合作的公司做一个POC，用于e2e测试反应应用程序。它像现在大多数网络应用程序一样悬停在菜单上。

一个例子 ：

网址：Fmovies

我试图点击这个悬停的菜单项，但测试失败说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”的元素的点击之前，它是checks for actionability。这是一个内置测试，如果元素被隐藏，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，然后您可以调用赛普拉斯命令。