Karate UI动态下拉列表选项选择异常：点击无实际响应

问题场景 #

执行WOM家庭互联网可行性验证的Karate UI测试时，点击动态下拉选项“LO ESPEJO”，测试报告显示点击成功，但未触发实际选择动作。测试代码如下：

# Seleccionar Menú Hogar -> Internet Hogar
When waitFor("//a[@class='h-bt-sub-mnu']//span[contains(text(),'Hogar')]").click()
And waitFor("//span[normalize-space()='Internet Hogar']").click()
* delay(10000)
Then match driver.title == 'Internet Hogar | Planes en oferta | Contrata con descuentos'

# Verificar factibilidad exitosa ingresando Región, Comuna y calle y número
* scroll("//h2[contains(text(),'Verifica la factibilidad de Internet Hogar WOM en ')]")
And match text("//h2[contains(text(),'Verifica la factibilidad de Internet Hogar WOM en ')]") == 'Verifica la factibilidad de Internet Hogar WOM en tu barrio'
* delay(5000)

# seleccionar region


# seleccionar comuna
* waitFor("#city_in_plp").click()
* delay(10000)
* scroll("//div[@class='item' and contains(text(),'LO ESPEJO')]")
* waitForText("//div[@class='item' and contains(text(),'LO ESPEJO')]", "LO ESPEJO")
* click("//div[@class='item' and contains(text(),'LO ESPEJO')]")
* delay(5000)

解决方案 #

以下是针对动态下拉点击无响应的几种有效处理方式：

• 确保元素处于可交互状态
  仅等待元素存在或文本可见可能不够，需确认元素已完全加载并可点击。替换固定延迟为等待下拉展开，同时验证元素可点击：

  # seleccionar comuna
  * waitFor("#city_in_plp").click()
  # 等待下拉菜单展开，替代固定delay
  * waitFor("//div[@class='dropdown-menu' and not(contains(@style,'display: none'))]")
  * scroll("//div[@class='item' and contains(text(),'LO ESPEJO')]")
  * waitForEnabled("//div[@class='item' and contains(text(),'LO ESPEJO')]")
  * click("//div[@class='item' and contains(text(),'LO ESPEJO')]")
  

• 模拟真实鼠标点击动作
  部分动态下拉需要完整的鼠标事件链触发，使用Karate的mouse()方法模拟原生点击行为：

  # seleccionar comuna
  * waitFor("#city_in_plp").click()
  * waitFor("//div[@class='dropdown-menu' and not(contains(@style,'display: none'))]")
  * def targetElement = waitFor("//div[@class='item' and contains(text(),'LO ESPEJO')]")
  * scroll(targetElement)
  * mouse().click(targetElement)
  

• 直接触发JS事件（适配前端框架实现的下拉）
  若下拉基于Vue/React等框架开发，可能需要手动触发框架监听的input或change事件：

  # seleccionar comuna
  * waitFor("#city_in_plp").click()
  * waitFor("//div[@class='item' and contains(text(),'LO ESPEJO')]")
  * script("""
      const item = document.querySelector("//div[@class='item' and contains(text(),'LO ESPEJO')]");
      item.click();
      // 触发框架所需的事件，根据实际页面调整
      item.dispatchEvent(new Event('input', { bubbles: true }));
      item.dispatchEvent(new Event('change', { bubbles: true }));
    """)
  

• 优化元素定位精度
  避免匹配到隐藏的重复元素，结合下拉展开状态缩小定位范围：

  # seleccionar comuna
  * waitFor("#city_in_plp").click()
  * waitFor("//div[contains(@class,'dropdown-open')]")
  * click("//div[contains(@class,'dropdown-open')]//div[@class='item' and text()='LO ESPEJO']")
  

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