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进行的任何小的更新都可能破坏抓取工具。

是否有任何[[clean方法使用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-selectors与以下通配符结合使用：

• ^

：表示属性值开头为>>

*

：表示属性值contains

$

：表示属性值结尾为

---

解决方案

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

• 要识别元素<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']")

参考
您可以在以下位置找到几个相关的讨论：

How to find element by part of its id name in selenium with python
• How to get selectors with dynamic part inside using Selenium with Python?