How do you use Cypress filter to apply multiple text-based conditions on elements?

General Discussions
,
3

Hello fellow test automation engineers! Adding another powerful technique to the discussion about selecting elements with complex nested conditions in Cypress.

@heenakhan.khatri you are not alone in this, even I like many others had this exact issue when testing a complex UI! The key thing to know about Cypress filter is that it doesn’t always behave like a pure CSS selector when passed a string for complex conditions. You often need a function for that advanced logic. What worked for me was filtering with a .each() callback and then applying assertions inside:

cy.get('.row').each(($row) => {
  const code = $row.find('.code').text().trim();
  const ref = $row.find('.ref').text().trim();

  if (code === '002' && ref === '001') {
    cy.wrap($row).should('contain.text', 'Something');
  }
});

It’s a bit more verbose, yes, but it provides you with granular control and better readability when Cypress can’t directly apply a string-based filter for your exact condition. This helps especially when Cypress filter doesn’t support your specific conditional out of the box.

Hope this robust approach helps you target those tricky elements reliably!