Cypress中Quasar q-select Vue组件交互失败求助

问题描述 #

在系统中尝试使用Cypress与Quasar q-select Vue组件交互，能定位到目标元素且点击事件看似触发，但无动画效果，下拉选项无法显示。已在Cypress的Electron和Chrome环境测试过。

相关代码 #

自定义Cypress命令 #

Cypress.Commands.add('selectQuasarDropdownItem', (labelText, itemText) => {
  cy.contains('span', labelText)
    .should('be.visible')
    .trigger('mousedown')
    .click({force: true })
    .trigger('mouseup');
    cy.wait(1000);
  cy.get('input[role="combobox"]')
      .should('have.attr', 'aria-expanded', 'true');
  cy.get('div')
      .contains(itemText)
      .should('be.visible')
      .click({ waitForAnimations: true, scrollBehavior: true, force: true });
});

测试用例调用 #

cy.selectQuasarDropdownItem('Open', 'Closed');

组件HTML结构 #

<div class="ml-auto">
    <div class="flex no-wrap shrink">
        <label class="q-field row no-wrap items-start q-field--filled q-select q-field--auto-height q-select--without-input q-select--without-chips q-select--single q-field--float q-field--dense very-dense rounded-corners rounded-md! border! dark:border-weak! border-weak/70! overflow-hidden"
               for="f_211987a1-e34a-4691-b82f-7d28428d9b5e">
            <!---->
            <div class="q-field__inner relative-position col self-stretch">
                <div class="q-field__control relative-position row no-wrap text-grey-8"
                     tabindex="-1">
                    <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
                        <div class="q-field__native row items-center"
                             inputvalue="">
                            <div class="column">
                                <span>Open</span>
                                <span class="truncate"
                                      style="font-size: 11px; max-width: 24ch;"/>
                            </div>
                            <input class="q-select__focus-target"
                                   id="f_211987a1-e34a-4691-b82f-7d28428d9b5e"
                                   readonly=""
                                   tabindex="0"
                                   role="combobox"
                                   aria-readonly="false"
                                   aria-autocomplete="none"
                                   aria-expanded="false"
                                   aria-controls="f_211987a1-e34a-4691-b82f-7d28428d9b5e_lb"
                                   value="0"/>
                            <!---->
                        </div>
                        <div class="q-field__append q-field__marginal row no-wrap items-center q-anchor--skip">
                            <i class="q-icon notranslate material-icons q-select__dropdown-icon"
                               aria-hidden="true">arrow_drop_down</i>
                        </div>
                        <!---->
                    </div>
                    <!---->
                </div>
                <!---->
            </label>
            <!---->
        </div>
        <!---->
        <!---->
    </div>

已尝试的解决方法 #

• 使用强制点击（click({force: true})）
• 在点击前后触发mousedown和mouseup事件模拟真实点击
• 添加显式等待（cy.wait(1000)）等待动画触发
• 安装cypress-real-events并使用.realClick()
• 尝试使用.type('{downarrow}')和.type('{enter}')
• 修改自定义命令，通过父元素.q-field定位并点击.q-field__control
• 强制修改输入框值并触发input事件
• 创建withinSelectMenu助手命令定位下拉菜单
• 安装@quasar/quasar-app-extension-testing-e2e-cypress尝试使用其功能

预期结果 #

Quasar q-select组件展开下拉框，*aria-expanded*属性变为true，显示可选选项，与正常浏览器表现一致。

实际结果 #

下拉框完全未展开。

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