如何在 cypress 中断言 ::before

Question

我有一个 ag-grid，如链接 https://www.ag-grid.com/example/所示

当我将银行余额过滤到 1114 时

此过滤器图标出现在银行余额之前

假设我没有任何其他选项，除了::before通过添加和删除过滤器值**出现和消失

<span class="ag-icon ag-icon-filter" unselectable="on" role="presentation">
::before
</span>

**

那么我如何::before仅对关键字进行断言

Answer 1

你所寻找的元素不是普通元素，而是CSS引擎添加的伪元素。因此，普通元素选择器无法访问它。

所选元素使用::before返回其内容，但如果不使用伪元素，则返回“none”。

利用此信息，您可以创建自定义命令以使其更易于测试。

Cypress.Commands.add('hasPseudoElement', {prevSubject:true}, (subject, pseudo) => {
  return window.getComputedStyle(subject[0], pseudo).content !== 'none'
})

// when filtered
cy.get('span.ag-icon')
  .hasPseudoElement('::before')
  .should('eq', true)
  
// when not filtered
cy.get('span.ag-icon')
  .hasPseudoElement('::before')
  .should('eq', false)
  
// another example, ::after (not present)
cy.get('span.ag-icon')
  .hasPseudoElement('::after')  
  .should('eq', false)

这将告诉您网格列是否被过滤。