Cypress：如何获取伪进度元素的属性，如 --webkit-progress-bar 或 --moz-progress-bar

如何解决Cypress：如何获取伪进度元素的属性，如 --webkit-progress-bar 或 --moz-progress-bar

我有根据其值改变颜色的进度条组件，我想使用 Cypress 评估 background-color 属性。问题是，我找不到任何方法来获取实际存储背景颜色的伪元素。这是我的样式（使用 React 和样式组件）：

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)
})

当我记录上面 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 > table > tbody > tr:nth-child(2) > td.sc-ePZHVD.sc-eKZiaR.icnKcQ > 进度”)

解决方法

好的，所以您需要获取元素，只需 validate its css

cy.get('[data-test="macroTable-fatBar"]')
       .should('have.css','background-color','rgb(0,0)')

这里是official docs