使用赛普拉斯处理鼠标悬停在菜单上 [英] Handling Hover over menu's using Cypress

问题描述

我最近偶然发现了e2e工具-

解决方案

Cypress具有独特的工作流，该工作流基于将尽可能多的测试烘焙为默认行为。在模拟包含 Family的元素的点击之前，它会检查操作性。这是一个内置测试，如果元素被隐藏， display：none （在这种情况下），大小为0,0等，则将失败。仅在通过后测试会模拟包含'Family'的元素上的动作。

您可以使用覆盖可操作性检查。click（{force：true }），但是您无法保证用户实际上可以找到并单击该元素。

执行此测试的正确方法是触发下拉菜单，以使元素可见，然后单击。如果您想找到流派菜单项，显示下拉菜单，然后单击家庭项，则将执行以下操作：

  describe（'Hover Menu'，（）=> {
 it（'可以单击流派子菜单项'，（）=> {
 cy.get（' #menu'）。contains（'Genre'）。next（'。sub-menu'）。then（$ el => {
 cy.wrap（$ el）.invoke（'show'）
 cy.wrap（$ el）.contains（'Family'）。click（）
}）
}）
}）
  

在这里，显示是一种jQuery方法，可修改CSS属性以使该元素可见。

cy.wrap（$ el）可以将jQuery元素转换为Cypress Chainer，然后可以调用Cypress命令。

I recently stumbled upon the e2e tool - Cypress.io. I'm currently doing a POC for the firm I work with for e2e testing of a react app. It has a hover over menu like most of the web apps have now.

An example :

URL : Fmovies

I was trying to click a menu item from this hover over but the test fails saying that the display is set to none.

In Selenium, we use the moveElement approach to go to this element, and then do whatever we need to do. However, I'm failing to do so using Cypress.

Considering the current menu, I wrote this

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

Error :

解决方案

Cypress has a unique workflow that is based around baking in as many tests as possible into its default behavior. Before it simulates the click on the element containing "Family", it checks for actionability. This is a built in test that will fail if the element is hidden, display:none(that's the case here), size 0,0, etc. Only after it passes that test will it simulate the action on the element containing 'Family'.

You can override the actionability check by using .click({force:true}), but then you lose the guarantee that the user would actually be able to find and click on the element.

The proper way to do this test is to trigger the dropdown menu so that the element becomes visible, and then do the click. Here's what you would do if you wanted to find the "Genre" menu item, reveal the dropdown menu, and click the "Family" item:

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 is a jQuery method that modifies CSS properties to make the element visible.

cy.wrap($el) turns a jQuery element into a Cypress Chainer, which you can then call Cypress commands on.

这篇关于使用赛普拉斯处理鼠标悬停在菜单上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！