cypress: condition with label and css locator

Question

How would you do something like this: I have this:

<label><input type="checkbox">TEXT TO FIND</label>

and it is in a condition where I would like to find out if it exists with a certain label (TEXT TO FIND):

...
} else if (edit.find('label input[type="checkbox"]').text() === 'TEXT TO FIND') {

unfortunately above does not work, hence the question... I think the problem is that the "TEXT TO FIND" is on the level of but it looks on . But I need to define the input tag.

[the 'edit comes from this: cy.get('body ...').then((edit)=>{ here the conditions }) ]

thx

Answer 1

Since input[type="checkbox"] is inside the label, you can add :has() to the CSS selector

edit.find('label:has(input[type="checkbox"])').text() === 'TEXT TO FIND'

This keeps the <label> as subject so you can check it's text.

You may want to change .text() === 'TEXT TO FIND' to .text().includes('TEXT TO FIND') or .text().trim() === 'TEXT TO FIND' in case of whitespace.

---

Do conditional test as late as possible

A better pattern is to make the if() test as late as possible, so that you can get some retry on the elements.

cy.get('label:has(input[type="checkbox"])')
  .invoke('text')
  .then(text => {
    if (text.trim() === 'TEXT TO FIND') {
      ...