Question

当我使用Metrial UI复选框（React Material UI复选框组件，替换标准复选框表单元素）时。如果打开或关闭它，我如何告诉使用Webdriver或类似的浏览器控制器？或者更具体地说，推荐的方式是什么？我可以添加一个事件监听器并添加一个on / off类型属性。但开箱即用的方式是否更好？显然道具改变但是webdriver不可用，我想基于道具添加一个属性会起作用，但试图避免这种情况。以下是我的代码中webdriver可用的输出。希望得到webdriver和＆＃34;材料ui复选框的反应组件＆＃34;提供一些见解的经验。

<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);
}

物料UI复选框打开或关闭？

1 个答案: