How to click the checkbox using Selenium WebDriver and 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?

Which corresponding checkbox do you want to interact with Account Summary or Transactions? — undetected Selenium
– undetected Selenium, Commented Aug 21, 2018 at 20:51
The data-yesno-name="Url_Transaction_Out" looks to be unique, have you tried that in a locator? What have you tried? I don't see any code. — JeffC
– JeffC, Commented Aug 21, 2018 at 21:58
@Banjaxx Why are you updating the question without trying out the well researched answers from the volunteers? Did you try out any of the answers? Can you let us know the results? If your requirement have changed feel free to raise a new question instead of editing/updating the existing question. For the time being I am reverting back the question to it's previous state. — undetected Selenium
– undetected Selenium, Commented Aug 22, 2018 at 10:28

JeffC · Accepted Answer · 2018-08-22 13:58:37Z

2

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.

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

<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, e.g.

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

edited Aug 22, 2018 at 13:58

answered Aug 22, 2018 at 13:37

JeffC

26.4k5 gold badges35 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Banjaxx Over a year ago

A slight modification to the Xpath and this worked perfectly! I needed to use this: "FindElement(By.XPath("//label[@for='option1']//following::span[@id='toggle_undefined']"));"Thank you and sorry for any trouble :)

Sers · Accepted Answer · 2018-08-21 17:29:17Z

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();
}

edited Aug 21, 2018 at 17:29

answered Aug 21, 2018 at 17:11

Sers

12.3k2 gold badges14 silver badges33 bronze badges

1 Comment

Banjaxx Over a year ago

I've updated the question. Hopefully it's clearer now

undetected Selenium · Accepted Answer · 2018-08-22 07:44:15Z

1

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();

answered Aug 22, 2018 at 7:44

undetected Selenium

194k44 gold badges304 silver badges387 bronze badges

1 Comment

Banjaxx Over a year ago

None of the answers worked because my question didn't contain enough information to provide an accurate answer. Thank you for trying to help. I'm not going to mark any of the answers down because it wouldn't be fair. The answer provided below by jeffc is what I was looking for

Ratmir Asanov · Accepted Answer · 2019-01-22 10:01:15Z

1

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!

edited Jan 22, 2019 at 10:01

answered Aug 21, 2018 at 17:15

Ratmir Asanov

6,4795 gold badges30 silver badges44 bronze badges

1 Comment

Banjaxx Over a year ago

I've updated the question. Hopefully it's clearer now

Collectives™ on Stack Overflow

How to click the checkbox using Selenium WebDriver and C#

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related