如何在Cypress中断言ag-grid过滤后出现的::before伪元素？

由于::before伪元素不属于DOM树的一部分，无法直接通过常规DOM定位方式获取，需要借助计算样式来断言其状态，具体操作如下：

• 定位到承载伪元素的目标DOM节点（即示例中的.ag-icon.ag-icon-filter span元素）
• 通过window.getComputedStyle()获取该元素的::before伪元素样式
• 根据业务需求断言样式属性（比如content、display等）

示例代码 #

cy.get('.ag-icon.ag-icon-filter')
  .then($element => {
    // 获取当前元素所属的window对象
    const win = $element[0].ownerDocument.defaultView;
    // 获取::before伪元素的计算样式
    const beforeStyle = win.getComputedStyle($element[0], '::before');
    
    // 断言伪元素已显示（比如content不为none，或display为可见状态）
    expect(beforeStyle.content).to.not.equal('none');
    // 也可以断言display属性，根据实际样式调整值
    expect(beforeStyle.display).to.equal('block');
  });

断言隐藏状态 #

如果需要验证伪元素已隐藏，只需反向断言对应属性：

expect(beforeStyle.content).to.equal('none');
// 或
expect(beforeStyle.display).to.equal('none');

内容的提问来源于stack exchange，提问作者Anil Tiwari