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

【问题标题】：How to check that element has either of classes in Cypress?如何检查该元素是否具有赛普拉斯中的任一类？
【发布时间】：2020-05-25 14:48:54
【问题描述】：

我们搜索无效元素如下：

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

但是如果课程不同怎么办？

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

【问题讨论】：

放入 .then 语句并使用调试器语句查看结果

标签： javascript cypress

【解决方案1】：

我想它对你有用：

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

【讨论】：

【解决方案2】：

Cypress .should() 包装 chai 断言，所以来自 how to do an “or” in chai should

以下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

})

【讨论】：

赛普拉斯应该为我们做这件事。 should.have.class 不同于比较整个班级列表。
有没有办法像这样传递 decalte ` const divEl = cy.get('div#1')` 并将其传递给hasAtLeastOneClass(expectedClasses, divEl) 函数？

【解决方案3】：

Cypress 应该提供 and 方法，该方法采用先前的主题（定位器），您可以使用 and 方法应用尽可能多的条件。

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

我希望这能解决您的问题...投票给这个答案以覆盖更多人。

【讨论】：

也许你对这个问题有点误解了。我正在寻找一种解决方案来检查它是否至少具有这些类。因此，如果它们都不存在，它将需要一系列类并且失败。如果元素中至少有一个，它将成功
我知道这并没有回答问题 - 但它确实帮助了我。谢谢。