How to locate a button inside a div with using Selenium WebDriver and C#

Question

I'm trying to use WebDrive (C#) to find and click the following button:

<div class="ui-g-12" style="text-align: center">
   <s-button priority="primary" type="button" _nghost-c4="" style="min-width: 80px;">
      <p-tieredmenu _ngcontent-c4="" appendto="body" class="ng-tns-c9-4" id="s-button-1-menu">
         <!---->
      </p-tieredmenu>
      <button _ngcontent-c4="" showdelay="500" tooltipposition="top" class="s-button-with-text s-button-size-default s-button-priority-primary" id="s-button-1" type="button">
         <!----><!----><span _ngcontent-c4="" class="s-button-text ng-star-inserted">Register</span><!---->
      </button>
   </s-button>
</div>

I've tried the following options but none of them has been capable of locating this button:

By Id:

new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementExists((By.Id("s-button-1"))));      
Console.WriteLine(driver.FindElement(By.Id("s-button-1")));

By text:

new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementExists((By.PartialLinkText("Resgister"))));      
Console.WriteLine(driver.FindElement(By.PartialLinkText("Resgister")));

By xpath:

new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementExists((By.XPath("/html/body/s-loading-state/div/div[2]/div/ng-component/ng-component/p-panel/div/div[2]/div/div/div/div[2]/s-button/button"))));      
Console.WriteLine(driver.FindElement(By.XPath("/html/body/s-loading-state/div/div[2]/div/ng-component/ng-component/p-panel/div/div[2]/div/div/div/div[2]/s-button/button")));

Independent of the selection method used I always get an exception message very similar tho this:

OpenQA.Selenium.WebDriverTimeoutException: Timed out after 10 seconds
 ---> OpenQA.Selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"link text","selector":"Register"}

What am I doing wrong here?

@Jonah just updated my post with a generic error, independent of the method used to try to find the element, I always get an exception message with `Unable to locate element` — Rogerio Schmitt, Jun 27 '20 at 21:39

score 1 · Answer 1 · answered Jun 27 '20 at 21:49

The Register button is an Angular element so to locate the WebElement you have to induce WebDriverWait for the desired ElementToBeClickable() and you can use either of the following Locator Strategies:

CssSelector:

IWebElement element = new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("button.s-button-with-text.s-button-size-default.s-button-priority-primary span.s-button-text.ng-star-inserted")));

XPath:

IWebElement element = new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.XPath("//button[@class='s-button-with-text s-button-size-default s-button-priority-primary']//span[@class='s-button-text ng-star-inserted' and text()='Register']")));

How to locate a button inside a div with using Selenium WebDriver and C#

1 Answers1