Vuetify3中如何为v-combobox列表项加data-cy适配Cypress Studio测试？

迁移到Vuetify3后用Cypress Studio测试<v-combobox>时，下拉列表项的定位一直是个麻烦事——Cypress自动生成的选择器全是基于层级和顺序的，比如：

cy.get('.v-overlay__content > .v-list > :nth-child(2) > .v-list-item__content > .v-list-item-title').click();

这种选择器不仅直观性差，只要列表项顺序一变，测试直接失效。

想给每个列表项加data-cy属性解决问题，但一开始自定义item插槽的写法不对，导致列表项无法点击：

<v-combobox>
  <template #item="scope">
    myListItem
  </template>
</v-combobox>

正确的插槽用法 #

Vuetify3的item插槽需要保留原列表项的交互结构，不能直接写文本。要通过插槽提供的scope参数，绑定原组件的属性和事件，同时添加data-cy属性：

<v-combobox :items="yourItemList">
  <template #item="scope">
    <v-list-item 
      v-bind="scope.attrs" 
      v-on="scope.on" 
      :data-cy="`combobox-item-${scope.item.id}`"
    >
      <v-list-item-title>{{ scope.item.label }}</v-list-item-title>
    </v-list-item>
  </template>
</v-combobox>

• v-bind="scope.attrs"：绑定原列表项的所有原生属性，保证样式和基础行为一致
• v-on="scope.on"：绑定原列表项的点击、hover等交互事件，解决无法点击的问题
• :data-cy="..."：用列表项的唯一标识（比如id、value）生成专属的data-cy值，确保选择器唯一且直观

这样设置后，Cypress Studio会自动识别带data-cy的元素，生成类似cy.get('[data-cy="combobox-item-123"]').click()的选择器，既清晰又不会因为列表项顺序变动而失效。

内容的提问来源于stack exchange，提问作者fjf2002