How to assert not clickable?

[varganatt]

I have an element covered by another element. How can I assert that it's not clickable?

<div id="container" style="position:relative">
  <button id="button-1" style="position:absolute">
    Button underneath
  </button>

  <button id="button-2" style="position:relative">
    Button that covers the other button
  </button>
</div>

// What I want to do
cy.get("#button-1").should("not.be.clickable");

// Here I expect a failure - works as expected!
// "cy.click() failed because this element: <button ...> is being covered by another element: ..."
cy.get("#button-1").click();

// I had hoped that #button-1 would "not.be.visible", but it is "visible"
cy.get("#button-1").should("not.be.visible");

Is there a way to assert that an element is not clickable, that it is being covered, or any other way to check that a .click() would fail?

[jjhelguero]

According to this answer on stackoverflow, you'll want listen to the fail Cypress event before sending the click to the button.

 cy.once('fail', (e) => {
  // we expect the click to fail with this message
  expect(e.message).to.include('cy.click() failed because this element');
  expect(e.message).to.include('is being covered by another element');

  // using mocha's async done callback to finish
  // this test so we prove that an uncaught exception
  // was thrown
  done()

  // return false to prevent the error from
  // failing this test
  return false
})

// assumes this click fails
cy.get("#button-1").click()

[varganatt]

Thanks so much for the pointers! I read those docs, including "However this is strongly discouraged", which is why I didn't continue down that path. Your code basically works, but I had some specific requirements, so I'll post my version too.

[varganatt]

Minimal example of a Cypress command:

Cypress.Commands.add("shouldNotBeActionable", { prevSubject: "element" }, (subject, done) => {
  cy.once("fail", (err) => {
    expect(err.message).to.include("`cy.click()` failed because this element");
    expect(err.message).to.include("is being covered by another element");
    done();
  });

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

declare global {
  namespace Cypress {
    interface Chainable {
      shouldNotBeActionable(done: Mocha.Done): Chainable<Element>;
    }
  }
}

Example usage:

it("should not be clickable", (done) => {
  cy.get("#button-1").shouldNotBeActionable(done);
});

it("should not be clickable on the right side", (done) => {
  cy.get("#button-1").shouldNotBeActionable(done, {
    position: "right",
  });
});

Cypress command written in TypeScript:

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Assert that the subject is not clickable.
       */
      shouldNotBeActionable(
        /** The Mocha `done` callback. */
        done: Mocha.Done,
        /** Options passed to `.click()`. By default, the timeout is 100 ms. */
        clickOptions?: Partial<Cypress.ClickOptions> & {
          position?: Cypress.PositionType;
        }
      ): Chainable<Element>;
    }
  }
}

Cypress.Commands.add(
  "shouldNotBeActionable",
  { prevSubject: "element" },
  (subject, done, { position, timeout = 100, ...clickOptions } = {}) => {
    cy.once("fail", (err) => {
      expect(err.message).to.include("`cy.click()` failed because this element");
      expect(err.message).to.include("is being covered by another element");
      done();
    });

    const chainable = position
      ? cy.wrap(subject).click(position, { timeout, ...clickOptions })
      : cy.wrap(subject).click({ timeout, ...clickOptions });

    chainable.then(() =>
      done(new Error("Expected element NOT to be clickable, but click() succeeded")));
  }
);