Having issues finding an element to serach by to click on with Selenium

Question

Hi I am trying to click on a button which has the following html structure that I found from chrome inspect.

<div class="col-md-9 col-sm-8 col-xs-12">
    <button type="submit" tabindex="3" data-ng-click="login()" class="btn btn-default" data-ng-disabled="loginForm.$invalid" data-ng-class="{ 'gray': loginForm.$invalid }">Login</button>
</div>

I am not sure what to find the element by. ID, Name, XPath, etc.

Answer 1

I would suggest using the following XPath here:

//button[@data-ng-click="login()"]

But still need to validate this gives an unique locator

Answer 2

The desired element is a Angular element element, to click on the element you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

• Using java and CSS_SELECTOR:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("button.btn.btn-default[data-ng-click='login()'][data-ng-class*='loginForm']"))).click();
  

• Using python and XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//button[@class='btn btn-default' and @data-ng-click='login()'][text()='Login']"))).click()
  

• Note: Using Python clients you have to add the following imports :

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support import expected_conditions as EC