How to jump between two different elements located same level?

Question

The problem is the following, in the same html I have a footer and a div located on the same level first I want to click on the img of the following code:

<footer>
  <div layout="row" layout-align="center center" flex="" class="layout-align-center-center layout-row flex">
    <img src="assets/images/vtr-icon-tecnico.png" class="icon" ng-click="vm.openModal($event, 'appt')" role="button" tabindex="0">
  </div>
</footer>

and then click on an input of a input of the following code:

<div class="md-dialog-container ng-scope" tabindex="-1" style="top: 0px; height: 937px;">
  <form name="appsForm" class="ng-pristine ng-invalid ng-invalid-required" style="">
   <!-- ngIf: !links -->
    <md-content class="md-padding ng-scope layout-column" layout="column" ng-if="!links" style="">
      <md-input-container class="md-input-invalid"><label for="input_10557">Clave</label>
        <input required="" type="password" name="password" md-maxlength="30" ng-model="key.password" class="ng-pristine md-input ng-empty ng-invalid ng-invalid-required ng-touched" id="input_10557" aria-invalid="true" ng-trim="false" style="">
      </md-input-container>
    </md-content>
 </form>
</div>

Using xpath I tried with:

pass = wait.until(EC.element_to_be_clickable((By.XPATH, "//div[contains(@class,'ng-scope layout-column flex')]//div[@id='input_10555']")))

But the answer is the following in the console:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//div[contains(@class,'ng-scope layout-column flex')]//div[@id='input_10555']"}

I use Python, Selenium Web Driver and Chrome Browser

thank you who has better understanding on how to do it

Answer 1

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

• Using CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input.ng-pristine.md-input.ng-empty.ng-invalid.ng-invalid-required.ng-touched[id^='input_'][name='password']"))).click()
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='ng-pristine md-input ng-empty ng-invalid ng-invalid-required ng-touched' and starts-with(@id,'input_')][@name='password']"))).click()
  

• Note : 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