如何在Chromeless中操作ul/li结构的下拉菜单

针对你遇到的这种非原生<select>、用ul/li构建的自定义下拉菜单，下面几个JavaScript方案应该能帮你解决问题，完美适配Chromeless的操作逻辑：

方案1：直接定位目标选项并触发点击 #

这种方法最直接，通过文本匹配找到对应的label元素，然后触发点击事件。如果菜单默认是收起状态，记得先触发展开操作：

// 先点击触发菜单展开（替换成你的菜单触发元素选择器，比如触发按钮或菜单容器）
.click('.o_dropdown_theme_values')
// 定位并点击目标选项
.evaluate((targetOption) => {
  // 选中所有菜单选项的label
  const optionLabels = document.querySelectorAll('.o_dropdown_theme_values li label.myclass');
  // 遍历找到文本匹配的选项
  for (const label of optionLabels) {
    if (label.textContent.trim() === targetOption) {
      // 先让父li获得焦点（部分自定义菜单需要焦点才能响应交互）
      label.parentElement.focus();
      // 触发点击事件，用dispatchEvent兼容性更强
      label.dispatchEvent(new MouseEvent('click', { 
        bubbles: true, 
        cancelable: true,
        view: window
      }));
      break;
    }
  }
}, 'Category 1') // 传入你要选择的选项文本

方案2：修复键盘导航的问题 #

你之前遇到Tab键无效、Down键仅能触发一次的问题，大概率是因为菜单容器没有正确获得焦点。试试先让下拉菜单的ul元素获取焦点，再执行键盘操作：

// 先让下拉菜单容器获得焦点
.evaluate(() => {
  const dropdownMenu = document.querySelector('.o_dropdown_theme_values');
  dropdownMenu.focus();
})
// 按Down键导航到目标选项（比如选第二个选项就按两次）
.press('ArrowDown')
.press('ArrowDown')
// 按Enter键确认选择
.press('Enter')

如果上述方法还是无效，可以在evaluate里直接模拟键盘事件，精准控制触发逻辑：

.evaluate((downKeyCount) => {
  const dropdownMenu = document.querySelector('.o_dropdown_theme_values');
  dropdownMenu.focus();
  // 多次触发Down键事件
  for (let i = 0; i < downKeyCount; i++) {
    dropdownMenu.dispatchEvent(new KeyboardEvent('keydown', {
      key: 'ArrowDown',
      code: 'ArrowDown',
      bubbles: true
    }));
  }
  // 触发Enter键确认选择
  dropdownMenu.dispatchEvent(new KeyboardEvent('keydown', {
    key: 'Enter',
    code: 'Enter',
    bubbles: true
  }));
}, 2) // 传入需要按Down键的次数

关键注意事项 #

• 动态加载的菜单：如果菜单是异步渲染的，记得先添加等待逻辑，确保元素已加载完成：

  .wait(() => document.querySelector('.o_dropdown_theme_values li label.myclass') !== null)
  

• 文本匹配准确性：一定要用trim()处理选项文本，避免HTML中的换行、空格导致匹配失败；如果选项有唯一ID或自定义属性，用这些属性定位会比文本更可靠。
• 事件兼容性：部分自定义菜单会监听mousedown而非click事件，如果点击无效，可以尝试触发mousedown事件替代。

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