如何使用Selenium WebDriver和C#单击复选框 [英] How to click the checkbox using Selenium WebDriver and C#

问题描述

我想做的是单击(或关闭)页面上的任何复选框.从HTML中可以看到，每个复选框元素似乎都有一个唯一的标识符，但是当我尝试单击它时，出现了找不到元素"异常.我已经尝试了所有标准定位器(也没有iframe)- 我可以找到复选框元素，但是不能单击它.

What I'm trying to do is click on (or off) any of the checkboxes on my page. As you can see from the HTML, each checkbox element would appear to have a unique identifier but when I try to click on it, I get an "Element not found" exception. I've tried all the standard locators (there's no iframe either) -- I can find the checkbox element, ok but just can't click on it.

请查看以下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>

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

The only way I can click on any of the check box elements is by locating the following element:

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

使用XPath定位器:

Using an XPath locator:

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

在这种情况下，将触发click事件，但显然只会单击页面上的第一个元素(在这种情况下，即复选框)(我在页面上有20个以上的复选框).

The click event gets fired in this case but it will obviously only click on the first element (or checkbox in this case) on the page (I've over 20 checkboxes on the page).

根据上面的HTML代码，假设我要在第二行启用第二个复选框元素.这是此复选框元素的代码:

Based on the HTML code above, let's say I wanted to enable the second checkbox element on row two. Here is the code for this checkbox element:

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

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

Based on the info above I can only click the checkbox by finding and clicking on the following element:

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

我应该如何为此元素创建一个唯一的XPath定位器，以便单击页面上的任何复选框?

How am I supposed to create a unique XPath locator for this element that I could use to click on any of the checkboxes on my page?

推荐答案

因为您需要单击SPAN，例如

Since you need to click the SPAN, e.g.

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

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

and there's no unique identifiers/attributes on it, we'll have to locate the right one by using one of the surrounding elements.

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

Probably what I would use is to find the SPAN by the relative LABEL, e.g.

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

您可以使用类似的XPath

You can use an XPath like

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

这是查找包含所需字符串'Option 3'的标签，然后找到ID为'toggle_undefined'的第一个SPAN.

What this does is finds the LABEL that contains the desired string, 'Option 3', and then finds the first SPAN that follows with the ID 'toggle_undefined'.

如果是我，我会将其包装在一个函数中，然后传递我想要单击的选项名称，例如

If it were me, I would wrap this in a function and pass in the option name I was looking to click, e.g.

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

并称呼它

Toggle("Option 3");

这篇关于如何使用Selenium WebDriver和C#单击复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！