使用SpecFlow和Selenium查找元素

Question

我正在尝试从这个网址 https://marketsmithindia.com/mstool/landing.jsp#/signIn 找到谷歌登录按钮，但在操作过程中遇到了 NoSuchElementException 异常。

我正在使用 Specflow 进行这项工作，这其实是一个很基础的操作：仅需打开浏览器、导航至指定URL，然后点击登录按钮。以下是我在使用的代码片段：

_driver = new EdgeDriver();
_driver.Manage().Window.Maximize();
_driver.Url = "https://marketsmithindia.com/mstool/landing.jsp#/signIn";
Thread.Sleep(3000);

// 这段代码用于点击条款和条件对话框中的“同意”按钮
var element = _driver.FindElement(By.XPath("//*[@id='msi_non_eu_popup']/div/div/div[3]/button"));
if (element != null)
{
    element.Click();
}
Thread.Sleep(5000);

// 下面这一行代码抛出了 NoSuchElementException 异常
var googleButtonElement = _driver.FindElement(By.XPath("//*[@id='googlebtnclick']"));

如果能得到帮助或建议，让这段代码能够正常工作，我将非常感激。

Adam Rackis · Answer

谷歌登录按钮位于 Shadow DOM 中。为了访问该元素，您首先需要进入 shadow-root 元素。请参考附图：
Google 登录按钮位于 Shadow DOM 中的示意图

要访问此元素，请使用 JavasciptExecutor 并通过以下脚本来实现：

IJavaScriptExecutor js = (IJavaScriptExecutor)_driver;
var googleButtonElement = js.ExecuteScript("return document.querySelector('user-login').shadowRoot.querySelector('#googlebtnclick');");

khmarbaise · Answer

您应当使用 GetShadowRoot 方法，并在 Shadow Root DOM 环境中筛选您的元素。

如下代码所示：

driver
     .FindElement(By.Id("userlogin")) // 先找到包含 Shadow DOM 的元素
     .GetShadowRoot() // 这将给您提供 Shadow Root 的上下文
     .FindElement(By.Id("googlebtnclick")); // 在 Shadow Root 中查找谷歌登录按钮