如何向Cypress中的CSS元素添加类？

我想使用Cypress测试框架添加一个hover类。我应该使用什么命令或断言？

测试css伪类，如：hover可能会对Cypress很棘手，我不确定修改类是一种好方法。 然而，这当然可以通过Puppeter的page.hover（）方法实现

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

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
      }
})

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

cy.task('launchPuppeteer', {param1: 'whatever1', param2: 'whatever2'})
            .then(valuesForCypress => cy.wrap(valuesForCypress).should('eq', expectedValues))

这是一个简单的小“黑客”缺乏悬停支持的柏树。我在css中使用focus（）和：focus、：hover{//…}。对于我所从事的项目，我们通常将焦点样式匹配为悬停，因此如果您这样做，那么您可以使用此hack

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

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

---

在这里，不要试图引导任何人走上错误的道路，这只是一个解决办法，可以帮助您实现与hover相同的视觉效果，但是这不是一个精确的悬停测试。

您的问题没有真正意义-Cypress为什么要负责更新DOM？这是为了测试你用来更新DOM的任何东西是否正确。我想让Cypress检查用户悬停后是否发生了转换，并引用添加CSS类作为他们缺少悬停命令的解决方法引用了哪里？请澄清这个问题。

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)')
    })