如何使用 vue.js v-select 通过 cypress.io 查找元素并选择?

2022-01-14 00:00:00 automated-tests vue.js cypress

抱歉，我需要有关通过 cypress.io 查找元素 v-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#语法

相关文章