材质 UI 复选框打开还是关闭？

Question

当我使用 Metrial UI Checkbox（React Material UI Checkbox 组件，替换标准的复选框表单元素）时。我如何判断使用 Webdriver 或类似的浏览器控制器是否打开或关闭？或者更具体地说，推荐的方法是什么？我可以添加一个事件侦听器并添加一个开/关类型属性。但是有更好的开箱即用方式吗？显然，道具发生了变化，但 webdriver 无法使用，我想添加基于道具的属性会起作用，但会尽量避免这种情况。下面是我的代码中 webdriver 可用的输出。希望有 webdriver 和“材料 ui 复选框反应组件”经验的人提供一些见解。

<div class="checkbox-0-61">
   <div style="cursor: pointer; position: relative; overflow: visible; display: table; height: auto; width: 100%;">
      <!-- react-empty: 92 --><input type="checkbox" value="on" style="position: absolute; cursor: inherit; pointer-events: all; opacity: 0; width: 100%; height: 100%; z-index: 2; left: 0px; box-sizing: border-box; padding: 0px; margin: 0px;">
      <div style="display: flex; width: 100%; height: 100%;">
         <div style="transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; float: left; position: relative; display: block; flex-shrink: 0; width: 24px; margin-right: 16px; margin-left: 0px; height: 24px;">
            <div>
               <svg viewBox="0 0 24 24" style="display: inline-block; color: rgb(0, 0, 0); fill: rgb(0, 114, 234); height: 24px; width: 24px; user-select: none; transition: opacity 650ms cubic-bezier(0.23, 1, 0.32, 1) 150ms; position: absolute; opacity: 0;">
                  <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
               </svg>
               <svg viewBox="0 0 24 24" style="display: inline-block; color: rgb(0, 0, 0); fill: rgb(0, 114, 234); height: 24px; width: 24px; user-select: none; transition: opacity 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, transform 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; position: absolute; opacity: 1; transform: scale(1);">
                  <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
               </svg>
            </div>
            <div><span style="height: 200%; width: 200%; position: absolute; top: -12px; left: -12px; overflow: hidden; pointer-events: none; color: rgb(0, 114, 234);"></span></div>
            <div style="position: absolute; height: 100%; width: 100%; top: 0px; left: 0px;"></div>
         </div>
         <label style="float: left; position: relative; display: block; width: calc(100% - 60px); line-height: 24px; color: rgba(0, 0, 0, 0.54); font-family: Roboto, sans-serif;">My Checkbox</label>
      </div>
   </div>
</div>

Answer 1

你可以使用javascript

public boolean isChecked(WebElement element) {
    return (boolean) ((JavascriptExecutor) driver).executeScript("return arguments[0].checked", element);
}