使用Cypress处理菜单上的悬停

Cypress有一个独特的工作流,该工作流基于在尽可能多的测试中烘焙到其默认行为。在模拟单击包含“族”的图元之前,它将 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链表,然后可以在其上调用Cypress命令。