使用 cypress，如果“<v-autocomplete>”有太多项目，如何在“<v-autocomplete>”上选择一个项目

Question

在使用 Cypress 为 Vuetify 页面编写 E2E 测试时，我遇到了从 a<v-select>或 a中选择一个或多个元素的困难<v-autocomplete>

只要选择上只有几个选项，先前存在的问题的答案就可以正常工作。

问题是：如果您的组件选择了许多选项，Vuetify 将仅渲染靠近其弹出窗口上相应滚动条位置的选项，这意味着您需要选择的选项可能不可见，因此无法通过 Cypress 选择。

有谁知道访问 Vuetify 上的元素的可靠方法<v-select>/<v-autocomplete>即使选择有太多选项？

Answer 1

这对我有用：

首先，我为 Tab 键添加了一个自定义命令

Cypress.Commands.add("typeTab", (shiftKey, ctrlKey) => {
    cy.focused().trigger("keydown", {
        keyCode: 9,
        which: 9,
        shiftKey: shiftKey,
        ctrlKey: ctrlKey,
    });
});

然后将命令添加到我的 support/index.d.ts 文件中

typeTab(shiftKey: Boolean, ctrlKey: boolean): Chainable<any>

最后进行测试

    cy.get("#country")
        .click({ force: true })
        .focused()
        .type("U{downArrow}nited St")
        .typeTab();

这是 Cypress 10.1.0 和 Vuetify 2.6.6 的情况