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

General Discussions
,
1

Hello peoplee!!

I’m working on a Cypress test where I need to select a very specific HTML element from a set of similar structures. I need to select the .row element based on multiple conditions regarding its nested text content.

Here’s the HTML I’m working with:

<div class="row">
  <span class="code">001</span>
  <span class="ref">002</span>
  <label>Some Label</label>
</div>
<div class="row">
  <span class="code">002</span>
  <span class="ref">002</span>
  <label>Another label</label>
</div>
<div class="row">
  <span class="code">002</span>
  <span class="ref">001</span>
  <label>Something</label>
</div>

I’m aiming to select the .row element where the .code is 002 AND the .ref is 001. I tried using:

cy.get('.row').filter(`span.code:contains("002")span.ref:contains("001")`)

However, this Cypress selector doesn’t seem to work as expected, even when I try it with a single condition.

Could someone provide guidance on the correct approach for combining these types of conditions to select the desired element? Any insights into what I might be missing would be greatly appreciated.

2

Hi @heenakhan.khatri!

Your challenge with applying multiple conditions using Cypress filter() is a very common one. I definitely ran into a similar issue a few weeks ago!

Turns out, filter() in Cypress works on the raw DOM elements already selected by cy.get(). So, it won’t directly handle those nested selectors you’ve written in the way you might expect. What worked reliably for me was filtering with a .filter() callback, like this:

cy.get('.row').filter((index, el) => {
  return (
    Cypress.$(el).find('.code').text().trim() === '002' &&
    Cypress.$(el).find('.ref').text().trim() === '001'
  );
});

This approach allows you to check the text content of the children manually using Cypress’s bundled jQuery within the callback. It works very reliably when Cypress filter needs to evaluate multiple nested conditions.

Hope this helps you accurately target those complex elements!