Cypress hoverover GUI效果测试

Question

我现在开始使用 cypress 来更好、更深入地学习。 我面临一个我无法处理的问题。 问题是某种 GUI 效果与鼠标 hover 一起使用。 将鼠标悬停在元素上时，我看不到任何信息更改为 DOM。 只有::before 和::after 单词出现。 我想我必须用一些 javascript 技巧来解决这个问题。 不幸的是，我是 javascript 的新手，我不知道如果你能帮助我，我会很高兴。 谢谢！ （我想以某种方式断言是否显示灰色背景和加号图标）

一般看起来像这样

鼠标悬停在这个灰色背景上并出现加号图标后

你可以在这里看到元素 DOM

你可以看到鼠标悬停元素后的变化

Answer 1

您可以使用cypress-real-events插件。 要安装使用命令：

npm i cypress-real-events

然后在你的cypress/support/e2e.{js,ts}里面，写：

import "cypress-real-events/support";

在您的代码中，您可以直接编写：

cy.get("selector").realHover('mouse')
//Add assertions

注意：由于上述插件使用 Chrome DevTools 协议来模拟原生事件，因此这仅适用于基于 Chromium 的浏览器，因此没有 firefox。

Answer 2

进入赛普拉斯的测试尝试在 hover 命令之后使用方法cy.wait("time here") 。 这非常简单，但对于视觉测试来说非常有用。

Answer 3

为了访问元素的:before或:after ，我们必须做一点 Cypress 和 JavaScript 魔术。 这个答案主要来自这个链接。

cy.get('.myClass')
.then($els => {
  // get Window reference from element
  const win = $els[0].ownerDocument.defaultView
  // use getComputedStyle to read the pseudo selector
  const before = win.getComputedStyle($els[0], ':before')
  // read the value of the `content` CSS property
  const contentValue = before.getPropertyValue('content')
  
  // The above lines are just how we tell Cypress to get the `:before` value. 
  // There isn't a ton to understand outside of really diving into how elements and windows work together

  expect(content).to.equal('foo');
})

所以，使用同样的例子，如果我们想检查 CSS 样式的font-size ，它看起来像这样：

cy.get('.myClass')
.then($els => {
  const win = $els[0].ownerDocument.defaultView
  const before = win.getComputedStyle($els[0], ':before')
  const fontSize = before.getPropertyValue('font-size')
  expect(fontSize).to.equal('20');
})

这也可以应用于:after ，将($els[0], ':before')更改为($els[0], ':after') 。

Answer 4

查看您的屏幕截图，我认为您有一个覆盖原始事件元素的灰色叠加元素。

我可以建议的唯一代码来自有限的信息是

cy.get('#IN-578')
  .trigger('mouseover')
  .should('not.be.visible')

叠加层的不透明度为 50%，因此您仍然可以看到事件详细信息，但从赛普拉斯的角度来看，事件已被覆盖，因此不会“可见”。

如果您对“鼠标悬停”没有任何运气，请尝试cypress-real-events中的.realHover() 。

---

在上面的代码之后，您应该在 DOM 中查找覆盖元素和中间的+图标，select 那个图标并单击它以执行操作。