css - 赛普拉斯：如何获取伪进度元素的属性，如 --webkit-progress-bar 或 --moz-progress-bar

问题描述

我有根据其值更改颜色的进度条组件，我想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 访问这些？它们显然在某个地方，因为条形正在改变颜色。

编辑：来自开发工具：

在 Firefox 中，伪元素是可见的：

在 Chrome 中它不是：

为此，Chrome 更为重要，因为 Cypress 使用的是 Chrome 浏览器。

编辑 2：HTML 结构：

右键 > 复制 > 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 > 表格 > tbody > tr:nth-child(2) > td.sc-ePZHVD.sc-eKZiaR.icnKcQ > 进度")

标签： csscypresspseudo-element

css - 赛普拉斯：如何获取伪进度元素的属性，如 --webkit-progress-bar 或 --moz-progress-bar

问题描述

解决方案

推荐阅读