Cypress click button using enter keyword

user_6154921 0
Viewed 2118

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.

enter image description here

Thanks

cypress automated-tests javascript
2 Answers

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

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

user_128384930
Related