如何检查赛普拉斯中的任何一个元素? [英] How to check that element has either of classes in Cypress?

查看:47
本文介绍了如何检查赛普拉斯中的任何一个元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我们搜索无效元素,如下所示:

We search for an invalid element as following:

const invalidClasses = '.invalid, .invalid-default';

getInvalidElement() {
    cy.get(invalidClasses)
};

现在,我有另一个函数可以接受该元素并检查其是否具有无效的类:

Now I have another function which accepts the element and checks if it has the invalid classes:

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

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

How can I check that the element has any of the two classes?

我知道我能做

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

但是,如果类别不同,该怎么办?

But what if the classes were different?

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

(Also the conditional testing does not apply to this case, there is no logic whether it's the first of the classes or the second one, we just want more abstract class for reusing)

推荐答案

Cypress .should()包装chai断言,因此来自

Cypress .should() wraps chai assertions, so from 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 返回一个类似于 array 的DomTokenList,因此请使用 Array.from()来应用数组方法 .includes().
  • the param to the function is a jquery object, so use $el[0] to reference the element
  • $el[0].classList return a DomTokenList which is array-like, so use Array.from() to apply the Array method .includes() to it.

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

You can also make things a bit more generic by extracting the function,

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

})

这篇关于如何检查赛普拉斯中的任何一个元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆