無法在 selenium C# 中的切換按鈕上執行單擊操作

Question

在嘗試自動化我的應用程序時，其中一個網頁有三個切換按鈕，我需要 select 相同。

在 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" 但是這個 class 對於所有三個切換按鈕都是相似的。 但是每個切換按鈕都有唯一的“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

當您在瀏覽器工具中的元素上 hover 時，您是否碰巧看到任何可見/突出顯示的元素？ 如果沒有，這是 Selenium 也無法找到它的第一個跡象。

您的 XPath 正在尋找 id 為“BureauConcentInput”的元素的跨度子級，但是，跨度是同級的（例如，它與元素位於文檔樹的同一級別）。 有幾種方法可以到達跨度，但這里有兩種：

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

不必看到頁面或知道開關屬於哪個 UI 框架（dl-slider），這個答案將是我最好的猜測，因為在當前的 state 中，跨度對我來說似乎不是可點擊的元素：

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

更新：

看起來好像頁面底部的頁腳導航欄位於您想要 select 的復選框上方。 您可以嘗試先滾動到該元素，然后單擊。 檢查您的 window 尺寸 - 這也可能是一個問題。

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

我想問你的一個問題是，復選框是否一開始都未選中？ 如果有一些被選中，您將需要另一種方法來確定當前的 state，這樣如果您想選中條款和條件框，並且它已經被選中，那么您不會只是取消選中它。