Why cypress fails to identify if we give full class name

0
votes

If I am giving the full class name for example: title-text-panel-container class-about-benefits > ul cypress fails to identify the element and throws below error CypressError: Timed out retrying: Expected to find element: '.title-text-panel-container class-about-benefits > ul', but never found it. Why cypress fails to identify if we give full class name in the test ? But it passes the test as we give the class name as per Test 2.

Test 1: Fails

cy.get('.title-text-panel-container class-about-benefits > ul').find('li').its('length').should('be.gte', 1);

Test: 2 Passes

cy.get('.title-text-panel-container > ul').find('li').its('length').should('be.gte', 1);

enter image description here

2
css-selectorsjquery-selectorscypress
Did you try it with a '.' before the second class, cy.get('.title-text-panel-container .class-about-benefits > ul') – user8745435
I always use the longer form cy.get('[class^=something]') - means the class list starts with 'something', or cy.get('[class*=something]') - means the class list contains 'something'. – user8745435
I didn't try with . before the second class, I thought it was considered as a single class. Anyway thanks for explaining that. Second or third option is more easy shorter version cy.get('[class^=something]') or cy.get('[class*=something]') – soccerway

2 Answers

1
votes

.classA .classB selector implies classB to be descendant of classA. If you want to specify multiple classes of a single DOM element (to increase specificity), you must not add a space between them: .classA.classB.

In your case, it'd be:

cy.get('.title-text-panel-container.class-about-benefits > ul').find('li').its('length').should('be.gte', 1);
-1
votes

Try cy.get('.title-text-panel-container .class-about-benefits > ul')