将柏树与vuetify搭配使用 [英] Using cypress with vuetify

问题描述

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

I have a Vue.js project (Nuxt.js) and as UI I use the Vuetify. For e2e testing I use the Cypress.

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

Below is my scenarios of test in Cypress:

在为我创建的页面创建测试时遇到问题使用v-autocomplete组件。
问题是我无法使用Vuetify本机类来获取要测试的元素。下面的
是具有数据cy选择器的示例

I have a problem while creating test for page where I use v-autocomplete component. The problem is that I can't use Vuetify native classes to get the element I want to test. below is an example with data-cy selector

   <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中找到搜索结果。
其中一个示例如下：

I type some text into search input. Then in v-autocomplete have been found search results. And example of one of there is below:

...
    <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项目中？
也许谁知道解决此问题的其他方法？

Then I want select one of search items by clicking to one of found results. And for that I should to use native classes of Vuetify, but it is not have stability (.v-list__tile--link class сan be renamed by developers). How I can add data-cy selector into result search html item? Maybe who know any another way to resolve this problem?

推荐答案

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

I don't think v-list__tile--link can be changed by developers, it seems to be added at runtime DOM by the Vuetify library (unless you mean Vuetify developers, then sure it can change between versions).

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

In any case, if you want to be more content-oriented in your selectors, use Cypress .parent() selector

例如，

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

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

If posssible make sure 'itemTextToSelect' is really distinctive (if you can set it in the test fixture).

BTW，在用户开始键入自动完成列表之前，显示为：无，因此您需要输入 .type（'something'）或 .click（{force：true}） 该项目。

BTW, before the user starts typing the autocomplete list is display: none, so you will need to either .type('something') into the input, or .click({force: true}) the item.

这篇关于将柏树与vuetify搭配使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！