Invalid selenium element selector in angularjs page using c#

Question

I spun up my app locally on port "x" and trying to start my UI testing using selenium. First test case is logging in as an administrator onto the page. The front-end of the app is using Angularjs. I'm trying to target the input field username but I keep running into errors of "Invalid element sector".

I have also tried below but it didn't work either:

IWebElement username = driver.FindElement(By.CssSelector("[ng-model='vm.username']"));

Answer 1

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

• CssSelector:

  IWebElement username = new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.CssSelector("div.form-group.has-feedback > input[name='username'][ng-model='vm.username']")));
  

• XPath:

  IWebElement username = new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementToBeClickable(By.XPath("//div[@class='form-group has-feedback']/input[@name='username' and @ng-model='vm.username']")));
  

---

Nuget Package

If you are using the nuget packages you need to use SeleniumExtras.WaitHelpers.ExpectedConditions as follows:

• CssSelector:

  IWebElement username = new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.CssSelector("div.form-group.has-feedback > input[name='username'][ng-model='vm.username']")));
  

• XPath:

  IWebElement username = new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(SeleniumExtras.WaitHelpers.ExpectedConditions.ElementToBeClickable(By.XPath("//div[@class='form-group has-feedback']/input[@name='username' and @ng-model='vm.username']")));