Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

cy.type + enter doesn't trigger a `click` on a button or anchor element

See original GitHub issue

When a button or a element is focused, hitting the enter key will trigger a click event in all browsers, but cy.type('{enter}') will not trigger a click event while using Cypress.

I’ve created a plugin that gets around this: https://github.com/NicholasBoll/cypress-enter-plugin

Update: Upon further inspection, Cypress does trigger a click on any non-focused element when typing any characters. This is not realistic. I’m attempting another plugin that tries to be more accurate about keyboard. Another issue cy.type has is the detection of valid elements to send keys to. This detection cannot be disabled via force: true which is only disabling actionability checks. I’ve had to manually use trigger which is cumbersome to trigger all related events to be more accurate, but that’s for another issue.

Current behavior:

The click is not fired

Desired behavior:

The click event should fire

Test code to reproduce

https://github.com/NicholasBoll/cypress-test-tiny

cypress/fixtures/index.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Test</title>
    <meta name="description" content="Test" />
  </head>

  <body>
    <button id="button">My Button</button>
    <output id="output"></output>
    <script>
      document.getElementById("button").addEventListener("click", function () {
        document.getElementById("output").textContent = "Clicked!";
      });
    </script>
  </body>
</html>

cypress/integration/spec.js

describe("page", () => {
  beforeEach(() => {
    cy.visit("cypress/fixtures/index.html");
  });

  it("should trigger a click action when typing {enter}", () => {
    cy.get("button").focus().type("{enter}"); // this doesn't trigger a click
    cy.get("output").should("contain", "Clicked!");
  });

  it("should not trigger a click action when typing random characters", () => {
    cy.get("button").type("foobar"); // this does trigger a click
    cy.get("output").should("not.contain", "Clicked!");
  });
});

Versions

All

Issue Analytics

State:
Created 3 years ago
Reactions:10
Comments:18 (8 by maintainers)

Top GitHub Comments

2reactions

sussexrickcommented, Mar 2, 2022

cy.get(“button”).type(“{enter}”) doesn’t work in firefox. But works as intended in Chrome and Electron.

I’ve found the same when using .type("{enter}") on a text input. It should submit the form. It does in Edge, but not in Firefox.

0reactions

TheDutchCodercommented, Dec 7, 2021

There’s something really fundamentally broken with how events are simulated. I have an accessible dropdown, which also responds to keyboard inputs and I can’t focus the button and hit enter.

If I do it without the focus, it “works”, but fires twice.

If I type '{tab}' (which Cypress claims doesn’t exist), it actually works:

It would be great if this system could be prioritized, because it’s leading to a lot of issues on our end testing accessibility…

In my case it seems as if the button, when receiving a keyboard command, bubbles the event up to the parent that then closes the dropdown again, instead of triggering a click event which is how a button handles spacebar in the browser.

Attaching an event handler with stop propagation on the button also doesn’t work, so event bubbling is not simulated like how they work in the browser. But I think we already reached that conclusion 😃

Top Results From Across the Web

Cypress does not always executes click on element

I am automating Google Calculator. And from time to time Cypress is not able to execute click on button. The ...

click - Cypress Documentation

Click a DOM element. It is unsafe to chain further commands that rely on the subject after .click(). Syntax Usage Correct Usage Incorrect...

cy.type() failed because it targeted a disabled element

I.e if the button or anchor ag text is partially visible at that click fails ... .focus() .type("Test Input 123{enter}"); cy.wait("@INPUT_REQUEST"); cy.

Cypress basics: Check attributes, value and text - Filip Hric

cy .get('div') .should('have.text', 'Please type in your name:') cy ... In that case, getting your href attribute from anchor element would ...

Cypress Click Button Using Enter Keyword - ADocLib

type ('{enter}') to trigger the click event on cy.get(".some-selector").click(); // Cypress doesn't support forwarding the enter key as a click.