我正在使用 React chakra-ui 構建一個 APP，我正在向它添加 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'
即使我可以從檢查元素中看到它確實具有以下屬性。
有誰知道解決方案或解決方法嗎？提前致謝！
編輯：
uj5u.com熱心網友回復：
--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))",
]
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338067.html
下一篇：如何使用反應在頁面上顯示擊鍵