如何使用 selenium 网络驱动程序 select 复选框

Question

在我的网页（或弹出窗口）中，有多个输入框和复选框。输入框和复选框位于单独的 div 标记中。这是我的 html 代码：

<div class="modal-body-large">
    <div class="col-md-12 step-forms custom-tab-content">
        <form class="form-horizontal form-sections">
            <div class="form-group">
                <label class="control-label col-sm-2">Username<span class="red">*</span></label>
                <div class="col-sm-10">
                    <input name="userId" class="form-control custom-form-control" type="text" placeholder="Username" value="">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">Email<span class="red">*</span></label>
                <div class="col-sm-10">
                    <input name="email" class="form-control custom-form-control" type="text" placeholder="Email" value="">
                </div>
            </div>
            .....
        </form>
    </div>
    <div class="col-md-12 step-forms custom-tab-content">
        <form class="form-horizontal"><span class="help-block" style="font-size: small;"><i>Note: Optional</i></span>
            <div class="col-md-6">
                <div>
                    <div class="form-sections">
                        <ul>
                            <li>Select permissions</li>
                            <li>
                                <input type="checkbox" id="permissions1565851434728" name="permissions">
                                <label for="permissions1565851434728" class="xh-highlight">Select all</label>
                            </li>
                        </ul>
                        <div class="searchbox-container">
                            <div class="check-list">
                                <ul>
                                    <li title="">
                                        <input type="checkbox" id="371565851434728" name="permissions" value="Add/Update Network Security">
                                        <label for="371565851434728" class="">Add/Update Network Security</label>
                                    </li>
                                    <li title="">
                                        <input type="checkbox" id="111565851434728" name="permissions" value="Add/Update Permissions">
                                        <label for="111565851434728" class="">Add/Update Permissions</label>
                                    </li>
                                    .....
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-sections">
                    <ul>
                        <li>Select roles</li>
                        <li>
                            <input type="checkbox" id="roles1565851434730" name="roles">
                            <label for="roles1565851434730">Select all</label>
                        </li>
                    </ul>
                    <div class="searchbox-container">
                        <div class="check-list">
                            <ul>
                                <li title="Update User Details,Create User,Create Project">
                                    <input type="checkbox" id="role-c98974c6-a4b1-4428-9d9e-7df9f00acd351565851434730" name="roles" value="test">
                                    <label for="role-c98974c6-a4b1-4428-9d9e-7df9f00acd351565851434730">test</label>
                                </li>
                                .....
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

当我来到这个页面时，我能够成功地在输入字段中输入文本。当涉及到 select 复选框时，我必须为该复选框提供完整的 xpath。就像，如果我想 select 复选框 Select 全部，我将 xpath 设置为

"/html/body/div[@id='app']/div[@class='_loading-overlay']/main/div[@class='container-fluid search_table_container']/div[1]/div[@class='identity-management']/div[@class='row identity-list']/div/div[@class='filter-head col-md-12']/div[@class='search_right']/div[@class='modal fade in']/div[@class='modal-dialog modal-lg']/div[@class='modal-content']/div[@class='modal-body-large']/div[@class='col-md-12 step-forms custom-tab-content'][2]/form[@class='form-horizontal']/div[@class='col-md-6'][1]/div/div[@class='form-sections']/ul/li[2]/label"

我担心是否有其他方法可以做到这一点？

Answer 1

你可以使用叔元素的文本。要在 Select permissions 下获得 Select all，您可以使用

//li[contains(., 'Select permissions')]/following-sibling::li/label

Answer 2

您可以使用 xpath，并使用 WebDriverWait 让元素存在，然后使用 Actions，试试这个：

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//*[@type='checkbox' and contains(@id,'permissions')]")));
WebElement elmnt = driver.findElement(By.xpath("//*[@type='checkbox' and contains(@id,'permissions')]"));
Actions act = new Actions(driver);
act.moveToElement(elmnt).click().build().perform();

或

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("(//*[@type='checkbox'])[1]")));
WebElement elmnt = driver.findElement(By.xpath("(//*[@type='checkbox'])[1]"));
Actions act = new Actions(driver);
act.moveToElement(elmnt).click().build().perform();

如果您想要另一个复选框，请将 [1] 更改为 [2] 等。

Answer 3

Select选中复选框类似于单击按钮。我看到所有复选框都有 id，某些复选框也有 value 字段。所以你可以使用下面的方法来完成你所需要的。

Select 复选框使用 id 传递给 XPath,

driver.findElement(By.xpath(".//*[@id='permissions1565851434728']")).sendKeys(Keys.SPACE);

您可以单击复选框而不是像下面这样发送密钥，

WebElement checkBox = driver.findElement(By.id("permissions1565851434728"));
checkBox.click();

Select 复选框使用 value 传递给 CSSSelector,

WebElement checkBox = driver.findElement(By.cssSelector("input[value='Add/Update Network Security']"));
checkBox.click();

如果有 2 个复选框，您可以按如下方式使用，

driver.FindElements(By.xpath("(//input[@type='checkbox'])[1]"));
driver.FindElements(By.xpath("(//input[@type='checkbox'])[2]")); ...

Selenium WebDriver 使用浏览器的本地方法与 Web 组件进行交互。尽管如此，有时 Web 组件不会对这些本机方法做出反应。在这种情况下，您最可靠的选择是 JavaScript.

因此您可以尝试以下JavaScript与网络元素进行交互，

WebElement element = driver.findElement(By.cssSelector("input[value='Add/Update Network Security']"));

((JavascriptExecutor)driver).executeScript("arguments[0].click();", element);

你也可以试试说的 WebDriverWait。

Answer 4

对于 Select Roles 复选框：

//li[text()='Select roles']/following-sibling::li/input

对于Select Permissions复选框同样的做法：

//li[text()='Select permissions']/following-sibling::li/input

following-sibling is XPath Axis returning the next node having the same parent and text() is XPath function匹配节点文本内容

Answer 5

将click()上的复选框与<label>关联为Select全部由于所需的元素在 Modal Dialog 中，您必须为 elementToBeClickable() 引入 WebDriverWait 并且您可以使用以下 :

xpath:

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//li[text()='Select permissions']//following::li[1]//label"))).click();

如何使用 selenium 网络驱动程序 select 复选框

How to select checkbox using selenium web driver

java

selenium

xpath

selenium-webdriver

webdriverwait