【发布时间】：2021-01-08 12:59:11
【问题描述】：
我的进度条组件会根据它们的值改变颜色，我想使用 Cypress 评估 background-color 属性。麻烦的是，我找不到任何方法来获取实际存储背景颜色的伪元素。这是我的样式（使用 React 和 styled-components）：
const MacroBar = styled.progress`
-webkit-appearance: none;
appearance: none;
width: ${props => (props.barSize === 'large' ? '146px' : '80px')};
height: ${props => (props.barSize === 'large' ? '8px' : '6px')};
border: none;
border-radius: ${props => (props.barSize === 'large' ? '6px' : '3px')};
::-webkit-progress-bar {
background-color: ${colors.primary100};
border-radius: ${props => (props.barSize === 'large' ? '6px' : '3px')};
}
::-webkit-progress-value {
background-color: ${props =>
props.over
? colors.error
: props.color === 'teal'
? colors.secondary400
: colors.hliteone400};
border-radius: ${props => (props.barSize === 'large' ? '6px' : '3px')};
}
::-moz-progress-bar {
background-color: ${props =>
props.over
? colors.error
: props.color === 'teal'
? colors.secondary400
: colors.hliteone400};
border-radius: ${props => (props.barSize === 'large' ? '6px' : '3px')};
}
`;
根据我找到的其他指南，我认为这些项目可能是影子 DOM 的一部分，但事实证明 progress 元素上没有影子根。接下来，我尝试了这个：
cy.getBySel('macroTable-fatBar')
.then($els => {
// get Window reference from element
const win = $els[0].ownerDocument.defaultView
// use getComputedStyle to read the pseudo selector
const pseudo = win.getComputedStyle($els[0], 'webkit-progress-value')
// read the value of the `content` CSS property
const color = pseudo.getPropertyValue('background-color')
console.log(color) // comes back as rgb(0, 0, 0)
})
当我记录上面pseudo 的值时，我什至看不到 webkit-progress-value 或 webkit-progress-bar 的属性。如何从 Cypress 或 Javascript 访问这些？它们显然在某个地方，因为条形正在改变颜色。
编辑：来自开发工具：
为此，Chrome 更为重要，因为 Cypress 使用的是 Chrome 浏览器。
右键>复制>JS路径 document.querySelector("#root > div.sc-coaFxK.gDjsDI > div > div > div.sc-bjPkoM.gIVEZf.sc-bdVaJa.btEwTU > div:nth-child(2) > div > div.sc-jklikK .gSjtyw.sc-bdVaJa.kceFjZ > div > table > tbody > tr:nth-child(2) > td.sc-ePZHVD.sc-eKZiaR.icnKcQ > progress")
【问题讨论】：
-
如果您可以通过右键单击查看带有检查功能的元素 - 在那里共享元素属性，也许我们可以提供解决方案。
-
我添加了图片来展示我在 Firefox 和 Chrome 中看到的内容。
-
我的意思是包含html结构的部分。在那里你通常可以找到代码。选择它然后右键单击该元素的 html 部分后，应该有 menu copy=>js path 。这通常可以帮助我获得一个选择器，但它并不完美。之后我会使用 cy,get(js.path).should('have.property', 'css').then(css=>{//code to use the css})
-
刚刚编辑，我在结构中没有看到伪元素的任何内容，只有
-
Ref Cypress testing pseudo CSS class :before，看起来你已经看到了，但你的代码没有使用完整的伪选择器 - 应该是
const pseudo = win.getComputedStyle($els[0], '-webkit-progress-value')。
标签： css cypress pseudo-element