Quasar2 Vue3 Cypress多选测试未运行即出现异常错误求助

组件模板 #

<template>
  <q-item tag="label" v-ripple>
    <q-select
      borderless
      stack-label
      emit-value
      map-options
      multiple
      class="full-width"
      v-model="model"
      :options="options"
      :label="name"
    >
      <template v-slot:after>
        <q-btn
          data-test="btnMultipleDropDownSetting"
          round
          dense
          flat
          color="primary"
          icon="done"
          @click="multiSelectionCompletes"
          :disable="submitButtonDisable"
        />
      </template>
    </q-select>
  </q-item>
</template>

测试代码 #

it('Verify Multiple-Select from auto-generated page', () => {
  cy.get('[data-test="multidropdown-setting-4"]').find('label').should('contain', "Auto Generated Multi-Selection box");
  cy.get('[data-test="multidropdown-setting-4"]').find('label').click();
  cy.get('[data-test="multidropdown-setting-4"]').find('label').select(["Option 1"]);
  cy.get('body').click();
  cy.get('[data-test="multidropdown-setting-4"]').find('span').should('have.text', 'Option 1');
});

错误分析与解决方案 #

核心问题是**cy.select()命令仅支持原生<select>元素**，但你的组件是Quasar封装的q-select组件，并非原生select标签，直接调用select()会触发Cypress的命令校验错误，这就是测试未运行就报错的原因。

修正测试代码的步骤如下：

• 缓存组件容器，避免重复定位提升效率
• 打开下拉框后，通过点击下拉选项完成选择，替换select()命令
• 可通过组件自带的完成按钮关闭下拉，替代点击body的操作

修正后的测试示例：

it('Verify Multiple-Select from auto-generated page', () => {
  // 缓存组件容器
  const multiDropdown = cy.get('[data-test="multidropdown-setting-4"]');
  
  multiDropdown.find('label').should('contain', "Auto Generated Multi-Selection box");
  // 打开下拉框
  multiDropdown.find('label').click();
  
  // 点击目标选项（Quasar下拉选项默认带.q-item类）
  cy.get('.q-select__options').contains("Option 1").click();
  
  // 点击完成按钮关闭下拉
  multiDropdown.find('[data-test="btnMultipleDropDownSetting"]').click();
  
  // 验证选中结果
  multiDropdown.find('span').should('contain', 'Option 1');
});

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