相关疑难解决方法(0)

我有一个 Vue.js 项目 (Nuxt.js)，我使用 Vuetify 作为 UI。对于 e2e 测试，我使用 Cypress。

以下是我在 Cypress 中的测试场景：

我在为使用 v-autocomplete 组件的页面创建测试时遇到问题。问题是我不能使用 Vuetify 本机类来获取我想要测试的元素。下面是一个带有 data-cy 选择器的例子

   <v-autocomplete
      v-model="model"
      :items="items"
      item-text="Description"
      item-value="API"
      label="Public APIs"
      placeholder="Start typing to Search"
      data-cy="autocomplete"
    ></v-autocomplete> 

我在搜索输入中输入一些文本。然后在v-autocomplete中已经找到搜索结果。其中之一的示例如下：

...
    <div>
       <a class="v-list__tile v-list__tile--link theme--light">
         <div class="v-list__tile__content">
         <div class="v-list__tile__title">Result item
           <span class="v-list__tile__mask">result item</span>
         </div>
         </div>
       </a>
   </div>
...

然后我想通过单击找到的结果之一来选择搜索项之一。为此，我应该使用 Vuetify 的本机类，但它没有稳定性（.v-list__tile--link类？由开发人员重命名）。如何将 data-cy 选择器添加到结果搜索 html 项中？也许谁知道解决这个问题的其他方法？

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

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

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

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