9

我最近偶然发现了 e2e 工具 - Cypress.io。我目前正在为与我合作的公司进行 POC，以对 react 应用程序进行 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();
            });
        });
    });

错误 ： 错误

4

1 回答 1

9

赛普拉斯有一个独特的工作流程，它基于将尽可能多的测试烘焙到其默认行为中。在模拟点击包含“Family”的元素之前，它会检查可操作性。这是一个内置测试，如果元素被隐藏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 命令。

于 2018-02-18T18:08:22.107 回答