如何测试按钮的焦点和悬停效果（截图/&::after）？

Question

如何测试按钮的焦点和悬停效果（截图/&::after）？

sasshovercypress

3

似乎我找不到在Cypress中正确的方法来做这件事。

我想测试我的按钮的悬停和焦点状态。

我尝试的第一件事是使用cypress-image-snapshot对整个组件进行截图，而不仅仅是按钮，当我在元素上使用realhover，但似乎不起作用。

我尝试的第二件事是通过CSS，但这也不起作用，因为当元素处于焦点状态时，我的&::after的背景颜色会通过scss变量进行更改，而我无法通过cypress获取该变量。

有人有任何想法或者有解决这些状态测试的方法吗？

- Maxime Ghéraille

2个回答

0

既然你已经尝试过CSS变量和截图，你也可以尝试以下方法：

触发事件：你可以使用.trigger()手动触发事件，比如'mouseover'、'mouseenter'、'focus'等。在触发这些事件后，你可以断言在悬停或聚焦期间应该存在的样式或行为。
存根或监视：如果悬停或聚焦触发了某个函数，你可以使用cy.spy()或cy.stub()来检查这些函数是否被调用。

Cypress直接操作元素，因此某些浏览器行为（如悬停）可能与真实用户交互时不完全相同。

- Jimmy Kurian

谢谢，那么当使用触发器时，我如何能够获取到 &::after 的背景颜色？现在我只能获取到 a 标签的背景颜色。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aladin Spaz · Accepted Answer

我不会选择截图的方式，而是在悬停时测试元素的CSS。

但是，cypress-real-events中的.realHover()是设置测试条件的最简单方法。

cy.get('a[href="https://www.w3schools.com"]')
  .realHover()
  .then($el => {
    return window.getComputedStyle($el[0], ':after')  // pass pseudo in a 2nd parameter
      .getPropertyValue('background-color')
  })
  .should('eq', 'rgb(255, 255, 0)')  // ✅ passes

测试了这个页面

<html>
  <head>
    <style>
      :hover {
        --backgroundColor: yellow;
      }

      a::after {
        background-color: var(--backgroundColor);
      }
    </style>
  </head>
  <body>
    <h1>Demo of the :hover selector</h1>
    <p>The :hover selector style links on mouse-over:</p>
    <a href="https://www.w3schools.com">w3schools.com</a>
    <a href="https://www.wikipedia.org">wikipedia.org</a>
  </body>
</html>

注释掉 .realHover()，结果是 rgb(0, 0, 0)。

SCSS

别管 SCSS 变量了，它在页面服务时会被编译掉。

Cypress 测试只能看到最终的 CSS。