如何根据以下 html - Selenium WebDriver 和 C# 查找复选框

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"]

这工作正常。 单击事件会成功触发到复选框，但这显然只会触发对页面上第一个元素(复选框(的单击。

假设我想使用此 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']