如何在使用 Selenium Python 之前定位伪元素 ::before

Posted 2023-03-06

【中文标题】如何在使用 Selenium Python 之前定位伪元素 ::before

【英文标题】：How locate the pseudo-element ::before using Selenium Python

【发布时间】：2020-04-28 13:53:10

【问题描述】：

我正在使用 Selenium Python 来定位标签元素。我想使用 ::before 来定位它，因为这是一个弹出窗口。

 <div class="crow" grp="0" grpname="Pizza Size">
    ::before
    <label class="label0" cid="1">
    <input type="radio" name="0" coname="M" sname="" price="9.99" value="392">M<b class="ip">9.99</b>
    </label>
    <label class="label0" cid="1"><input type="radio" name="0" coname="L" sname="" price="11.99" value="393">L<b class="ip">11.99</b>
    </label><div style="clear:both">
    </div>
    </div>

我不知道如何使用 ::before 来定位它，有朋友可以帮忙吗？

【问题讨论】：

为什么要定位::before元素？你的具体用例是什么？

可以在浏览器端使用 window .getComputedStyle 完成

【参考方案1】：

如果我没记错的话，selenium 没有为此提供任何函数或 API 调用。 您可以尝试解析 html，然后使用简单的 regular expression 查找标签。 希望这会有所帮助:)

【讨论】：

::after & ::before 是一个伪元素，允许您从 CSS 将内容插入页面。只需单击容器是相同的。快速浏览一下文档并没有显示任何特定的功能。

【参考方案2】：

Pseudo Elements

CSS pseudo-element 用于设置元素的指定部分的样式。它可以用于：

为元素的第一个字母或行设置样式 在元素内容之前或之后插入内容

---

::之后

::after 是一个伪元素，它允许您从 CSS 将内容插入页面（无需在 HTML 中）。虽然最终结果实际上并不存在于 DOM 中，但它在页面上的显示就好像它存在一样，并且基本上是这样的：

CSS：

div::after 
  content: "hi";

---

::之前

::before 完全相同，只是它在 HTML 中的任何其他内容之前而不是之后插入内容。使用其中一个的唯一原因是：

您希望生成的内容在位置上位于元素内容之前。 ::after 内容在源顺序中也位于“之后”，因此如果自然堆叠，它将位于::before 之上。

---

提取pseudo-element的属性的演示

根据上面的讨论，您无法在 DOM Tree 中找到 ::before 元素，但您始终可以检索 伪元素 的内容，即 ::before和 ::after 元素。这是一个例子：

为了演示，我们将在此 website 中提取 ::after 元素（下面的快照）的内容：

代码块：

from selenium import webdriver

options = webdriver.ChromeOptions() 
options.add_argument("start-maximized")
options.add_experimental_option("excludeSwitches", ["enable-automation"])
options.add_experimental_option('useAutomationExtension', False)
driver = webdriver.Chrome(options=options, executable_path=r'C:\WebDrivers\chromedriver.exe')
driver.get('https://meyerweb.com/eric/css/tests/pseudos-inspector-test.html')
script = "return window.getComputedStyle(document.querySelector('body>p.el'),':after').getPropertyValue('content')"
print(driver.execute_script(script).strip())

控制台输出：

" (fin.)"

此控制台输出与 ::after 元素的 content 属性的 值 完全匹配，如 HTML DOM 中所示：

---

这个用例

要提取 ::before 元素的 content 属性的值，您可以使用以下解决方案：

script = "return window.getComputedStyle(document.querySelector('div.crow'),':before').getPropertyValue('content')"
print(driver.execute_script(script).strip())

---

结尾

一些相关文件：

Document.querySelector() Window.getComputedStyle()