在vuetify中使用cypress

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (240)

我有一个Vue.js项目(Nuxt.js),因为是UI因此我使用Vuetify。而对于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项目中?也许谁知道任何其他方法来解决这个问题?

提问于
用户回答回答于

我不认为v-list__tile--link开发人员可以改变它,它似乎是由Vuetify库在运行时DOM添加的(除非你的意思是Vuetify开发人员,然后确定它可以在版本之间进行更改)。

在任何情况下,如果您希望在选择器中更加面向内容,请使用Cypress.parent() 选择器

例如,

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

如果可能,请确保'itemTextToSelect'真的与众不同(如果你可以在测试夹具中设置它)。

扫码关注云+社区

领取腾讯云代金券