在 svg 上内联 Cypress 角度测试样式

Answer 1

出现错误“The chainer attr'，'style'，'background：线性渐变...”，因为您在错误的位置有反勾号。

你有

`have.attr' 

但应该是这样

'have.attr'

因此将第一个反勾号替换为另一个匹配的单勾号。

那么你想要匹配的样式值应该以反勾开头，所以

`background: linear-gradient...`

而不是

'background: linear-gradient...`

最后，要插入动态值，请使用

${value}

例如

 const value1 = '91.4872%'
 const value2 = '381px'

 cy.get('svg')
 .should('have.attr', 'style', 
   `background: linear-gradient(to right, rgb(255, 255, 255) ${value1}, rgba(255, 0, 0, 0.1) ${value1}) 0% 0% / auto ${value2} no-repeat;`)

Answer 2

您可以使用

style

添加您想要断言的值，而不是添加

include

属性的整个值。

cy.get('svg')
  .should('have.attr', 'style')
  .and('include', '91.4872%')

Answer 3

我在运行检查主题包的测试中使用了类似的东西。我相信您能够调整它以适合您。

    cy.get(elementSelector).should('have.css', 'background-color', 
      (rgb(255, 255, 255)))

我不确定这是否有效，但请尝试

        cy.get(elementSelector).should('have.svg', 'background-color', 
          (rgb(255, 255, 255)))