login.vue – which is the login page
<template>
<v-container id="login-page">
<v-row>
<v-col>
<input id="username" v-model="username" data-cy="username" required />
</v-col>
</v-row>
</v-container>
</template>
<script setup>
const username = ref()
</script>
<style lang="scss" scoped></style>
login.cy.js – my test file for the login page
describe('Login form', () => {
beforeEach(() => {
cy.visit('/login')
})
it('Correct username and password results to successful login', () => {
cy.get('#username').type('admin')
})
})
With my test script, the v-model
does not update and does not write anything on the input when the video is watched. When I removed the v-model
attribute on login.vue it will work just fine.
What would be the appropriate cypress methods to make it work. Eventually, I will use that username to submit to an backend API. I just made optimized it with a username field since that is the particular main problem.