List item with text tag

📺 Watch this recipe explained in the video Learn :has and :contains CSS Selectorsopen in new window.

    <span class="badge badge-primary">selected</span>
    <span class="badge badge-secondary">out of stock</span>

First, lets practice the :has selector. Let's find the li items with span elements inside

cy.get('li:has(span)').should('have.length', 2)

Let's find 'li' elements with child elements with class 'badge-primary' inside

cy.get('li:has(span.badge-primary)').should('have.length', 1)

Let's find badge with "out of stock" text using :contains selector

cy.get('.badge:contains("out of stock")')
  .should('include.text', 'Tomatoes')

Let's combine :has and :contains selectors and find li elements that have span elements inside with text "selected"