如何使用Cypress.io判断激活标签的类存在性及标签点击状态

1. 判断激活标签的类状态 #

针对你的HTML结构，初始状态下Test1带有active类，可通过以下方式验证：

验证单个类存在 #

// 断言Test1包含active类
cy.contains('a', 'Test1').should('have.class', 'active');

验证完整类属性值 #

如果需要精确匹配类组合，可直接断言class属性：

cy.contains('a', 'Test1').should('have.attr', 'class', 'class1 active');

当点击标签切换状态后，还可以验证状态变化：

// 点击Test2切换激活状态
cy.contains('a', 'Test2').click();
// 断言Test2现在是激活状态
cy.contains('a', 'Test2').should('have.class', 'active');
// 断言Test1不再处于激活状态
cy.contains('a', 'Test1').should('not.have.class', 'active');

2. 验证标签点击触发状态切换 #

要确认Test1或Test2被点击后状态正常切换，核心是验证点击前后的类变化：

测试Test1的点击切换逻辑 #

// 初始状态：Test1处于激活状态
cy.contains('a', 'Test1').should('have.class', 'active');
// 点击Test1取消激活
cy.contains('a', 'Test1').click();
cy.contains('a', 'Test1').should('not.have.class', 'active');
// 再次点击Test1恢复激活
cy.contains('a', 'Test1').click();
cy.contains('a', 'Test1').should('have.class', 'active');

测试Test2的点击切换逻辑 #

// 初始状态：Test2未激活
cy.contains('a', 'Test2').should('not.have.class', 'active');
// 点击Test2激活
cy.contains('a', 'Test2').click();
cy.contains('a', 'Test2').should('have.class', 'active');
// 同时验证Test1失去激活状态
cy.contains('a', 'Test1').should('not.have.class', 'active');

你之前代码的问题说明 #

1. Cypress默认使用CSS选择器，你写的//a[contains(text(),'Test1']是XPath语法，无需额外插件的话，用cy.contains('a', 'Test1')更简洁可靠
2. should('have.class')必须传入具体类名，比如should('have.class', 'active')，空调用没有意义
3. have.value不适用于a标签，a标签的类属性需要用have.attr('class')或have.class来断言

内容的提问来源于stack exchange，提问作者Krishna