Question

我想使用赛普拉斯测试框架添加一个悬停类。我应该使用什么命令或断言？

Answer 1

使用Cypress测试诸如：hover之类的css伪类可能很棘手，我不确定修改类是否是一个好方法。但是，这当然可以使用Puppeteer的page.hover（）方法来实现。

您可以在plugins / index.js下创建一个cypress任务，以启动Puppeteer（以防您想从Cypress内部控制测试），并返回所需的任何值来确认您的应用程序以预期的方式运行。

class

然后在您的.spec文件中，您可以按以下方式调用此任务：

const puppeteer = require('puppeteer');

//...

on('task', {
        async launchPuppeteer(param1, param2){
            const browser = await puppeteer.launch()
            const page = await browser.newPage();

            //do something

            await page.hover(someElementThatReactsToHover)

            //do other stuff

      return valuesForCypress
      }
})

Answer 2

这是一个小型的简单“ hackaround”，赛普拉斯缺乏悬停支持。我在CSS中将focus（）与：focus，：hover {// ...}一起使用。对于我从事的项目，通常会将焦点样式与鼠标悬停相匹配，因此，如果这样做，则可以使用此技巧。

假设您的CSS具有这种类型的结构：

<style>
  a {
    color: red;
  }
  a:hover,
  a:focus {
    color: blue;
  }
</style>

您可以使用cy.get（$ elm）.focus（）然后测试属性。以下是一个有效测试的完整示例。

cy.get('a.navigation__link')
    .not('a.navigation__link--active')
    .each($el => {
        cy.wrap($el).should('have.css', 'color', 'rgb(0, 0, 0)')
        cy.wrap($el).focus().should('have.css', 'color', 'rgb(211, 50, 57)')
    })

这里不试图引导任何人走错误的道路，这只是一种变通办法，可以帮助您获得与悬停相同的视觉效果，但是这并不是精确的悬停测试。

Answer 3

我建议你添加

.invoke('addClass', 'overDue')

到你的 cypress 测试以添加一个类

如何在赛普拉斯的CSS元素中添加类？

3 个答案: