使用 Cypress 处理悬停在菜单上

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

一个例子 ：

URL : Fmovies

我试图从鼠标悬停中单击一个菜单项，但测试失败，表明display被设定为none.

在 Selenium 中，我们使用moveElement方法转到这个元素，然后做我们需要做的事情。但是，我无法使用 Cypress 做到这一点。

考虑到当前的菜单，我写了这个

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

Error :

赛普拉斯拥有独特的工作流程，该工作流程基于将尽可能多的测试烘焙到其默认行为中。在模拟点击包含“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()
        })
    })
})

Here, show是一个 jQuery 方法，它修改 CSS 属性以使元素可见。

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