CYPRESS: Function to check if an button is disabled or not

Question

I have the following problem. I want to write a function that can be used to check whether the search button is deactivated or not. If the search button is deactivated, then carry out the next steps - fill out the search fields and click on the "Start search" button, and if the search button is activated, then first click on the button so that the search fields are displayed and then do the next steps - fill out the search fields and click on the button "Start search". I've tried all sorts of things, but unfortunately without success.

I would look forward to any help.

button is disabled

button is enabled

 <button id="mainbody:searchPersRecord:searchIcon" name="mainbody:searchPersRecord:searchIcon" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only btNormal showHeadArea ui-state-disabled" alt="Open search" title="Open search" onclick="showHeadArea(true); tryFocusComponentInAnyForm('searchHeadField1_Surname'); return false;;window.open('\\/matrix\\/views\\/basis\\/personalmanagement\\/searchPersRecord.jsf','_self')" role="button" aria-disabled="false" disabled="disabled"><span class="ui-button-icon-left ui-icon ui-c ma-icon ma-search"></span><span class="ui-button-text ui-c">ui-button</span></button> <button id="mainbody:searchPersRecordDivisionForm:searchIcon" name="mainbody:searchPersRecordDivisionForm:searchIcon" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only btNormal showHeadArea" alt="Open search" title="Open search" onclick="showHeadArea(true); tryFocusComponentInAnyForm('number'); return false;;window.open('\\/matrix\\/views\\/basis\\/personalmanagement\\/searchDivision.jsf','_self')" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c ma-icon ma-search"></span><span class="ui-button-text ui-c">ui-button</span></button>

Answer 1

I would advise to not use conditional testing in Cypress since it's considered by practice. Instead, you can write two different test suites to cover both scenarios.

However, if you still want to accomplish this. You can do it like so:

cy.get('<button-selector-here>').then(($btn) => {
  if ($btn.is(":disabled")) {
    // do some assertions when button is disabled
  } else {
    // do other assertions when button is enabled
  }
})