如何使用Cypress测试Vaadin-Combo-Box并选中指定选项？

我尝试用Cypress测试Vaadin-Combo-Box组件，该组件包含yes/no两个选项，默认值为'no'，测试目标是将其改为'yes'。我已编写Cypress代码：

cy.get('#addressDetails input').should('be.visible').clear().type('yes')

请问后续需要执行什么操作才能选中'yes'值？组件代码如下：

<vaadin-combo-box
  id="addressDetails"
  label="Address details"
  item-label-path="name"
  item-value-path="id"
  .items="comboBoxItems"
  :value="optionsModel.addressdetails ? 'yes' : 'no'"
  @change="optionsModel.addressdetails = $event.target.checked"
></vaadin-combo-box>

解决方案 #

Vaadin-Combo-Box是下拉选择组件，仅输入文本不会自动完成选中，需要补充以下操作之一：

1. 按下回车键确认选择
   输入"yes"后直接触发回车，即可选中匹配的选项，修改后的代码：

cy.get('#addressDetails input').should('be.visible').clear().type('yes{enter}')

2. 点击下拉列表中的目标选项
   输入文本后下拉列表会展开匹配项，直接定位并点击"yes"选项：

cy.get('#addressDetails input').should('be.visible').clear().type('yes')
// 定位下拉列表中的yes选项并点击，选择器可根据实际DOM调整
cy.get('vaadin-combo-box-item').contains('yes').click()

注意：组件的@change事件绑定存在潜在问题——Vaadin-Combo-Box的change事件中，$event.target并没有checked属性，正确的取值应为$event.target.value。如果测试后发现组件值未更新，需要先修正这个绑定逻辑。

内容的提问来源于stack exchange，提问作者user7172