如何在 Python(Selenium) 中单击此 HTML 元素

Question

最近，我用selenium爬取了网站上的一些信息。 而我想要做的只是点击“上个月按钮”。

所以我按下 Chrome 上的“F12”按钮并找到这样的 HTML 代码

所以我写这样的代码

webDriver.find_element_by_css_selector('span.ui-icon ui-icon-circle-triangle-w').click()

但是不行，我改了多次改代码这样

webDriver.find_element_by_css_selector('a.ui-icon ui-icon-circle-triangle-w').click()
webDriver.find_element_by_css_selector('ui-icon ui-icon-circle-triangle-w').click()
webDriver.find_element_by_class_name('ui-icon ui-icon-circle-triangle-w').click()

其中任何一个都不起作用。 当我尝试使用三个试验中的第一个（即：webDriver.find_element_by_css_selector('a.ui-icon ui-icon-circle-triangle-w').click()）时，错误弹出如下

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":"a.ui-icon ui-icon-circle-triangle-w"}
 (Session info: chrome=86.0.4240.198)

我不知道为什么它不起作用..

请帮忙

Answer 1

尝试使用，

webDriver.find_element_by_class_name("ui-icon.ui-icon-circle-triangle-w").click()

当您在 HTML 代码中看到空格时，您应该输入 '.'而不是用硒写的空间。另外，不用写类名，只需复制粘贴并用“。”替换空格。这更容易并且消除了绑定错误。

Answer 2

根据HTML：

<span> 标记的 class 属性值设置为 ui-icon ui-icon-circle-triangle-w。

当您打算在 xpath 中使用此 class 属性值时，您可以按如下方式保留它：

//span[@class='ui-icon ui-icon-circle-triangle-w']

当您打算在 css-selectors 中使用此 class 属性值时，您需要通过点 (.) 字符分隔值，如下所示：

span.ui-icon.ui-icon-circle-triangle-w

---

解决方案

理想情况下，点击您需要为element_to_be_clickable() 诱导WebDriverWait 的元素，您可以使用以下任一Locator Strategies：

• 使用CSS_SELECTOR:

  WebDriverWait(webDriver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "span.ui-icon.ui-icon-circle-triangle-w"))).click()
  

• 使用XPATH：

  WebDriverWait(webDriver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[@class='ui-icon ui-icon-circle-triangle-w']"))).click()
  

• 注意：您必须添加以下导入：

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support import expected_conditions as EC
  

---

参考文献

您可以在NoSuchElementException 上找到一些相关讨论：

• selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element while trying to click Next button with selenium
• selenium in python : NoSuchElementException: Message: no such element: Unable to locate element

Answer 3

webDriver.find_element_by_css_selector('span.ui-icon ui-icon-circle-triangle-w')

会找到元素 它是 span 标签的子元素并且有 class "ui-icon-circle-triangle-w"

如果您想检查具有“ui-icon ui-icon-circle-triangle-w”类的 span 标签

你必须使用'.'在 css 中引用多个类。由于 html 类中的空格表示类的结束，所以 ui-icon 和 ui-icon-circle-triangle-w 是两个不同的类

等号定位符是：

webDriver.find_element_by_css_selector('span.ui-icon.ui-icon-circle-triangle-w')

表示具有“ui-icon”和“ui-icon-circle-triangle-w”类的span标签

1. 在 css 中的定位符空间等于 xpath 中的“//”
2. IN CSS 定位器 > 等于 xpath 中的“/”

另见以下主题：

以下线程显示了关于“未找到元素”的完整讨论： https://sqa.stackexchange.com/q/41860/40022

总结如下：

1.相信你的代码并怀疑 SUT（被测软件）：

如果一切正常并且测试突然开始失败。与其调试代码的问题，不如从检查实际产品开始。做一些视觉检查，看看开发团队是否修改了元素或元素不再显示。

2。相信你的代码并怀疑环境：

如果在本地一切正常，但在您集成到 CI/CD 后立即失败。然后调查测试服务器中的产品行为。主要是由于操作系统和配置不同，产品在本地无法正常工作（引发错误）

3.现在怀疑你的脚本（使用绝对 XPATH）：

您可能正在使用绝对 XPATH，这会在 DOM 结构更改时导致不稳定的测试。使用相对 XPATH（更推荐使用 CSS）。如果您有唯一的 ID/名称来标识元素，请不要使用 xpath/。

4.现在怀疑你的脚本（不使用显式等待）：

有时脚本缺少显式等待并尝试与动态元素交互，这会导致测试失败，因为它甚至在元素在 DOM 中可用之前就尝试与该元素交互。

5.现在怀疑你的脚本（处理微调器）：

有时微调器需要一些时间才能显示出来。所以，如果您只是检查不可见条件，那么它将返回 true 并尝试在实际微调器事件完成之前与下一个元素交互

因此，首先检查微调器的可见性，然后在与其他动态元素交互之前检查不可见性。

6.现在怀疑你的脚本（不处理 iFrame）：

有时元素会在 iframe 中，脚本在与这些元素交互之前不会在帧之间切换。

检查任何父元素是否包含标签框架或iframe，以确定元素是否在iframe内

7.现在怀疑你的脚本（不禁用等待角度）：

有时产品使用微调器在后台等待异步操作完成。比如你点击登录，spinner就会出现，直到后台任务没有完成才会消失。

在这种情况下，请确保在与临时叠加层中的元素进行交互之前，您没有等待异步操作完成（例如，量角器中的 waitforangular 标志设置为 true）。

这是因为，如果您将 waitforangular 设置为 true，那么脚本会等待所有任务完成，然后临时覆盖（比如微调器）将从 DOM 中移除