小编Nea*_*kit的帖子

我有一个 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 项中？也许谁知道解决这个问题的其他方法？

I\xe2\x80\x99m 在我的 Vue.js 项目 (Nuxt.js) 中使用 Cypress。我能\xe2\x80\x99t管理的主要问题是如何理解vuex存储已经准备好。让\xe2\x80\x99s 说我有一个按钮可以调用axios 来获取一些数据。然后数据通过突变进入存储，Vue 将在模板中渲染它。在商店建成之前，我想要与之交互的下一个元素是空的。但柏树正在试图检查它。

商店建立后如何调用下一个 cypress 操作（如 cy.get）？

我的项目比较复杂。但核心问题是，cypress 有时不\xe2\x80\x99t 等待商店构建并尝试进一步工作。我们第一次使用cy.wait(1000)，但似乎不是那么完美的决定。

<div>\n    <button data-cy="fetchDataBtn" @click="fetchData">get items</button>\n    <ul>\n        <li v-for="item in items">\n           <p>{{ item.title }}</p>\n           <button\n                @click="fetchProduct(item.id)"\n            >\n                buy {{ item.name }}\n            </button>\n        </li>\n    </ul>\n</div> \n\n    <script>\n    import { mapState } from \'vuex\';\n    export default {\n        name: \'App\',\n        computed: {\n            ...mapState(\'list\', [\'items\'])\n        }\n    } \n    </script>\n

我期望出现以下场景：

cy.get([\xe2\x80\x98data-cy=fetchDataBtn\xe2\x80\x99]).click()\n// wait for store is ready and list is already rendered …