赛普拉斯 angular 在 svg 上内联测试样式

Question

我必须测试这个 svg，现在不要问我为什么，我需要它并且我正在做一些测试！

 <svg class="custom-background" width="1864" height="441" style="background: linear-gradient(to right, rgb(255, 255, 255) 3.21888%, rgba(255, 0, 0, 0.1) 3.21888%) 0% 0% / auto 381px no-repeat;">
 </svg>

在我的文字中我这样写：

  cy.get('svg')
   .should(`have.attr', 'style', 'background: linear-gradient(to right, rgb(255, 255, 255) 91.4872%, rgba(255, 0, 0, 0.1) 91.4872%) 0% 0% / auto 403px no-repeat`);

我只是在尝试，因为以后我将不得不插入来自动态计算变量的百分比。但这是另外一回事。关键是已经这样做会给我一个错误：

chainer attr', 'style', 'background: linear-gradient(to right, rgb(255, 255, 255) 91 was not found. 可以不建立断言。

我不明白为什么，我第一次做这种测试，而且我在文档中找不到太多关于它的信息...

Answer 1

您可以使用 include.

添加要断言的值，而不是添加 style 属性的整个值

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

Answer 2

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

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

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

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

Answer 3

错误 “链接器属性”，'style'，“背景：线性梯度...” 是出现是因为你在错误的地方有反引号。

你有

`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;`)

赛普拉斯 angular 在 svg 上内联测试样式

Cypress angular test style inline on a svg

angular

testing

cypress

e2e-testing