Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I check an element for multiple CSS classes in Cypress?

How to check if an element has multiple classes? Couldn't find anything on the official docs, only:

cy.get('form').find('input').should('have.class', 'disabled')

or

expect($el).to.have.class('foo')

When inserting multiple class names, I get an error:

expect($el).to.have.class('foo bar baz')

Is there a solution?

like image 747
nikitahl Avatar asked May 17 '19 19:05

nikitahl


People also ask

How do you find the element of multiple classes?

To get HTML elements with both classes, we can use the getElementsByClassName or querySelectorAll methods. We call getElementsByClassName with 'class1 class2' to get the div with both class1 and class2 present. Likewise, we can do the same with querySelectorAll by using the “. class1.

Can an element have multiple CSS classes?

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them. If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations.

How do you check that element has either of classes in Cypress?

How can I check that the element has any of the two classes? cy. get(selector). invoke('attr','class').

How do I list multiple classes in CSS?

To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.


1 Answers

One way is to chain multiple assertions together using cy.and():

cy.get('div')
.should('have.class', 'foo')
.and('have.class', 'bar')
.and('have.class', 'baz')
like image 185
Zach Bloomquist Avatar answered Sep 25 '22 15:09

Zach Bloomquist