I want to select elements on the page based on the CSS property "text-decoration"

Question

I have a web page with a table of products, some of which are reduced in price. The original price is shown with a strike-out which is done by css text-decoration "line-through".

I can verify a single product with

cy.contains('span.amount', '600.00€')
  .invoke('css', 'text-decoration')
  .should('contain', 'line-through')

but now I want to select all products with this text-decoration. What is the selector syntax for an element with a particular css property, I am aiming to get a list of such products with struck-out prices and ignore the rest?

Answer 1

If you have a class that sets the CSS via a style sheet, you can just query for that

cy.get('span.amount.struckout')
  .then(struckouts => {
    // all elements with line-through
  })

If not, you can't directly query on a css property inside the selector but you can use what you have in .invoke(...).should(...) inside a filter,

cy.get('span.amount') 
  .filter((i,e) => {
    return Cypress.$(e).css('text-decoration').includes('line-through')
  })
  .then(struckouts => {
    // all elements with line-through
  })

or with a .then() to do the filter

cy.get('span.amount') 
  .then($spans => {
    return [...$spans].filter(span => Cypress.$(span).css('text-decoration').includes('line-through'))
  })
  .then(struckouts => {
    // all elements with line-through
  })