浏览器控制台无法单击下拉菜单

Question

我应该选择/匹配哪个元素并以编程方式在控制台中单击以显示下面的下拉菜单？

<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-8 MuiGrid-grid-sm-4">
 <label class="jss2019 jss2020 jss2024" role="group" aria-labelledby="rate-per-acre-label">
 <span class="MuiFormLabel-root jss2021 jss2028">Rate/Acre</span>
 <div class="jss2027">
  <div class="jss2025 jss2014">
   <div class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth" data-test="rate-value-input">
    <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense">
     <input aria-invalid="false" id="rate-per-acre-left" name="rateValue" type="text" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense" value="0">
     <fieldset aria-hidden="true" style="padding-left: 8px;" class="jss41 MuiOutlinedInput-notchedOutline">
      <legend class="jss42" style="width: 0.01px;">
       <span>​</span>
      </legend>
     </fieldset>
    </div>
   </div>
  </div>
  <div class="jss2026">
   <div class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth" data-test="rate-unit-dropdown">
    <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense">
     <div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense" tabindex="0" role="button" aria-haspopup="listbox" aria-labelledby="rate-per-acre-right"
 id="rate-per-acre-right"
    >BG</div>
     <input name="rateUnit" aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" value="bg">
     <svg class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z">
      </path>
     </svg>
     <fieldset aria-hidden="true" style="padding-left: 8px;" class="jss41 MuiOutlinedInput-notchedOutline">
      <legend class="jss42" style="width: 0.01px;">
       <span>​</span>
      </legend>
     </fieldset>
    </div>
   </div>
  </div>
 </div>
 </label>
</div>

我已经尝试了几个元素。但是，无法点击它。 DOM 是否需要有一个按钮元素才能点击？

这两个在 Chrome/FF 的控制台中不起作用：

$('[id="rate-per-acre-right"]').click()
$('[data-test="rate-unit-dropdown"]').click()

进一步的调查表明，尝试使用 click() 单击 SVG 元素会出现 show errors，因为 SVG 元素没有 click 方法。

附加信息

• 问题中label元素占用的屏幕区域：https://i.stack.imgur.com/GfTVw.png
• 一些与“作物和成熟度”下拉列表相关的 HTML：https://i.stack.imgur.com/NyHZC.png
• “作物和成熟度”的标签区域显示玉米为作物：https://i.stack.imgur.com/KLs3E.png
• 与裁剪和成熟度下拉菜单相关的 HTML 动画 gif。

Answer 1

DOM 是否需要有一个按钮元素才能点击？

没有。任何元素都可以添加一个事件侦听器来侦听点击，但需要注意的是可以在 CSS 中关闭对事件的响应，并且隐藏或位于具有更高堆叠顺序的元素后面的元素不会响应鼠标输入。

我应该选择/匹配哪个元素来点击下拉菜单

查看发布的 HTML 的 DOM 结构，单击 SVG 元素应该可以工作 - 真正单击它会沿着 DOM 向上移动到正在侦听单击的任何事件侦听器。让点击在 Selenium 中工作假设它在测试之外的真实浏览器中工作 - 这在帖子中没有得到证实。

---

后记：实际上，您可以在浏览器中显示页面并右键单击被单击的元素。选择“检查元素”以显示它是哪个元素。

---

更新：

1. 实际上svg 和path 元素是SVG，而不是HTML，元素并且没有click 方法。然而：

   • svg 元素位于label 语句中，单击它会向label 标签适用的元素（在发布的代码中是所选元素）发送一个新事件，并更新目标值input#rate-per-acre-left)。

   模拟对标签元素的点击也会向标签元素调度一个新的点击事件。

   虽然您可以在 jQuery 中触发 svg 元素的点击事件，但模拟标签元素的点击应该等同于点击标签标签内容中的任意位置：

      $('[aria-labelledby="rate-per-acre-label"]').click()
   

2. 可能需要检查

   • 菜单处理程序正在侦听的元素。
   • 处理程序正在侦听的事件类型。 HTMLElement.click() 不在元素上的 mousedown 和 mouseup 事件之前触发。
   • 处理程序在继续之前验证哪些 event 属性，例如是否需要 event.target 或 event.currentTarget 的特定值才能继续？

   ( 一个代码 sn-p 用于演示 click() 产生的事件：

"use strict";
div.addEventListener("mousedown", event=>console.log(event.type));
div.addEventListener("mouseover", event=>console.log(event.type));
div.addEventListener("mouseup", event=>console.log(event.type));
div.addEventListener("mouseout", event=>console.log(event.type));
div.addEventListener("click", event=>console.log(event.type));

setTimeout(()=>div.click(), 3000)

<div id="div">Click me and/or wait for <code>.click</code> method to be called</div>

)