Cypress click button using enter keyword

Question

I am testing my application and I'm trying to invoke button click with enter keyword:

<v-btn
    class="submit-button"
    block
    color="primary"
    @click="login"
  >
    Log In
</v-btn>

cy.get('.submit-button').type('{enter}');

Is there any alternative way, to click button on enter key press?

I'm using vuetify framework and v-btn component.

Thanks

Answer 1

Vue translates

<v-btn class="submit-button">Log In</v-btn>

into

<button class="submit-button">
  <span class="v-btn__content">Log In</span>
</button>

Logically this test

cy.get('.submit-button').type('{enter}');

should work since you are selecting the button element by it's class, but somehow the focus is getting messed up.

The fix is to insert a .focus() before the .type() command.

cy.get('.submit-button').focus().type('{enter}');

Answer 2

Try to submit the whole form. See here - Cypress submit docs . It manipulates the submmiting with enter.