Vuetify Select Component and Cypress

Question

我有一个带有Vuetify Select组件的组件：

<v-select
  :items="corporations"
  label="Corporation name"
  data-test="corporation-name"
  outlined
></v-select>

而且我想用赛普拉斯测试来模拟选择：

cy.get('[data-test="corporation-name"]').select('Thorgate');

很遗憾，我不能，并且我收到此错误消息：

CypressError: cy.select() can only be called on a <select>. Your subject is a: <input data-test="corporation-name" id="input-13" readonly="readonly" type="text" aria-readonly="false" autocomplete="off">

我也尝试用type()输入值，但赛普拉斯告诉我

CypressError: Timed out retrying: cy.type() failed because this element is readonly:

有什么想法吗？

Answer 1

使用Vuetify Select组件进行选择的最快方法是将force: true选项与.type()命令一起使用，如错误消息中所述

解决此问题，或使用{force：true}禁用错误检查。

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

[如果要测试的特定于用户单击菜单选项的用户，例如自定义单击处理程序，则需要单击关联的菜单项。

首先单击v-select，使菜单可见。指针事件已禁用，因此需要再次使用强制。

然后选择活动菜单中的选项。

NOTE这取决于当前特定的Vuetify实现v2.2.15，并且在以后的版本中可能会过时。

cy.get('[data-test="corporation-name"]')
  .click({ force: true });                

cy.get('.v-menu__content.menuable__content__active')
  .find('div.v-list-item__title:contains("Thorgate")')
  .click();