Manipulate an element in cypress using text in the row

Question

How can I access from the code below 'switch__obj' using content from row?

For example I want to manipulate with check()/uncheck() that 'switch__obj', which is a slider button, but find it with the help of content, kind of like cy.get('row').contains('Text wherewith find that').find('.switch__obj').uncheck({force:true})... ?

I tried with parent(), parents(), find(), children() but I couldn't find it.

 <div _ngcontent-iil-c662="" class="row">
       <div _ngcontent-iil-c662="" class="col-10"><label _ngcontent-iil-c662="" for="chkOnlineBooking" class="label-bold">Allow patients to book appointments online</label></div>
       <div _ngcontent-iil-c662="" class="col-2">
          <div _ngcontent-iil-c662="" class="pull-right switch switch-small">
             <div _ngcontent-iil-c662="" class="col-auto"><label _ngcontent-iil-c662="" class="o-switch"><input _ngcontent-iil-c662="" type="checkbox" ng-reflect-model="true" ng-reflect-is-disabled="false" ng-reflect-options="[object Object]" class="ng-untouched ng-valid ng-dirty"><span _ngcontent-iil-c662="" data-off="No" data-on="Yes" class="switch__obj"></span></label><label _ngcontent-iil-c662="" for="chkOnlineBooking"></label></div>
          </div>
       </div>
    </div>

I hope I have given all the necessary information. Thank you!

Note: I used this code and working, but i want to find it based on text, and not with eq() option cy.get('.switch__obj').eq(0).parent().find('input').uncheck({force:true})

Answer 1

Identify the row with correct text using contains(), specifying .row as the element to return.

Then just .find() the input directly in that row.

cy.get('.row', 'Allow patients to book appointments online')
  .find('input[type="checkbox"]')
  .check()

You can actually omit [type="checkbox"], but it reads better when later reviewing your test - you know that .check() is the correct action, not .click().

Answer 2

You can do something likle this:

cy.contains('div', 'Allow patients to book appointments online')
  .parent() //Moves to parent div row
  .within(() => { //scopes the commands within the above div row
    cy.get('.switch__obj').click()
  })

If you want to use the check command, you can do this:

cy.contains('div', 'Allow patients to book appointments online')
  .parent() //Moves to parent div row
  .within(() => { //scopes the commands within the above div row
    cy.get('input[type="checkbox"]').check()
  })