Question

84

How to check that element has either of classes in Cypress?

rated 0 times [ 87] [ 3] / answers: 1 / hits: 42039 / 4 Years ago, mon, may 25, 2020, 12:00:00

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?

I know I can do

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaylynbrynnk

Add To Favorites

Follow

Total Points: 706

Total Questions: 98

Total Answers: 91

Location: Israel

Member since Thu, Jan 7, 2021

3 Years ago

jaylynbrynnk questions

1 Using Redux Toolkit, how do I access the store from a non-react file?

Tue, Jan 11, 22, 00:00, 2 Years ago

1 VueJS getting TypeError: Cannot read properties of undefined when I delete and add an Sensor information

Mon, Sep 27, 21, 00:00, 3 Years ago

1 Listen to js variable change

Thu, Jan 28, 21, 00:00, 3 Years ago

1 Get File type in react js

Thu, Dec 24, 20, 00:00, 4 Years ago

1 Google maps Infowindow ReactJS

Sun, Jun 14, 20, 00:00, 4 Years ago

View All

answered 4 Years ago danar · Accepted Answer

Cypress .should() wraps chai assertions, so from how to do an “or” in chai should

the following html fragment

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

can be tested like this

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

    }) 



})

Notes

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



})