Unable to perform click action on toggle button in selenium C#

Question

While trying to automate my application, one of the webpage has three toggle button and i need to select the same.

Below the HTML code:

 <div class="row">
                        <div class="col-md-12 ">
                            <label class="control-label dl-padding-top-5" for="consentToBureau">Do you give consent for Capitec to do a credit bureau enquiry?</label>
                            <span class="pull-right dl-padding-top-5">
                                <label class="dl-switch">
                                    <input type="checkbox" checked="checked" value="false" name="consentToBureau" id="BureauConcentInput" required="" onchange="hideErrorById('BureauConcent')" class="dl-border-red">
                                    <span class="dl-slider dl-round"></span>
                                </label>
                            </span>
                            <span class="col-md-12 dl-error-msg dl-top-border-red" id="BureauConcentError">Tick to accept the Bureau Concent</span>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-md-12">
                            <label class="control-label dl-padding-top-5" for="acceptTerms">Do you accept these terms of use?</label>
                            <span class="pull-right dl-padding-top-5">
                                <label class="dl-switch">
                                    <input type="checkbox" checked="checked" name="acceptTerms" id="TermsAndConditionsInput" required="" onchange="hideErrorById('TermsAndConditions')" class="dl-border-red">
                                    <span class="dl-slider dl-round"></span>
                                </label>
                            </span>
                            <span class="col-md-12 dl-error-msg dl-top-border-red" id="TermsAndConditionsError" style="">Tick to accept the term of use</span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <label class="control-label dl-padding-top-5">Salary paid into Capitec account?</label>
                            <span class="pull-right dl-padding-top-5">
                                <label class="dl-switch">
                                    <input type="checkbox" name="CapitecClient" id="isCapitecClientInput" required="" onchange="hideError(this)">
                                    <span class="dl-slider dl-round"></span>
                                </label>
                            </span>
                        </div>
                    </div> 

The click on the each toggle button lands on span class="pull-right dl-padding-top-5" but this class is similar for all three toggle buttons. But each toggle button has unique 'for' attribute and ID.

Below is the code tried but getting error as unable to locate element.

IWebElement Toggle = driver.FindElement(By.CssSelector("input[id='BureauConcentInput']>span[class='dl-slider dl-round']"));
            Toggle.Click();
(or)
            IWebElement Toggle = driver.FindElement(By.XPath("//*[@id='BureauConcentInput']/span"));
            Toggle.Click();

Kindly suggest the right way to locate the element.

Answer 1

When you hover over the element in your browser tools, do you happen to see any visible/highlighted element? If not, that's the first indication that Selenium wouldn't be able to find it as well.

Your XPath was looking for a span child of the element with an id of "BureauConcentInput", however, the span was a sibling (eg it was in the same level of the document tree as the element). There are a few ways to getting to the span, but here are two:

//input[@id='BureauConcentInput']/..//span
//input[@id='BureauConcentInput']/following-sibling::span

Without necessarily seeing the page or knowing what UI framework the switches belong to (dl-slider), this answer would be my best guesstimate as the span doesn't seem to be a clickable element to me in its current state:

driver.FindElement(By.XPath("//input[@id='BureauConcentInput']/ancestor::span")).Click();

Update:

It appears as though your footer navbar at the bottom of the page is above the checkbox you want to select. You can attempt to scroll to the element first and then click. Check your window size - that could be an issue as well.

Here is an extension method for Scroll:

public static IWebElement Scroll(this IWebElement element)
{
    IWebDriver driver = ((IWrapsDriver)element).WrappedDriver;
    string script = "const elementRect = arguments[0].getBoundingClientRect();" +
                    "const absoluteElementTop = elementRect.top + window.pageYOffset;" +
                    "const middle = absoluteElementTop - (window.innerHeight / 2);" +
                    "window.scrollTo(0, middle);";
    ((IJavaScriptExecutor)driver).ExecuteScript(script, element);
    return element;
}

You can use it right before Click() - eg driver.FindElement().Scroll().Click();

If that doesn't work, your next option would be to use the scrollIntoView() js method:

public static void ScrollIntoView(this IWebElement driver, string xpath)
{
    ((IJavaScriptExecutor)driver).ExecuteScript($"document.evaluate(\"{xpath}\", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.scrollIntoView()");
}

You will have to use this on a separate line - eg driver.ScrollIntoView("insert xpath here");

Answer 2

You could do something like the below.

driver.FindElement(By.Id("BureauConcentInput")).Click();
driver.FindElement(By.Id("isCapitecClientInput")).Click();
driver.FindElement(By.Id("TermsAndConditionsInput")).Click();

The one question I meant to ask you is, are the checkboxes all unchecked to begin with? If some are checked you you will want another method to determine the current state so that if you want to check the Terms and Conditions box, and it was already checked, you have no just unchecked it.