赛普拉斯测试伪CSS类：之前

Question

有没有一种方法可以测试伪CSS类的content：在使用赛普拉斯的元素之前？

我看到链接记录：

• Accessing nth-child pseudo element
• Accessing the actual content pseudo class of a normal CSS class

但我没有找到任何使用::before伪类的CSS类。

想象一下代码：

.myClass:before {
  content: "foo-";
}

<div>
  <span class="myClass">Bar</span>
</div>

如何测试'foo-'是否存在？

Answer 1

有一种方法可以断言伪元素的CSS属性，尽管它并不像使用赛普拉斯命令那么简单。

1. 使用cy.get()获取元素的引用。
2. 从元素中读取Window对象，然后调用Window.getComputedStyle(), which can read the computed CSS of pseudo selectors.
3. 在返回的CSS声明中使用getPropertyValue来读取content属性的值。
4. 断言。

这是一个适用于OP中发布的代码的示例：

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 returned value will have double quotes around it, but this is correct
  expect(contentValue).to.eq('"foo-"')
})

Answer 2

尝试断言父母的文本：

cy.get('.myClass').parent().should('have.text', 'foo-bar')

如果这不起作用，您可能必须使用textContent属性：

cy.get('.myClass').parent(). should($el => expect ($el).to.contain('foo-bar')
)