Change state of button depending on the text above in Cypress

Question

How can I write a method in cypress so that I search for the text content "Clinic location is active?" and after finding this text operate the button below it (you have a printscreen for guidance HERE ).

Until now I had written this method to operate the button to be active / inactive after the redClass class, but to be detected by its position on the page, which is slightly useless if a button appears in front of it in the future:

setToOn(value: number) {
        cy.get(this.controlsSelector).eq(value).then(($button) => {
            if ($button.hasClass('redClass')) {
                cy.get(this.offSliderButton).eq(value).click({force:true});
            } 
          })
    }

Now I would like not to look for the button by its position (value in the case of the above method), called with the function cypress .eq(), but by the text that is above it, in the control-label class

<div class="form-group">
            <label class="control-label" for="inputType">Clinic location is active?</label>
            <div class="controls">
                <div class="checkboxControl no-select">
                <div class="checkboxSlider  change greenClass">
                    <div class="checkboxSlider-state checkboxSlider-state-on">Yes</div>
                    <div class="checkboxSlider-state checkboxSlider-state-off">No</div>
                    <input checked="checked" class="form-control" data-val="true" data-val-required="The Clinic location is active? field is required." id="IsActive" name="IsActive" placeholder="Clinic location is active?" type="checkbox" value="true">
                    <input name="IsActive" type="hidden" value="true">
                    <label class="grey"></label>
                </div>
            </div>
            </div>
        </div>

So I want to call a method,from the test file, like:

clinicLocations.operateButtons('Clinic location is active?').setToOn();

Code for another button from that page:

<div class="form-group">
            <label class="control-label" for="inputType">Allow Online Scheduling?</label>
            <div class="controls">
                <div class="checkboxControl no-select">
                <div class="checkboxSlider  change greenClass">
                    <div class="checkboxSlider-state checkboxSlider-state-on">Yes</div>
                    <div class="checkboxSlider-state checkboxSlider-state-off">No</div>
                    <input checked="checked" class="form-control" data-val="true" data-val-required="The Allow Online Scheduling? field is required." id="AllowOnlineScheduling" name="AllowOnlineScheduling" placeholder="Allow Online Scheduling?" type="checkbox" value="true"><input name="AllowOnlineScheduling" type="hidden" value="true">
                    <label class="grey"></label>
                </div>
            </div>
            </div>
        </div>

And another code structure for an inactive button (with redClass) :

<div class="form-group">
    <label class="control-label" for="inputType">Use service facility NPI number in box 32a of HCFA form?</label>
    <div class="controls">
        <div data-toggle-selector=".NPInumberBox32a" class="checkboxControl no-select">
                <div class="checkboxSlider redClass">
                    <div class="checkboxSlider-state checkboxSlider-state-on">Yes</div>
                    <div class="checkboxSlider-state checkboxSlider-state-off">No</div>
                    <input class="form-control" data-val="true" data-val-required="The Use service facility NPI number in box 32a of HCFA form? field is required." id="UseFacilityNPINoInHCFA" name="UseFacilityNPINoInHCFA" placeholder="Use service facility NPI number in box 32a of HCFA form?" type="checkbox" value="false"><input name="UseFacilityNPINoInHCFA" type="hidden" value="false">
                    <label class="grey"></label>
                </div>
            </div>
    </div>
</div>

I hope I have provided all the necessary information.

Answer 1

In terms of Cypress commands it's just this

cy.contains('.form-group', 'Clinic location is active')
  .find('input[type="checkbox"]')
  .click()

I don't understand what clinicLocations.operateButtons refers to, or what your setOn() is doing exactly, but above is correct Cypress code for your requirement.