如何检查该元素在 Cypress 中是否具有任一类？

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

Cypress.should()包装了 chai 断言，所以从如何在 chai 中做一个“或”应该

下面的 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 2

我想它对你有用：

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