Vue3表单中Cypress .type无法更新v-model值的技术求助

问题根源 #

你的Vue组件代码存在关键错误：未导入ref函数，导致username不是响应式变量。Vue3的v-model依赖响应式系统同步数据与DOM，非响应式变量无法触发Vue的更新机制，进而导致Cypress输入的内容无法被Vue捕获，表现为输入框无内容写入。

修复步骤 #

1. 修正Vue组件的响应式变量定义

在login.vue的<script setup>中导入ref并初始化变量：

<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>
import { ref } from 'vue' // 必须导入ref才能创建响应式变量
const username = ref('') // 初始化空字符串，避免undefined状态引发绑定异常
</script>

<style lang="scss" scoped></style>

2. 优化Cypress测试代码

优先使用data-cy定位元素（比ID更稳定，避免样式/结构变化影响测试），并添加断言强制等待Vue完成响应式更新：

describe('Login form', () => {
  beforeEach(() => {
    cy.visit('/login')
  })

  it('Correct username can be entered and synced', () => {
    cy.get('[data-cy="username"]')
      .type('admin')
      .should('have.value', 'admin') // 断言值已更新，确保Vue同步完成
  })
})

备选方案（若仍有同步问题） #

如果修复组件后依然存在输入不同步的情况，可以手动触发input事件强制Vue更新：

cy.get('[data-cy="username"]')
  .invoke('val', 'admin')
  .trigger('input')
  .should('have.value', 'admin')

内容的提问来源于stack exchange，提问作者Dean Christian Armada