1

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

enter image description here

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!

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
Akash
  • 33
  • 3
  • can you confirm the url, is it publicly accessible? – Barry the Platipus Aug 15 '22 at 13:11
  • 1
    Show how you tried – Curious koala Aug 15 '22 at 13:17
  • @platipus_on_fire the website is still in development so I'm unable to share it here – Akash Aug 15 '22 at 13:56
  • I didn't get far @Curiouskoala. What I tried to do is this `flex_elem = driver.find_element(By.CLASS_NAME, 'col-xl-4 col-sm-6 py-2 ng-star-inserted')`. With this I identified the entire element. Now, i can put in an if condition and say if this element contains the text 'Flexibel', click on the checkbox. But, I don't know how to get this. – Akash Aug 15 '22 at 14:00

1 Answers1

1

The desired element is a Angular element, so to click on the 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
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
  • 1
    Thanks a lot @undetected Selenium, it worked! I had to spend some time learning about angular and the available contains() methods of selenium like parent, sibling, ancestor etc but I have a much clearer picture now. Cheers! – Akash Aug 19 '22 at 09:25
  • Glad to be able to help you. – undetected Selenium Aug 19 '22 at 09:26