how to select span based on @id of sibling input

Viewed 243

I have the label below, this is a label for multiple select option buttons, each select have its on div inside there is a label and then inside that label there is an ID that I need to use to determine which one I want selenium to click.

<label class="custom-toggle-checkbox-label">
   <input type="checkbox" class="custom-toggle-checkbox-input" id="selectOption_1_Value" 
   value="false">
<span class="custom-toggle-checkbox-slider"></span>
</label>


<label class="custom-toggle-checkbox-label">
       <input type="checkbox" class="custom-toggle-checkbox-input" id="selectOption_2_Value" 
       value="false">
    <span class="custom-toggle-checkbox-slider"></span>
    </label>
.....

I simply tried but the element is not interactable on this point. I will need to click on the span element in order to select it which is under the label element

xpath = //*[@id='selectOption_1_Value']

I also tried to use the full xpath of the element but there are multiple labels with the same class name and I would like to avoid using full xpath locators.

My question is how can select the correct label based on its children ID?

1 Answers

If you want to select span based on @id of sibling input try

//label[input[@id='selectOption_1_Value']]/span

or

//input[@id='selectOption_1_Value']/following-sibling::span
Related