Selenium：如何处理 DOM 中无效的 CSS 选择器

Question

我正在使用 Selenium / Python3 抓取网站，该网站仅使用无效的选择器，例如：

<input id="egg:bacon:SPAM" type="text"/>
<input id="egg:sausages:SPAM:SPAM" type="text"/>

（无效部分是egg:bacon:SPAM和egg:sausages:SPAM:SPAM ）

我确实尝试使用以下方法选择这些标签：

driver.find_element_by_css_selector('input#egg:bacon:SPAM')

但当然我得到selenium.common.exceptions.InvalidSelectorException

---

我也尝试使用 xpath 来获取我的标签，它适用于：

driver.find_element_by_xpath('//input[@id="egg:bacon:SPAM"]')

但我的代码是基于一个基于 CSS 选择器的自制库。 添加 XPATH 支持需要添加约 200 行代码（不包括单元测试、文档等），仅用于处理这种错误而非通用行为。

另外，抓取这个网站是一个更大项目的一部分，只有这个特定的网站使用那种 CSS 选择器，在 10 上为单个网站付出这么多的努力让我感到不舒服。

---

我可以使用find_element_by_css_selector('.foo > input:nth-child(2)')但它非常棘手，DOM 上的任何小更新都可能破坏刮板。

是否有任何干净的方法可以使用find_element_by_css_selector通过 Selenium 处理无效的 css 选择器，还是我注定要为此网站使用 XPATH？

Answer 1

它们都有效。 您需要转义特殊字符或使用引号：

driver.find_element_by_css_selector('input[id="egg:bacon:SPAM"]')
driver.find_element_by_css_selector('input#egg\:bacon\:SPAM')

Answer 2

要标识具有包含保留字符的id属性的元素，例如egg:bacon:SPAM ， egg:sausages:SPAM:SPAM您可以使用带有以下通配符的动态css 选择器：

• ^ : 表示属性值以
• * : 表示一个属性值包含
• $ ：表示属性值以

---

解决方案

您可以使用以下解决方案：

• 要识别元素<input id="egg:bacon:SPAM" type="text"/> ：

   driver.find_element_by_css_selector("input[id^='egg'][id*='bacon'][id$='SPAM']")

• 要识别元素<input id="egg:sausages:SPAM:SPAM" type="text"/> ：

   driver.find_element_by_css_selector("input[id^='egg'][id*='sausages'][id$='SPAM']")

---

参考

您可以在以下位置找到一些相关讨论：

• 如何使用python在selenium中通过部分id名称查找元素
• 如何在 Python 中使用 Selenium 获取内部带有动态部分的选择器？