如何通过cypress.io和vue.js v-select查找元素并进行选择? [英] How to find element and select by cypress.io with vue.js v-select?
本文介绍了如何通过cypress.io和vue.js v-select查找元素并进行选择?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
对不起,我需要有关cypress.io查找元素v-select和select选项的帮助.
Sorry,I need help about find element v-select and select option by cypress.io.
<v-select
label="label"
v-model="ccRcode"
ref="ccRcode"
:items="getData"
item-text="descWithCode"
item-value="code"
value="{ ccRcode }"
data-test='test'
></v-select>
推荐答案
由于您使用的是Vuetify的select,因此其文档应该是第一站.检查下面的参考.
Since you are using Vuetify's select, their documentation should be the first stop. Check the references below.
基本上,它们添加data-cy
数据属性以使定位元素变得容易.因此,在您的示例中:
Basically, they add data-cy
data attributes to make it easy to target elements. So in your example:
<v-select
label="label"
v-model="ccRcode"
ref="ccRcode"
:items="getData"
item-text="descWithCode"
item-value="code"
value="{ ccRcode }"
data-cy='select-input'
></v-select>
然后在您的测试中:
cy.get('[data-cy=select-input]').select('optionValue')
参考:
- https://vuetifyjs.com/en/getting-started/unit-testing#e-2-e-tests
https://docs.cypress.io/api/commands/select .html#语法
- https://vuetifyjs.com/en/getting-started/unit-testing#e-2-e-tests
- https://docs.cypress.io/api/commands/select.html#Syntax
这篇关于如何通过cypress.io和vue.js v-select查找元素并进行选择?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文