Vuetify3 v-combobox 和 cypress：如何识别列表项？

Question

我正在迁移到 vuetify3，我正在使用 cypress（the cypress studio）进行测试。

<v-combobox> 给了我一个包含项目的下拉列表，但是这些不容易用 css 选择器引用。赛普拉斯工作室生成类似的东西

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

...这对于人类来说是不可读的，并且如果下拉列表被修改（例如，在列表项前面添加），将会中断。

我想出的最好的解决方案是给每个列表项一个 data-cy 属性；但如何正确地做到这一点？在我看来，关于如何使用 item 插槽的 vuetify3 文档仍然很少（参见 https://next.vuetifyjs.com/en/components/combobox/）；它的工作原理似乎与 vuetify2 不同。通过使用 item 槽，

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

...列表项不再可点击。

代码沙盒：https://codesandbox.io/s/vuetify3-v-combobox-and-cypress-how-to-identify-list-items-gzfs71?file=/src/App.vue

编辑当然，我可以自己编写 Cypress 测试代码。但我的前提是使用 Cypress Studio，如果可能的话，它可以生成有意义的 CSS 选择器，我。 e.如果 HTML 代码中有 id 或 data-cy 属性。但是 vuetify 不会生成这样的。所以我问，如何将 data-cy 属性附加到列表项？

Answer 1

我认为您的选择器比需要的要复杂一些

您可以简化为相关元素

// get based on value
cy.get(".v-overlay-container .v-list-item").contains("Programming").click();

// get based on order (force: true is required if the combo box is still animating)
cy.get(".v-overlay-container .v-list-item").eq(2).click({ force: true });

使用的例子

<template>
  Click this combobox:
  <v-combobox :items="items" id="combo" />
</template>

<script>
import { VCombobox } from "vuetify/components";
export default {
  name: "App",
  data() {
    return {
      items: ["Programming", "Design", "Vue", "Vuetify"],
    };
  },
  components: { VCombobox },
};
</script>

测试

describe("??", () => {
  beforeEach(() => {
    cy.visit("http://10.0.0.248:8080/");
  });

  it("select with content", () => {
    cy.get("#combo").click();
    cy.get(".v-overlay-container .v-list-item").contains("Programming").click();
    cy.get("#combo").should("have.value", "Programming");
  });

  it("select with order", () => {
    cy.get("#combo").click();
    cy.get(".v-overlay-container .v-list-item").eq(2).click({ force: true });
    cy.get("#combo").should("have.value", "Vue");
  });
});