如何使用Selenium WebDriver和C＃单击复选框

Question

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.

Please view the following 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>  

Using an XPath locator:

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

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

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>

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?

Answer 1

To get input with type checkbox just use css selector below.

Element:

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

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

Code:

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

To check and select:

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

Answer 2

Use the following CSS Selector for that:

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

Code is:

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

Hope it helps you!

Answer 3

As per the HTML you have shared to invoke click() on the desired checkbox you can use either of the following solutions:

• CssSelector :

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

• XPath :

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

Answer 4

Since you need to click the SPAN, eg

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

Probably what I would use is to find the SPAN by the relative LABEL, eg

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

You can use an XPath like

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

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

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

and call it like

Toggle("Option 3");