c# - 如何使用 Selenium WebDriver 和 C# 单击复选框

Question

我想要做的是点击(或关闭)我页面上的任何复选框。正如您从 HTML 中看到的那样，每个复选框元素似乎都有一个唯一标识符，但是当我尝试单击它时，出现“找不到元素”异常。我已经尝试了所有标准定位器(也没有 iframe)——我可以找到复选框元素，没问题，但就是无法点击它。

请查看以下 HTML:

<div class="form-horizontal">
    <div class="row">
        <div class="col-sm-3">
            <label for="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_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_translation_c" 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="Url.option6" type="hidden" value="no"> &nbsp;
        </div>
    </div>
</div>

我可以单击任何复选框元素的唯一方法是找到以下元素:

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

使用 XPath 定位器:

i.e //*[@id="toggle_undefined"]

在这种情况下会触发点击事件，但它显然只会点击页面上的第一个元素(或本例中的复选框)(我在页面上有 20 多个复选框)。

根据上面的 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>

根据以上信息，我只能通过查找并单击以下元素来单击复选框:

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

我应该如何为这个元素创建一个唯一的 XPath 定位器，我可以用它来点击我页面上的任何复选框？

Answer 1

由于您需要单击 SPAN，例如

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

并且它上面没有唯一的标识符/属性，我们必须使用周围的元素之一来定位正确的标识符。

可能我会使用的是通过相关标签找到 SPAN，例如

<label for="Url_option1">Option 1</label>

您可以使用像这样的 XPath

//label[.='Option 3']//following::span[@id='toggle_undefined']

这样做是找到包含所需字符串“Option 3”的 LABEL，然后找到 ID 为“toggle_undefined”的第一个 SPAN。

如果是我，我会把它包装在一个函数中并传入我想要点击的选项名称，例如

public void Toggle(string optionName)
{
    Driver.Value.FindElement(By.XPath($"//label[.='{optionName}']//following::span[@id='toggle_undefined']")).Click();
}

并称它为

Toggle("Option 3");