Cypress测试时如何获取并校验Chakra UI生成的自定义CSS属性？

解决方案 #

你遇到的问题由两个常见原因导致，对应解决方法如下：

• 首先检查变量名是否匹配：你给出的测试代码校验的是--chakra-scale-y，但报错日志提示找不到的是--chakra-scale-x，先确认你要校验的目标变量名和代码里写的完全一致。
• Cypress 内置的have.css断言对CSS自定义属性（变量）的支持存在限制，你可以通过手动获取元素计算样式的方式实现校验，代码示例如下：

cy.get('MY_ELEMENT')
  .should('be.visible')
  .then($el => {
    // 获取元素的最终计算样式
    const computedStyle = window.getComputedStyle($el[0])
    // 提取自定义变量值，trim去除多余空白字符
    const scaleYVal = computedStyle.getPropertyValue('--chakra-scale-y').trim()
    // 注意：自定义属性返回值为字符串类型，要和字符串'1'做对比
    expect(scaleYVal).to.equal('1')
  })

如果你的Chakra自定义变量是直接写在元素的内联style属性中，还可以用更简单的断言方式：

cy.get('MY_ELEMENT')
  .should('be.visible')
  .invoke('attr', 'style')
  .should('include', '--chakra-scale-y: 1')

你可以参考下面的元素属性截图确认变量的实际挂载位置：

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