selenium get li element based on index position and click the checkbox

Question

I have this HTML now using Selenium I ant to toggle the li element with given index position say 1, where it indicates I want to click the toggle checkbox for spring.

<ul id="todo-list" data-woven="abc">
<li class="active" data-index="0">
    <div class="view">
        <input class="toggle" type="checkbox">
        <label>Java</label>
        <button class="destroy"></button>
    </div>
    <input class="edit">
</li>
<li class="active" data-index="1">
    <div class="view">
        <input class="toggle" type="checkbox">
        <label>Spring</label>
        <button class="destroy"></button>
    </div>
    <input class="edit">
</li></ul>

I am completely new to selenium so not able to understand how can we achieve this.

I know to get the UL elements using the code:

driver.findElement(By.id("todo-list"));

Now how can get the li element based on its index and click the corresponding checkbox.

undetected Selenium · Accepted Answer · 2020-02-06T20:19:56.640

2

To click on the checkbox element with respect to the ancestor <li> nodes index attribute you can use either of the following Locator Strategies:

cssSelector:

driver.findElement(By.cssSelector("ul#todo-list li.active[data-index='1'] input")).click();

xpath:

driver.findElement(By.xpath("//ul[@id='todo-list']//li[@class='active' and @data-index='1']//input")).click();

edited Feb 06 '20 at 20:19

answered Feb 06 '20 at 20:14

undetected Selenium

183,867
41
278
352

1

Now I have another small question, once I get the specific `li` element, if I want to click the button inside it with class `destroy`, how to do that? I used the xpath approach to access button after li but I am getting errors. – learner Feb 06 '20 at 20:31
@learner Replace `input` with `button`, effectively `ul#todo-list li.active[data-index='1'] button` – undetected Selenium Feb 06 '20 at 20:33
1

Can we do it with xpath also same process? – learner Feb 06 '20 at 20:36
@learner Effective xpath: `//ul[@id='todo-list']//li[@class='active' and @data-index='1']//button` – undetected Selenium Feb 06 '20 at 20:37
I am getting error as `element not interactable exception` for this button operation – learner Feb 06 '20 at 20:45
Following sbling with xpath might help. `//ul[@id='todo-list']//li[@class='active' and @data-index='1']//input/following-sbling::button` – pdrersin Feb 06 '20 at 22:38

Guy · Answer 2 · 2020-02-06T20:15:38.467

1

You can use xpath to locate an element with data-index=1

driver.findElement(By.xpath("//li[@data-index='1']//input[@class='toggle']"));

Or with cssSelector

driver.findElement(By.cssSelector("[data-index='1'] .toggle"));

edited Feb 06 '20 at 20:15

answered Feb 06 '20 at 20:09

Guy

46,488
10
44
88

Thanks, but I cannot compare based on text spring here, I just want to pick an element based on index, I just gave spring as example. Can you please tell me the correct syntax for this? – learner Feb 06 '20 at 20:11
Next I want to click the toggle checkbox for it, how to do that, can you please tell me – learner Feb 06 '20 at 20:14

score 0 · Answer 3 · answered Feb 06 '20 at 20:17

You could find the element you are looking for directly with the answer @Guy gave you and that would be the right way if you knew exactly what the data-index attribute would be set to, but you could also find a collection of the li elements and then proceed to do what you need within each like this:

var container = driver.findElement(By.id("todo-list"));

var elements = container.findElements(By.tagName("li"));

with elements you can loop through each or go directly to the one you want.

selenium get li element based on index position and click the checkbox

3 Answers3