# Sorted by discount price

.price {
  font-weight: bolder;
.price .old-price {
  font-weight: 100;
  text-decoration: line-through;

Notice that some entries in the list have two prices. We want to ignore the old price, and take the current discounted price when checking the sorted list.

<ol id="fruits">
  <li>Oranges <span class="price">$0.99</span></li>
  <li>Mango <span class="price">$1.01</span></li>
    <span class="price"
      ><span class="old-price">$2.70</span>
    <span class="price"
      ><span class="old-price">$3.00</span>
  <li>Bananas <span class="price">$2.99</span></li>
  1. Oranges $0.99
  2. Mango $1.01
  3. Tomatoes $2.70 $2.19
  4. Potatoes $3.00 $2.50
  5. Bananas $2.99

Let's first write two small functions for converting text like $1.99 into a float, and another function to convert an array of prices into an array of floats.

function convertPrice(s) {
  return parseFloat(s.replace('$', ''))
function convertPrices(list) {
  return list.map(convertPrice)

Let's iterate over the entire list of DOM elements. For each price element, if there is an old price inside - remove it. Take the remaining text and confirm the prices are sorted.

cy.get('#fruits li .price')
  .should('have.length.greaterThan', 2)
  .then(($prices) => {
    // if there is an old price, remove it
    // and take the remaining text
    return Cypress._.map($prices, (priceElement) => {
      // don't forget to clone the element before removing
      // the old price to avoid changing the page!
      const $price = Cypress.$(priceElement).clone()
      return $price.text().trim()

Bonus: if you can remove the elements with old prices, the test would be simpler, as you can watch in the video 📺 Remove Elements Before Checking The Page (opens new window).

Tip: I used the chai-sorted (opens new window) plugin to write a clear "be.sorted" assertion.

Suggestion: it is much better to have positive labels on the elements you want to select, instead of removing elements that you do not want to have included.