Finding an element using specflow and selenium

Question

I am trying to find the google login button from this url

https://marketsmithindia.com/mstool/landing.jsp#/signIn

and getting this exception NoSuchElementException

I am using Specflow, it is the most basic thing, just opening the browser, navigating the url and click the button.

Here is some code that I am using

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


//this is just clicking the Agreed button on terms and conditions dialog
var element = _driver.FindElement(by: By.XPath("//*[@id=\"msi_non_eu_popup\"]/div/div/div[3]/button"));
  if (element != null)
  {
      element.Click();
  }
Thread.Sleep(5000);
//this line throws exception NoSuchElementException
var googleButtonElement=_driver.FindElement(By.XPath("//*[@id='googlebtnclick']"));

It'll be great help if you could help or suggest something to make this work.

Answer 1

You should use GetShadowRoot method and filtering your element inside shadow root DOM context.

driver
     .FindElement(By.Id("userlogin"))
     .GetShadowRoot() <-- It will give you shadow root context
     .FindElement(By.Id("googlebtnclick"));

Answer 2

The google button is under the Shadow DOM. You need to reach shadow-root element first in order to access the element.

Use JavasciptExecutor to access the element using below query.

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