Question

我正在尝试启用页面中包含的特定复选框。请查看下面的HTML代码

<div class="form-horizontal">

        <div class="row">

            <div class="col-sm-3">
                <label for="Url_url_option1">Option 1</label>
            </div>
            <div class="col-sm-1">
                <input type="checkbox" data-yesno-name="Url_option1" class="url-field-toggle">
        <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
                <input id="Url_option1" name="Url.url_option1" type="hidden" value="no">
                &nbsp;
            </div>


            <div class="col-sm-3">
                <label for="Url_option2">Option 2</label>
            </div>
            <div class="col-sm-1">
                <input type="checkbox" data-yesno-name="Url_option2" class="url-field-toggle">
        <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
                <input id="Url_option2" name="Url.option2" type="hidden" value="no">
                &nbsp;
            </div>


            <div class="col-sm-3">
                <label for="Url_option3">Option 3</label>
            </div>
            <div class="col-sm-1">
                <input type="checkbox" data-yesno-name="Url_option3" class="url-field-toggle">
        <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
                <input id="Url_option3" name="Url.option3" type="hidden" value="no">
                &nbsp;
            </div>
        </div>



        <div class="row">
            <div class="col-sm-12">
                &nbsp;
            </div>
        </div>
        <div class="row">

            <div class="col-sm-3">
                <label for="Url_option4">Option 4</label>
            </div>
            <div class="col-sm-1">
                <input type="checkbox" data-yesno-name="Url_option4" class="url-field-toggle">
        <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
                <input id="Url_option4" name="Url.option4" type="hidden" value="no">
                &nbsp;
            </div>

            <div class="col-sm-3">
                <label for="Url_option5">Option 5</label>
            </div>
            <div class="col-sm-1">
                <input type="checkbox" data-yesno-name="Url_option5" class="url-field-toggle">
        <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
                <input id="Url_option5" name="Url.option5" type="hidden" value="no">
                &nbsp;
            </div>

            <div class="col-sm-3">
                <label for="Url_option6">Option 6</label>
            </div>
            <div class="col-sm-1">
                <input type="checkbox" data-yesno-name="Url_option6" class="url-field-toggle">
        <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
                <input id="Url_option6" name="option6" type="hidden" value="no">
                &nbsp;
            </div>

        </div>

    </div>

所有复选框元素apepar都是唯一的，因此我可以使用标准的定位器来查找每个复选框，但是，当我尝试单击其中的任何一个时，都会出现“找不到元素”异常。
“隐藏”类型会阻止这些按钮被点击吗？

我要成功单击一个复选框的唯一方法是找到并单击以下元素：

<span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>

通过使用xpath定位器：

//*[@id="toggle_undefined"]

这正常。将click事件成功触发到复选框，但这显然只会将click触发到页面上的第一个元素（复选框）。

假设我要使用此xpath定位器单击第二行中的第二个复选框，那么如何使页面上每个元素（复选框）的xpath唯一？

在上面的HTML代码中，这是第二行的第二个复选框：

 <div class="col-sm-3">
                <label for="Url_option5">Option 5</label>
            </div>
            <div class="col-sm-1">
                <input type="checkbox" data-yesno-name="Url_option5" class="url-field-toggle">
        <span class="glyphicon clickable glyphicon-remove" id="toggle_undefined"></span>
                <input id="Url_option5" name="Url.option5" type="hidden" value="no">
                &nbsp;
            </div>

Answer 1

好吧，根据您的情况，您只需使用复选框输入元素的data-yesno-name属性即可唯一地标识复选框元素。用于定位选项5复选框的xpath示例：

//input[@type='checkbox' and @data-yesno-name='Url_option5']

如果单击此元素，它将正常工作。

此外，您可以通过以下策略唯一地标识所需的复选框：

假设您想要“选项5”旁边的复选框。现在，包含此复选框的<div>紧邻包含文本“选项5”的<div>。因此，您可以使用以下xpath找到与此文本相关的复选框：

//label[contains(text(),'Option 5')]//ancestor::div[@class='col-sm-3']/following-sibling::div[@class='col-sm-1']//input[@type='checkbox']

如何基于以下html找到一个复选框-Selenium WebDriver和C＃

1 个答案: