Cypress测试点击自动完成下拉框选项未实际选中问题求助

问题核心原因 #

• jQuery UI 官方示例站点的演示内容嵌套在 iframe 标签中，直接在顶层 DOM 查找元素无法定位到目标下拉选项
• 自动完成下拉选项是输入字符后异步渲染生成的，未等待元素完全可见就执行点击，会导致点击无实际效果
• 原有测试代码存在语法冗余，多写了一个闭合大括号，也可能导致执行异常

修复后的可运行代码 #

it('Test to grab the autocomplete values', () => {
    cy.visit('https://jqueryui.com/autocomplete/');
    // 切换进入示例所在的iframe上下文
    cy.get('.demo-frame').its('0.contentDocument.body').within(() => {
        cy.get('#tags').type('c')
        // 等待下拉选项渲染可见后再执行点击
        cy.get('#ui-id-2').should('be.visible').first().click()
        // 可选：添加断言验证选中结果符合预期
        cy.get('#tags').should('have.value', 'Clojure')
    })
})

备选兼容方案 #

如果上述修改后仍然点击失败，可以尝试以下适配方案：

• 改用trigger触发点击事件，适配组件自定义的事件监听逻辑：

  cy.get('#ui-id-2').should('be.visible').trigger('click')
  

• 按文本内容匹配目标选项，避免动态ID不稳定导致的定位失败：

  cy.contains('.ui-menu-item', 'Clojure').should('be.visible').click()
  

内容的提问来源于stack exchange，提问作者Yazan Abu Hussein