无法对 selenium C# 中的切换按钮执行单击操作

Question

在尝试自动化我的应用程序时，其中一个网页有三个切换按钮，我需要选择相同的。

HTML 代码下方：

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

每个切换按钮上的点击落在 span class="pull-right dl-padding-top-5" 但是这个类对于所有三个切换按钮都是相似的。但是每个切换按钮都有唯一的“for”属性和 ID。

以下是尝试过的代码，但由于无法定位元素而出现错误。

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

请提出正确的定位元素的方法。

Answer 1

当您将鼠标悬停在浏览器工具中的元素上时，您是否碰巧看到任何可见/突出显示的元素？如果没有，这是 Selenium 也无法找到它的第一个迹象。

您的 XPath 正在寻找 id 为“BureauConcentInput”的元素的 span 子元素，但是，span 是同级元素（例如，它与元素位于文档树的同一级别）。有几种方法可以到达跨度，但这里有两种：

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

不必看到页面或知道开关属于哪个 UI 框架（dl-slider），这个答案将是我最好的猜测，因为跨度在当前状态下对我来说似乎不是可点击的元素：

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

更新：

页面底部的页脚导航栏似乎位于您要选择的复选框上方。您可以尝试先滚动到该元素，然后单击。检查您的窗口大小 - 这也可能是一个问题。

这是一个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;
}

您可以在 Click() 之前使用它 - 例如driver.FindElement().Scroll().Click();

如果这不起作用，您的下一个选择是使用 scrollIntoView() js 方法：

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

您必须在单独的行上使用它 - 例如driver.ScrollIntoView("insert xpath here");

Answer 2

您可以执行以下操作。

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

我想问你的一个问题是，复选框是否一开始都未选中？如果选中了一些，您将需要另一种方法来确定当前状态，以便如果您想选中条款和条件框，并且它已经被选中，您不会只是取消选中它。