使用 Cypress 和 Vue.js，如何在 v-select 下拉列表中查找并选择元素？

Question

这是我的代码：

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

Answer 1

假设您要选择的项目有文字“我的选项”，您可以执行以下操作：

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

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

Answer 2

尝试：

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

Answer 3

我们对相应的组件也有同样的问题。我们发现的修复如下：

cy.get('#selectID').click().trigger('mousedown'); // this makes sure the select will stay open

这里有 2 个选项，取决于您是否有选项的包装器：

cy.get('#selectOptionsWrapper').contains('yourOption').click();

如果你没有包装器，那么只需使用 contains:

cy.contains('yourOption').click();

希望这对其他人有帮助。 干杯！

Answer 4

我需要对 @benoit-blanchon 的解决方案稍作修改：

.v-list-item__content

而不是

.v-menu__content

：

cy.get('#my-select-identifier').parent().click()
cy.get(".v-list-item__content").contains("My Option").click()

注意：@robert-pop解决方案的最后一行有点危险，因为它执行整页搜索，如果“我的选项”出现在页面上的其他位置，可能会导致问题。