cypress check div not clickable

Question

The piece of code below shows as a checkbox and I'm trying to use cypress to click it but it isn't working even though I selected it.

<button class="p-button p-component p-disabled primary-button p-button-raised font-semibold" 
 type="button" disabled="" id="search-button" 
 aria-haspopup="true" aria-controls="search-menu" 
 data-v-17vc126c="">...</button>

Here's what my cypress code looks like:

When('User clicks checkbox, disable form', () => {
 cy.get('.p-button.p-component[aria-controls="search-menu"]').click();
});

Here's the error I get:

Timed out retrying after 15050ms: cy.click() failed because this element is disabled:

<button class="p-button p-component p-disabled primary-button p-button-raised font-semibold" type="button" disabled="" id="search-button" aria-haspopup="true" aria-controls="search-menu" data-v-17vc126c="">...</button>

Fix this problem, or use {force: true} to disable error checking.

The command was expected to run against origin https://myDevSite.com but the application is at origin http://localhost:8080.

This commonly happens when you have either not navigated to the expected origin or have navigated away unexpectedly

Crazy thing is I used this exact code on another element and it worked with no errors. Any help would be much appreciated. Thanks!

Answer 1

The obvious step you can take is shown in the message

cy.get('.p-button.p-component[aria-controls="search-menu"]').click({force:true})

but the user won't click when button is disabled (natch), so you must find out how to enable it from the web page and do that instead.