如何使用 css 选择器 nth-of-type 和 nth-child 在 Python Selenium 中定位元素

Question

下面是页面设置的片段。

<class id="class1">
  <ul>
    <li>
      <strong>section 1</strong>
      <a href="link.com/home1">some link 1</a>
    <li>
      <strong>section 2</strong>
      <a href="link.com/home">some link 2</a>
<class id="class1">
  <ul>
    <li>
      <strong>section 3</strong>
      <a href="link.com/home/abc">some link 3</a>
    <li>
      <strong>section 4</strong>
      <a href="link.com/home/def">some link 4</a>

如何在第 2 部分找到 link.com/home？

我认为这行得通：

.class1:nth-of-type(1) li:nth-child(2) [href*="/home"]

但事实并非如此。它也在第 4 节中找到 link。我必须使用 *= 因为在不同的环境中 url 前缀会发生变化。

Answer 1

为了完整性，我添加了 </li>、</ul> 和 </class> 标签在适当的地方，理想的 HTML 将是：

<class id="class1">
  <ul>
    <li>
      <strong>section 1</strong>
      <a href="link.com/home1">some link 1</a>
    </li>
    <li>
      <strong>section 2</strong>
      <a href="link.com/home">some link 2</a>
    </li>
  </ul>
</class>
<class id="class1">
  <ul>
    <li>
      <strong>section 3</strong>
      <a href="link.com/home/abc">some link 3</a>
    </li>
    <li>
      <strong>section 4</strong>
      <a href="link.com/home/def">some link 4</a>
    </li>
  </ul>
</class>

要找到 第 2 节 的 href 属性，您可以使用以下任一方法 ：

• 使用nth-child():

  class#class1 > ul li:nth-child(2) a[href$="home"]
  

• 使用nth-child():

  class#class1 > ul li:nth-of-type(2) a[href$="home"]
  

---

解决方案

要打印 href 属性的值，您可以使用以下任一方法 :

• 使用nth-child():

  print(driver.find_element(By.CSS_SELECTOR, "class#class1 > ul li:nth-child(2) a[href$='home']").get_attribute("href"))
  

• 使用nth-child():

  print(driver.find_element(By.CSS_SELECTOR, "class#class1 > ul li:nth-of-type(2) a[href$='home']").get_attribute("href"))
  

---

tl;博士