How to click on the first matching element having a specific background-url using Selenium Python

Question

HTML:

<div class="__section-image" style="background-image: url(&quot;/img/all/05_element/continentImg/1.png&quot;);"></div>

The website have a lot of this html. I want to click the first of them.

Answer 1

To click on the first matching element you can use either of the following locator strategies:

• Using css_selector:

  driver.find_elements(By.CSS_SELECTOR, "div[class='__section-image']")[0].click()
  

• Using xpath:

  driver.find_elements(By.XPATH, "//div[@class='__section-image']")[0].click()
  

---

Ideally to click on the first matching element you need to induce WebDriverWait for the visibility_of_all_elements_located() and you can use either of the following locator strategies:

• Using CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.visibility_of_all_elements_located((By.CSS_SELECTOR, "div[class='__section-image']")))[0].click()
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.visibility_of_all_elements_located((By.XPATH, "//div[@class='__section-image']")))[0].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