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

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等，它将失败。只有在它通过该测试之后才会模拟包含'的元素上的动作家庭”。

您可以使用.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命令。