CODEWITHSUNDEEP
javascriptautomated-testscypress
Tadas
Tadas

Reputation: 176

Cypress click button using enter keyword

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

Upvotes: 2

Views: 4556

Answers (2)

user14903560
user14903560

Reputation:

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

Upvotes: 1

Ara Galstyan
Ara Galstyan

Reputation: 556

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

Upvotes: 0

Related Questions