svg 上的 Cypress 角测试样式内联答案

【问题标题】：Cypress angular test style inline on a svgsvg 上的 Cypress 角测试样式内联
【发布时间】：2021-11-09 08:56:12
【问题描述】：

我必须测试这个 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`);

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

找不到链接器 attr', 'style', 'background: linear-gradient(to right, rgb(255, 255, 255) 91。无法建立断言。

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

【问题讨论】：

您要断言样式属性的整个值还是部分文本？

标签： angular testing cypress e2e-testing

【解决方案1】：

出现错误“The chainer attr', 'style', 'background: linear-gradient...” 因为您在错误的地方。

你有

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

【讨论】：

【解决方案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)))

【讨论】：

【解决方案3】：

您可以只添加要使用include 断言的值，而不是添加style 属性的整个值。

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

【讨论】：