How to locate an element using Selenium by its visible text

Question

I have this common situation where I want to locate an element by it's visible text, but the text is next to an i tag used for icons (not sure if this is valid HTML or not). It's the way a certain button component is set up that's used all over the site under test.

Here's some example HTML

<a href="#/provider_data_files/create" ng-click="providerDataFileCtrl.showAddProviderDataFileModal()" class="btn btn-primary pull-right">
        <i class="fa fa-plus btn-icon"></i> 
        Add Provider Data File
</a>

For the moment, ignore all the other ways to locate this link, as my use case requires using the visible text. How can I locate this element by the visible text? The xpath:

//*[contains(text(), 'Add Provider Data File')]

fails, I assume because of the weird structure.

Answer 1

Given the html:

<a href="#/provider_data_files/create" ng-click="providerDataFileCtrl.showAddProviderDataFileModal()" class="btn btn-primary pull-right">
    <i class="fa fa-plus btn-icon"></i> 
    Add Provider Data File
</a>

The desired <a> node consists of 2 child nodes:

• A <i> node
• A Text node with the text Add Provider Data File

---

Solution

To locate the element by it's visible text i.e. Add Provider Data File you can use either of the following locator strategies:

• Using PARTIAL_LINK_TEXT:

  element = driver.find_element(By.PARTIAL_LINK_TEXT, "Add Provider Data File")
  

• Using XPATH:

  element = driver.find_element(By.XPATH, "//a[contains(., 'Add Provider Data File')]")
  

To locate the visible element you need to induce WebDriverWait for the visibility_of_element_located() and you can use either of the following locator strategies:

• Using PARTIAL_LINK_TEXT:

  element = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.PARTIAL_LINK_TEXT, "Add Provider Data File")))
  

• Using XPATH:

  element = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//a[contains(., 'Add Provider Data File')]")))
  

• 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
  

---

Proof of concept