Selecting cypress elements that do not contain text with Cypress

Question

I am working on a test which runs into a dropdown with invalid selections. The dropdown does not disable these, you can click them, they simply read "unavailable" for the product.

<select readonly="" class="size-selector">
  <option value="">Size</option>
  <option value="XS">XS</option>
  <option value="S">S - Unavailable</option>
  <option value="M">M - Unavailable</option>
  <option value="L">L</option>
  <option value="XL">XL</option>
</select>

I want to be able to select the first option after Size which does not contain the text "Unavailable".

Answer 1

Cypress provides .filter() and the opposite .not() to filter lists.

cy.get('option')
  .not(':contains("Unavailable")')      // exclude Unavailable
  .not(':contains("Size")')             // exclude list header
  //.not('[value=""]')                  // alternative way to exclude list header
  .eq(0)                                // take the first
  .invoke('text')                       // get the text
  .then(firstAvailableOption => {
    cy.get('select.size-selector')
      .select(firstAvailableOption)     // use text to select option
  })

cy.get('select.size-selector')
  .invoke('val')
  .should('eq', 'XS')