在使用Selenium Python之前如何找到伪元素:: [英] How locate the pseudo-element ::before using Selenium Python

问题描述

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

I'm using Selenium Python to locate label element.I want to use ::before to locate it,because this is a pop window.

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

我不知道如何使用::之前找到它，任何朋友都可以帮忙吗?

I have no idea how to use ::before to locate it,any friend can help?

推荐答案

伪元素用于对元素的指定部分进行样式设置.它可以用来:

Pseudo Elements

A CSS pseudo-element is used to style specified parts of an element. It can be used to:

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

::after是伪元素，它允许您将内容从CSS插入到页面上(不需要在HTML中).虽然最终结果实际上不在DOM中，但它在页面上的显示方式好像是这样，并且本质上是这样的:

::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

CSS :

div::after {
  content: "hi";
}

---

::之前

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

---

::before

::before is exactly the same only it inserts the content before any other content in the HTML instead of after. The only reasons to use one over the other are:

• 您希望生成的内容在位置上位于元素内容之前.
• ::after内容在源顺序上也位于之后"，因此，如果自然地彼此堆叠，它将位于::before的顶部.

• You want the generated content to come before the element content, positionally.
• The ::after content is also "after" in source-order, so it will position on top of ::before if stacked on top of each other naturally.

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

As per the discussion above you can't locate the ::before element within the DOM Tree but you can always be able to retrieve the contents of the pseudo-elements, i.e. ::before and ::after elements. Here's an example:

为了演示，我们将在此

To demonstrate, we will be extracting the content of ::after element (snapshot below) within this website:

• 代码块:

• Code Block:

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())

控制台输出:

Console Output:

" (fin.)"

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

This console output exactly matches the value of the content property of the ::after element as seen in the HTML DOM:

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

To extract the value of the content property of the ::before element you can use the following solution:

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

---

Outro

一些相关文档:

---

Outro

A couple of relevant documentations:

• Document.querySelector()
• Window.getComputedStyle()

• Document.querySelector()
• Window.getComputedStyle()

这篇关于在使用Selenium Python之前如何找到伪元素::的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！