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.

ilike2breakthngs · Accepted Answer · 2020-05-11 20:06:17Z

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 (e.g. 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() - e.g. 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 - e.g. driver.ScrollIntoView("insert xpath here");

edited May 11, 2020 at 20:06

answered May 6, 2020 at 19:42

ilike2breakthngs

4255 silver badges9 bronze badges

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

5 Comments

Balaji Mohan Over a year ago

Now after using the above code i am getting a new error.Before that i was getting no such element error.

Balaji Mohan Over a year ago

Message: OpenQA.Selenium.ElementClickInterceptedException : element click intercepted: Element <span class="pull-right dl-padding-top-5">...</span> is not clickable at point (847, 642). Other element would receive the click: <div class="footer navbar-fixed-bottom">...</div> (Session info: chrome=81.0.4044.92)

ilike2breakthngs Over a year ago

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.

Balaji Mohan Over a year ago

I appreciate you for taking time to answer my question.

Balaji Mohan Over a year ago

driver.FindElement(By.XPath("//input[@id='BureauConcentInput']/ancestor::span")).Click(); This code worked for me when i used the same xpath in javascriptexecutor. Thanks a lot

Dazed · Accepted Answer · 2020-05-07 00:44:26Z

0

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.

edited May 7, 2020 at 0:44

answered May 6, 2020 at 19:26

Dazed

1,5511 gold badge13 silver badges25 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related