如何使用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"]

在这种情况下，将触发click事件，但显然只会单击页面上的第一个元素（在这种情况下，即复选框）（我在页面上有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

要使用类型复选框获得输入，只需使用下面的CSS选择器即可。

元件：

<input type="checkbox" data-yesno-name="Url_Transaction_Out" class="url-field-toggle" style="" checked="checked"><span class="glyphicon clickable glyphicon-ok" id="toggle_undefined">

CSS选择器：

input[data-yesno-name='Url_Transaction_Out']

码：

driver.FindElement(By.CssSelector("input[data-yesno-name='Url_Transaction_Out']")).Click();

要检查并选择：

IWebElement checkbox = driver.FindElement(By.CssSelector("input[data-yesno-name='Url_Transaction_Out']"));
if(!checkbox.IsSelected())
{
    checkbox.Click();
}

Answer 2

为此，请使用以下CSS选择器：

.url-field-toggle[data-yesno-name='Url_Transaction_Out']

代码是：

driver.FindElement(By.CssSelector("url-field-toggle[data-yesno-name='Url_Transaction_Out']")).Click();

希望对您有帮助！

Answer 3

根据您共享的HTML来在所需的复选框上调用click() ，您可以使用以下解决方案之一：

• CssSelector ：

   driver.FindElement(By.CssSelector("label[for=Url_Transaction_Out]")).Click(); 

• XPath ：

   driver.FindElement(By.XPath("//label[@for='Url_Transaction_Out']")).Click(); 

Answer 4

由于您需要单击SPAN，例如

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

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

大概我会用相对的LABEL查找SPAN，例如

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

您可以使用类似

//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");