CODEWITHSUNDEEP
automated-testscypress
Narine Poghosyan
Narine Poghosyan

Reputation: 893

How can I find classname an element with multiple classes in cypress

I'm a tester, and I have this HTML code.

<div id="columns">
    <div class="column ce-editable c1">
    </div> 
</div>

I'm using Cypress. I want to examine if there is 'c1' class name found in the div element. If I try:

cy.xpath ('//div[@id="columns"]//div')
        .should('have.class', 'c1')

I have this error:

CypressError: Timed out retrying: You attempted to make a chai-jQuery assertion on an object that is neither a DOM object or a jQuery object.
The chai-jQuery assertion you used was:
  > class
The invalid subject you asserted on was:
  > [<div.column.ce-editable.c1>]
To use chai-jQuery assertions your subject must be valid.
This can sometimes happen if a previous assertion changed the subject.

Upvotes: 4

Views: 10340

Answers (1)

Mr. J.
Mr. J.

Reputation: 3741

May I give you a whole other direction. It goes far, far away from using Xpaths :). What you can do to archive what you want is the following:

cy.get('#columns')
  .find('div')
  .should('have.class','c1')

This results in a few positive things: 1. It's easier to read what is happening 2. Debugging is easier, you'll see that Cypress tries to verify c1 in three steps. First find some ID with 'columns', than find a div below that and finish with asserting that the last searched div has a class called 'c1'. 3. The results show more neath since should() is actual an assertion instead of an action.

Upvotes: 3

Related Questions