如何检查元素在赛普拉斯中具有任一类?

Question

我们搜索无效元素，如下所示：

const invalidClasses = '.invalid, .invalid-default';
getInvalidElement() {
cy.get(invalidClasses)
};

现在我有另一个函数接受元素并检查它是否具有无效类：

isInvalid(selector) {
return cy.get(selector).should('have.class','invalid');
}

如何检查元素是否具有两个类中的任何一个？

我知道我能做到

cy.get(selector).invoke('attr','class').should('match','/invalid/');

但是，如果课程不同呢？

(条件测试也不适用于这种情况，无论是第一个类还是第二个类都没有逻辑，我们只是想要更多的抽象类来重用(

Answer 1

我想它会为你工作：

cy.get('section')
.should('have.class', 'container')

Answer 2

>赛普拉斯.should()包装柴断言，所以从如何在柴中做一个"or"应该

以下 HTML 片段

<div id="1" class="class1"></div>
<div id="2" class="class2"></div>
<div id="3" class="class1 class2"></div>
<div id="4" class="class3"></div>

可以像这样测试

it('finds either class1 or class2', () => {
cy.get('div#1')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList); 
return classList.includes('class1') || classList.includes('class2') // passes
}) 
cy.get('div#2')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList); 
return classList.includes('class1') || classList.includes('class2') // passes
}) // passes
cy.get('div#3')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList); 
return classList.includes('class1') || classList.includes('class2') // passes
}) 
cy.get('div#4')
.should('satisfy', ($el) => {
const classList = Array.from($el[0].classList); 
return classList.includes('class1') || classList.includes('class2') // fails
}) 
})

笔记

• 函数的参数是一个 jQuery 对象，因此使用$el[0]来引用该元素
• $el[0].classList返回一个类似于数组的DomTokenList，因此使用Array.from()将 Array 方法.includes()应用于它。

您还可以通过提取函数使事情变得更加通用，

it('finds either class1 or class2', () => {
const hasAtLeastOneClass = (expectedClasses) => {
return ($el) => {
const classList = Array.from($el[0].classList); 
return expectedClasses.some(expectedClass => classList.includes(expectedClass));
}
}
cy.get('div#1').should('satisfy', hasAtLeastOneClass(['class1', 'class2']));  //passes
cy.get('div#2').should('satisfy', hasAtLeastOneClass(['class1', 'class2']));  //passes
cy.get('div#3').should('satisfy', hasAtLeastOneClass(['class1', 'class2']));  //passes
cy.get('div#4').should('satisfy', hasAtLeastOneClass(['class1', 'class2']));  //fails
})

Answer 3

赛普拉斯应该提供和方法，该方法采用以前的主题(定位器(，你可以应用尽可能多的条件和方法。

cy.get('locator')
.should('have.class', 'validClassname')
.and('not.have.class', 'invalidClassname');

我希望这能解决你的问题...投票选出这个答案，以覆盖更多人。