Selenium WebDriver - поиск элементов с использованием cssSelector и n-го ребенка

<ul>
<li class="active">
    <a href="#">
    <i class="fa fa-home"></i><br>
    <span class="title">Home</span>
    </a>
</li>

<li>
    <a href="#">
    <i class="fa fa-rss-square"></i><br>
    <span class="title">Posts</span>
    </a>
</li>

<li>
    <a href="#">
    <i class="fa fa-calendar"></i><br>
    <span class="title">Events</span>
    </a>
</li>

<li>
    <a href="#">
    <i class="fa fa-bar-chart-o"></i><br>
    <span class="title">My Activity</span>
    </a>
</li>

<li>
    <a href="#">
    <i class="fa fa-edit"></i><br>
    <span class="title">Assessments</span>
    </a>
</li>
</ul>

Я хочу найти соответствующий элемент span. Я хочу проверить порядок элементов span с помощью селектора css. Поэтому, когда я использую Selenium IDE, я проверю его, как показано ниже (с использованием концепции n-го ребенка).

verifyText | css =.title: nth (0) | Главная
verifyText | css =.title: nth (1) | Сообщения
verifyText | css =.title: nth (2) | События
verifyText | css =.title: nth (3) | Моя деятельность
verifyText | css =.title: nth (4) | Оценки

Но когда я делаю то же самое в Selenium WebDriver, я не могу найти элементы с порядком, который я использовал с помощью Selenium IDE.

Ниже приведены коды, которые я использовал в WebDriver, и это работает.

driver.findElement(By.cssSelector(".title:nth(0)")); // to locate the "Home" element

driver.findElement(By.cssSelector(".title:nth-of-type(0)")); // to locate the "Home" element

driver.findElement(By.cssSelector(".title:nth-child(0)")); // to locate the "Home" element

Может ли кто-нибудь помочь мне.

Ответ 1

Вы можете сгенерировать css-селектор от ul как ul > li:nth-child(1) для дома. См. Ниже:

driver.findElement(By.cssSelector("ul > li:nth-child(1)")); >> home
driver.findElement(By.cssSelector("ul > li:nth-child(2)")); >> posts
driver.findElement(By.cssSelector("ul > li:nth-child(3)")); >> events

также spanin span одинаково:

driver.findElement(By.cssSelector("ul > li:nth-child(1) > a > span")); >> home

Ответ 2

Вам нужен css? если нет, вы также можете перейти на xpath, который imho "читает" лучше/понятнее:

driver.findElement(By.xpath("(//span[@class='title'])[0]")); // home
driver.findElement(By.xpath("(//span[@class='title'])[1]")); // posts
...

Ответ 3

<body>
        <div class=parent>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>

Если у вас уже есть родительский элемент и вам просто нужно найти n-го дочернего элемента

parent.find_element_by_css_selector('div:nth-child(2)')

выбрал бы второй div