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

我有基于其值更改颜色的进度条组件，我想使用Cypress评估

背景颜色
属性。问题是，我找不到任何方法来获取实际存储背景色的伪元素。以下是我的样式（使用React和样式化组件）：

根据我找到的其他指南，我认为这些项目可能是影子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进度值或webkit进度条的属性。如何从Cypress或Javascript访问这些文件？它们显然在某个地方，因为这些条子正在变色

编辑：从开发工具：

在Firefox中，伪元素可见：

在Chrome中，它不是：

为此，Chrome one更为重要，因为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-jklik.gSjtyw.sc-bdVaJa.kceFjZ>div>table>tbody>tr:nth child（2）>td.sc-ephvd.sc-eKZiaR.icnKcQ>progress”）

这里是
如果你可以通过右键单击查看元素，那么可以在那里共享元素属性，也许我们可以给出解决方案。我添加了一些图片来显示我在Firefox和Chrome中看到的内容。我指的是包含html结构的部分。在那里你通常可以找到代码。选择它，然后右键单击该元素的html部分后，应该会出现菜单copy=>jspath。这通常帮助我获得一个选择器，尽管它并不完美。在那之后，我会使用cy，get（js.path）.project（'have.property'，'css'）。然后（css=>{//code to use the css}）刚刚编辑，我在伪元素的结构中没有看到任何东西，只有Ref，看起来你已经看到了，但是你的代码没有使用完整的伪选择器-应该是
const pseudo=win.getComputedStyle（$els[0]，“-webkit进度值”）
。这不是我需要的。progress元素不是我需要的目标，它是伪元素--webkit进度条或--webkit进度值。该值应该是rgb（255124,14）
尝试使用cy.wrap（win）。应该（'have.css'，'background color'，'rgb（255124,14）'isntead of cy.log。我的逻辑是-cypress是异步的，它可能没有在正确的时间计算它。我现在得到一个错误，当我这样做时，
无法读取未定义的
的属性“defaultView”。请尝试是否可以获得cy.log（win）而不是cy.wrap行？
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)
})

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