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

Can you try cy.get('.submit-button').type('{enter}', {force: true});, assuming the locator that you're using is correct. — Alapan Das
Unfortunately, this reproduces the same error. I've updated my question with HTML tag that I'm using. — Tadas
Hi. As the error says the type command requires a typeable (input/textarea) element in order to work. Your code yields a button element type, that's why it fails. In case you have any input/textarea element on your page, you have to cy.get('input').type('{enter}') — Alex Izbas
@AlexIzbas look at the message - button is a typeable element. — user14903560

Unknown Unknown · Accepted Answer · 2021-01-19T11:33:32

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}');