赛普拉斯 angular 在 svg 上内联测试样式
Cypress angular test style inline on a svg
我必须测试这个 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. 可以不建立断言。
我不明白为什么,我第一次做这种测试,而且我在文档中找不到太多关于它的信息...
您可以使用 include
.
添加要断言的值,而不是添加 style
属性的整个值
cy.get('svg')
.should('have.attr', 'style')
.and('include', '91.4872%')
我在 运行 检查主题包的测试中使用了类似的东西。我相信您将能够调整它以适合您。
cy.get(elementSelector).should('have.css', 'background-color',
(rgb(255, 255, 255)))
我不确定这是否有效,但请尝试
cy.get(elementSelector).should('have.svg', 'background-color',
(rgb(255, 255, 255)))
错误 “链接器属性”,'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;`)
我必须测试这个 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. 可以不建立断言。
我不明白为什么,我第一次做这种测试,而且我在文档中找不到太多关于它的信息...
您可以使用 include
.
style
属性的整个值
cy.get('svg')
.should('have.attr', 'style')
.and('include', '91.4872%')
我在 运行 检查主题包的测试中使用了类似的东西。我相信您将能够调整它以适合您。
cy.get(elementSelector).should('have.css', 'background-color',
(rgb(255, 255, 255)))
我不确定这是否有效,但请尝试
cy.get(elementSelector).should('have.svg', 'background-color',
(rgb(255, 255, 255)))
错误 “链接器属性”,'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;`)