I'm implementing a custom command which asserts if an element is actionable or not. It appears to work as expected by suppressing the error but it then leaves the test in a limbo state where anything afterwards doesn't run. There are no errors in the console and I having looked at the Cypress examples (https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/fundamentals__errors/cypress/e2e/app-error.cy.js#L13-L34) I can't find anything that I'm obviously missing. Does anyone have any ideas?

Cypress.Commands.add(
  "shouldNotBeActionable",
  { prevSubject: "element" },
  (subject) => {
    cy.on("fail", (error) => {
      // We expect the click to fail with one of these messages
      const disabledMessage = "`cy.click()` failed because this element is";

      if (error.message.includes(disabledMessage)) {
        expect(error.message).to.include(disabledMessage);
        return false;
      }

      // Using Mocha's async done callback to finish this test so we prove that an uncaught exception was thrown
      throw error;
    });

    // Assumes this click fails
    cy.wrap(subject)
      .click({ timeout: 100 })
      .then(() => {
        throw new Error(
          "Expected element NOT to be clickable, but click() succeeded"
        );
      });
  }
);

This is used in my tests like so

it.only("opens step settings drawer but doesn't allow changes", () => {
  cy.visit("/myRoute");

  Assertions above are all ran…

  cy.get("button").shouldNotBeActionable();

  …but assertions below aren't being ran

If you just want to validate a button isn't actionable could you just do

cy.get("button").should('be.disabled');

? I don't think you need a custom command to test a button isn't clickable but maybe I'm missing something else you want to validate. https://docs.cypress.io/guides/references/assertions

Yeah that's what I'm currently using in place of this custom command, but as far as I'm aware this will still pass if the button is not disabled but isn't interactive because of other factors such as an another element overlapping it.

should('be.disabled')

will definitely do the job but I'd prefer the custom command to have more confidence.