selenium 根据索引位置获取 li 元素并单击复选框

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 .

Answer 1

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();

Answer 2

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"));

Answer 3

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.