This rule raises an issue when test code uses the { force: true } option with interaction methods like click(), check(), type(), or similar actions in Cypress or Playwright.

Why is this an issue?

End-to-end testing frameworks like Cypress and Playwright include built-in actionability checks before performing user interactions. These checks verify that elements are:

• visible in the viewport
• not covered by other elements
• not disabled
• stable and not animating

These checks exist to ensure tests simulate real user behavior accurately. The { force: true } option bypasses these safety mechanisms: in Cypress it skips all the actionability checks above, while in Playwright it disables the non-essential ones — for example, the "receives events" check on locator.click().

This creates several problems:

• Unreliable tests: tests may pass even when the UI is broken for actual users. For example, a button might be hidden behind a modal or disabled, but the test would still "click" it successfully.
• Hidden bugs: real synchronization issues, timing problems, or CSS bugs that would prevent users from interacting with the UI go undetected.
• False confidence: the test suite appears green while masking genuine defects that would impact the user experience.

In legitimate testing scenarios, you should rarely need to force interactions. If an element is not ready for interaction, the proper approach is to wait for it to become ready or to investigate why it is not in the expected state.

Remove { force: true } and explicitly assert the element is in the expected state before interacting with it — .should() in Cypress, or expect() with matchers like toBeVisible() and toBeEnabled() in Playwright.

With Cypress:

it("submits the form", () => {
  cy.get("button[type=submit]").click({ force: true }); // Noncompliant
});

it("submits the form", () => {
  cy.get("button[type=submit]")
    .should("be.visible")
    .and("be.enabled")
    .click();
});

With Playwright:

test("submits the form", async ({ page }) => {
  await page.getByRole("button", { name: "Submit" })
    .click({ force: true }); // Noncompliant
});

test("submits the form", async ({ page }) => {
  const submit = page.getByRole("button", { name: "Submit" });
  await expect(submit).toBeVisible();
  await expect(submit).toBeEnabled();
  await submit.click();
});

Resources

Documentation

• Cypress Documentation - Actionability
• Cypress Documentation - Best Practices
• Playwright Documentation - Auto-waiting and Actionability
• Playwright Documentation - Best Practices