[FIXED] How to click on the checkbox in reference to the text using Selenium Python

Issue

I'm trying to access a checkbox which is contained within an element as shown below.

I cannot identify using xpath as the order of these elements can change during development. Id is also out of bounds because the developer has implemented a plain ascending order for id like item-0, item-1 etc, meaning, the id would change depending on the order of elements on the page. So I'd like to identify the text Flexibel and using this element tick the associated checkbox. Is there a way to do that?

The element hierarchy upon inspection is given below

<div _ngcontent-adp-c61="" class="col-xl-4 col-sm-6 py-2 ng-star-inserted" id="item-6">
 <div _ngcontent-adp-c61="" class="card border shadow-none h-100 mb-2">
  <input _ngcontent-adp-c61="" type="checkbox" class="form-check-input item-selector m-1 font-size-20 ng-star-inserted" style="z-index: 2;">
  <!---->
  <div _ngcontent-adp-c61="" class="card-body d-flex flex-column parent list-group-item-action pb-0" style="cursor: pointer;">
   <div _ngcontent-adp-c61="" class="d-flex align-items-start position-relative">
    <div _ngcontent-adp-c61="" class="flex-shrink-0 avatar rounded-circle me-3 ng-star-inserted"><img _ngcontent-adp-c61="" alt="" class="img-fluid border border-primary border-2 rounded-3" style="padding: 1px;" src="assets/ces/time-model/TimeModelType-TimeInterval.svg">
     <div _ngcontent-adp-c61="" class="d-flex justify-content-center">
      <!---->
     </div>
    </div>
   <!---->
   <div _ngcontent-adp-c61="" class="flex-grow-1 overflow-hidden">
    <div _ngcontent-adp-c61="" class="d-flex gap-2"><h5 _ngcontent-adp-c61="" class="font-size-15 mb-0 text-truncate"><span _ngcontent-adp-c61="" class="text-dark">Flexibel</span></h5><!---->
    </div>
    <p _ngcontent-adp-c61="" class="text-muted text-wrap mb-0 ng-star-inserted">allowed working hours for PQS team members</p>
    <!---->
   </div>
  </div>
  <div _ngcontent-adp-c61="" class="d-flex h-100 visible-parent-hover ng-star-inserted"><div _ngcontent-adp-c61="" class="btn flex-grow-1 align-self-end"><i _ngcontent-adp-c61="" class="uil-pen ng-star-inserted"></i><!----> Bearbeiten </div></div>
   <!---->
  </div>
  <!---->
 </div>
</div>

Thanks!

Solution

The desired element is a Angular element, so to click on the checkbox element with respect to the text Flexibel you need to induce WebDriverWait for the element_to_be_clickable() and you can use the following locator strategy:

• Using XPATH and ancestor:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[@class='text-dark' and text()='Flexibel']//ancestor::div[contains(@class, 'card border shadow-none')]//input"))).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
  

Answered By - undetected Selenium