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

Question

我正在使用 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来定位，有没有 friend 帮忙？

Answer 1

Pseudo Elements

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

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

---

::之后

::after 是一个伪元素，它允许您将内容从 CSS 插入到页面上(无需在 HTML 中)。虽然最终结果实际上并不在 DOM 中，但它出现在页面上时就好像它在 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 属性的 value 完全匹配 元素，如 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()