赛普拉斯：访问自定义 css 属性

Question

我正在开发ui使用 React + chakra-ui 的应用程序，我正在向它添加 Cypress 测试，但我遇到了障碍，我想知道是否任何人都遇到过类似的问题，这可能会有所帮助！

问题：

我要通过的测试是验证我的元素是否包含 CSS 属性，但是，CSS 是由 Charkaui 生成的独特的语法（例如--chakra-scale-x）

我的测试用例如下

cy.get('MY_ELEMENT')
  .should('be.visible')
  .should('have.css', '--chakra-scale-y', 1);

这个测试给了我错误

expected '<div.css-o64oke>' to have CSS property '--chakra-scale-x'

尽管我可以从检查元素中看到它确实具有以下属性.

有谁知道解决方案或解决方法吗？提前致谢！

编辑：

Answer 1

--chakra-scale-y 是一个 css 变量，将由浏览器 css 引擎应用（可能作为转换）。

查看 devtools Computed 选项卡（取消选择 Show all 以仅查看应用的那些）。如果出现转换，这就是您需要测试的内容。

在测试中使用 getComputedStyle 检查上面标识的值。

cy.get('MY_ELEMENT')
  .then($el => {
    const win = cy.state('window')
    const styles = win.getComputedStyle($el[0])
    const transform = styles.getPropertyValue('transform')
    console.log(transform)
    expect(transform).to.eq(...)
  })

看来你需要检查scaleY，这是来自脉轮库

const transformTemplate = [
  "rotate(var(--chakra-rotate, 0))",
  "scaleX(var(--chakra-scale-x, 1))",
  "scaleY(var(--chakra-scale-y, 1))",
  "skewX(var(--chakra-skew-x, 0))",
  "skewY(var(--chakra-skew-y, 0))",
]

赛普拉斯：访问自定义 css 属性

Cypress: access custom defined css property

reactjs

cypress

chakra-ui