时间戳

首页 > 解决方案 > 将 cypress 与 vuetify 一起使用

vue.js - 将 cypress 与 vuetify 一起使用

问题描述

我有一个 Vue.js 项目 (Nuxt.js)，作为 UI，我使用 Vuetify。对于 e2e 测试，我使用 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 项中？也许谁知道解决这个问题的其他方法？

标签： vue.jsvuetify.jse2e-testingcypress

解决方案

我不认为v-list__tile--link开发人员可以更改它，它似乎是由 Vuetify 库在运行时 DOM 添加的（除非您的意思是 Vuetify 开发人员，然后确保它可以在版本之间更改）。

无论如何，如果您想在选择器中更加面向内容，请使用 Cypress .parent()选择器

例如，

cy.contains('div', 'itemTextToSelect').parent('a').click()

如果可能，请确保“itemTextToSelect”确实与众不同（如果您可以在测试夹具中设置它）。

顺便说一句，在用户开始输入自动完成列表之前display: none，您需要.type('something')输入输入或.click({force: true})项目。

推荐阅读