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

【问题标题】：How to find element and select by cypress.io with vue.js v-select?如何使用 vue.js v-select 通过 cypress.io 查找元素并选择？
【发布时间】：2020-02-06 11:14:10
【问题描述】：

抱歉，我需要有关通过 cypress.io 查找元素 v-select 和选择选项的帮助。

<v-select
      label="label"
      v-model="ccRcode"
      ref="ccRcode"
      :items="getData"
      item-text="descWithCode"
      item-value="code"
      value="{ ccRcode }"
      data-test='test'
></v-select>

【问题讨论】：

也许这Using cypress with vuetify 有帮助？它与 Vuetify 自动完成有关，但涉及选择。尝试类似的方法，如果它不起作用发布您上面尝试的代码并且有人会通过它。
你试过这个cy.get("[data-test=test]").select("valueNameGoesHere");吗？

标签： vue.js automated-tests cypress

【解决方案1】：

试试：

cy.get('[data-test=test]').type('valueNameGoesHere{enter}', {force: true})

【讨论】：

【解决方案2】：

由于您使用的是 Vuetify 的 select，因此他们的文档应该是第一站。检查下面的参考资料。

基本上，他们添加了data-cy 数据属性，以便轻松定位元素。所以在你的例子中：

<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')

参考资料：

【讨论】：

按照这种方法我得到 CypressError: cy.select() 只能在
@garcianavalon .select() 用于。对于输入，您需要使用其他东西 -> docs.cypress.io/api/commands/type.html#Usage
感谢@zlatko，但我正在使用选择作为你：O 不知道为什么我会收到该错误（也许我使用的某些选项使其呈现为输入？）但我最终将其更改为自动完成并使用.type() 找到我需要的选项
我在使用 v-select 时也遇到了这个错误，但是 Benoit 的解决方案有效

【解决方案3】：

假设您要选择的项目有文本“我的选项”，您可以这样做：

cy.get("[data-test=test]").parent().click()
cy.get(".v-menu__content").contains("My Option").click()

第一行打开下拉菜单，第二行选择项目。

【讨论】：

我有一个问题，当我在第一个 v-select 之后有一个 v-select 时
@farahm 您可以使用更具体的选择器来定位正确的v-select。
请注意 - 这将在一种特定情况下失败：如果您从 within() 块内部调用它。要解决这个问题，您可以使用Cypress.$()（请参阅github.com/cypress-io/cypress/issues/6666）
另外，如果你的选择项太多，这将失败，因为 Vuetify 只呈现可见的。