验证按钮单击，直到禁用使用Cypress
验证按钮单击，直到禁用使用Cypress
提问于 2022-03-09 14:18:47
我试图验证一个按钮点击使用Cypress。我应该能够点击按钮时，有幻灯片可用。如果没有幻灯片，则不应单击该按钮，并通过向该按钮添加禁用类来禁用该按钮。有人能提出一个更好的解决方案来验证这个场景吗？
下面是下一张幻灯片可用时的HTML代码：
<button class="arrow"><span class="screen-reader-only">Previous slide</span></button>当下一个幻灯片不可用并添加禁用类时，将添加HTML代码：
<button class="arrow disabled"><span class="screen-reader-only">Previous slide</span></button>我试图验证的Cypress代码：
it('Validate the button is clickable',()=> {
cy.get('.arrow')
.then(($btn) => {
if($btn.is(":disabled")){
$btn.should('have.class','disabled')
.and('have.css','background-color','rgb(62, 64, 69)')
cy.log('Arrow is disabled and not clickable')
} else {
cy.wrap($btn).click()
expect($btn).to.have.css('background-color','rgb(172, 42, 0)')
}
})回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-09 14:58:44
还可以使用.hasClass('disabled')，因为添加了一个禁用的类。另外，由于有多个箭头按钮，所以使用each而不是then。
it('Validate the button is clickable', () => {
cy.get('.arrow')
.should('be.visible')
.each(($btn) => {
if ($btn.hasClass('disabled')) {
cy.wrap($btn)
.should('have.class', 'disabled')
.and('have.css', 'background-color', 'rgb(62, 64, 69)')
cy.log('Arrow is disabled and not clickable')
} else {
expect($btn).to.have.css('background-color', 'rgb(172, 42, 0)')
cy.wrap($btn).click()
}
})
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71410813
复制相关文章
相似问题
腾讯云开发者
