Search code examples
css-selectorsjquery-selectorscypress

Why cypress fails to identify if we give full class name

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

Solution

  • .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);