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

Question

抱歉，我需要有关查找元素 v-select 和按 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>

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();

如果您没有包装器，则只需使用包含：

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

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