将柏树与vuetify结合使用
将柏树与vuetify结合使用
提问于 2018-12-04 18:34:02
我有一个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选择器添加到result search html项目？也许谁知道解决这个问题的其他方法呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-05 09:05:14
我不认为开发人员可以更改v-list__tile--link，它似乎是在运行时由Vuetify库添加到DOM中的(除非您是指Vuetify开发人员，然后确保它可以在不同版本之间改变)。
在任何情况下，如果您想在选择器中更加面向内容，请使用Cypress .parent()选择器
例如,
cy.contains('div', 'itemTextToSelect').parent('a').click()如果可能，请确保'itemTextToSelect'确实与众不同(如果您可以在测试夹具中设置它)。
顺便说一句，在用户开始输入之前，自动完成列表是display: none，所以您需要在输入中输入.type('something')，或者对项目执行.click({force: true})操作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53610949
复制相关文章
相似问题