如何检查该元素在赛普拉斯中是否具有任一类？

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/');

但是，如果课程不同呢？

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

原文由 MCFreddie777 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

赛普拉斯 .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() 对其应用数组方法 .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

})

原文由 Richard Matsen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我想这对你有用：

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

原文由 Mohammad Jamal Dashtaki 发布，翻译遵循 CC BY-SA 4.0 许可协议