Question

我有一个Vue.js项目（Nuxt.js），作为UI，我使用Vuetify。对于e2e测试，我使用赛普拉斯。

下面是我在赛普拉斯的测试场景：

在为使用v-autocomplete组件的页面创建测试时遇到问题。问题是我无法使用Vuetify本机类获取要测试的元素。下面是带有数据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项目中？也许谁知道解决此问题的另一种方法？

Answer 1

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

无论如何，如果您希望选择器更加面向内容，请使用赛普拉斯.parent()选择器

例如，

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

如果可能，请确保'itemTextToSelect'确实与众不同（如果可以在测试治具中进行设置）。

顺便说一句，在用户开始键入自动完成列表之前，display: none是.type('something')，因此您需要输入.click({force: true})或array([ 1, 3, 4, 27, 50, 99], dtype=int64)项。

将cypress与vuetify搭配使用

1 个答案: