时间戳

首页 > 解决方案 > 赛普拉斯：访问自定义的 CSS 属性

reactjs - 赛普拉斯：访问自定义的 CSS 属性

问题描述

我正在使用 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'

即使我可以从检查元素中看到它确实具有以下属性。

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

编辑： 在此处输入图像描述

标签： reactjscypresschakra-ui

解决方案

--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))",
]

推荐阅读