如何在 Python(Selenium) 中点击这个 HTML 元素

Question

最近用selenium爬取了网站上的一些信息。而我想要做的只是点击 'previous month button'.

所以我在 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_css_selector('span.ui-icon ui-icon-circle-triangle-w')

将找到元素 ，它是 span 标签 的子元素，并且具有 class "ui-icon-circle-三角形-w"

如果你想检查 span 标签有 class "ui-icon ui-icon-circle-triangle-w"

你必须使用'.'在 css 中引用多个 classes 。由于 html 中的 spaces class 表示 class 的结尾，因此 ui-icon 和 ui-icon-circle-triangle-w 是两个不同 classes

相等定位符是：

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

表示 span 标签，其中包含 classes“ui-icon”和“ui-icon-circle-triangle-w”

在 css 中定位器 space 等于 xpath
IN CSS 定位器 > 等于 xpath 中的“/”

另请参阅以下线程：

下面的帖子显示了关于 'Element not found' 的完整讨论： https://sqa.stackexchange.com/q/41860/40022

总结为：

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

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

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

如果一切都在本地运行良好，但一旦集成到 CI/CD 就失败了。然后调查测试服务器中的产品行为。主要是由于 OS 和配置差异产品无法像在本地那样工作（提出错误）

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

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

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

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

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

有时微调器需要一些时间才能显示出来。因此，如果您只是检查隐形条件，那么它将 return 为真并尝试在实际微调器事件完成之前与下一个元素进行交互

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

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

有时元素将位于 iframe 中，并且脚本在与这些元素交互之前不会在框架之间切换。

检查是否有任何父元素包含标记框架或 iframe 以确定元素是否在 iframe 中

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

有时产品使用微调器来等待异步操作在后台完成。例如，您单击登录，微调器出现，并且在后台任务未完成之前不会消失。

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

这是因为，如果您将 waitforangular 设置为 true，那么脚本会等待所有任务完成，届时临时覆盖（比如旋转器）将从 DOM

Answer 2

尝试使用，

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

每当您在 HTML 代码中看到 space 时，您应该添加“.”而不是 space 在用 selenium 写的时候。另外，不要写 class 名称，只需复制粘贴并将 space 替换为 '.'这要容易得多，并且消除了搭售错误。

Answer 3

根据 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

解决方案

理想情况下，点击你需要诱导的元素WebDriverWait for the element_to_be_clickable() and you can use either of the following :

使用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

参考资料

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

如何在 Python(Selenium) 中点击这个 HTML 元素

How to click on this HTML element in Python(Selenium)

python

selenium

xpath

css-selectors

webdriverwait

解决方案

参考资料