问题描述
我正在使用 Selenium Python 来定位标签元素.我想使用 ::before 来定位它,因为这是一个弹出窗口.
<div class="crow" grp="0" grpname="Pizza Size">::前<标签类="label0" cid="1"><input type="radio" name="0" coname="M" sname="" price="9.99" value="392">M<b class="ip">9.99</b></标签><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 来定位它,有朋友可以帮忙吗?
代码块:
从 selenium 导入 webdriver选项 = webdriver.ChromeOptions()options.add_argument("开始最大化")options.add_experimental_option("excludeSwitches", ["enable-automation"])options.add_experimental_option('useAutomationExtension', False)driver = webdriver.Chrome(options=options, executable_path=r'C:WebDriverschromedriver.exe')driver.get('https://meyerweb.com/eric/css/tests/pseudos-inspector-test.html')script = "返回 window.getComputedStyle(document.querySelector('body>p.el'),':after').getPropertyValue('content')"打印(driver.execute_script(脚本).strip())
控制台输出:
" (fin.)"
代码块:
从 selenium 导入 webdriver选项 = webdriver.ChromeOptions()options.add_argument("开始最大化")options.add_experimental_option("excludeSwitches", ["enable-automation"])options.add_experimental_option('useAutomationExtension', False)driver = webdriver.Chrome(options=options, executable_path=r'C:WebDriverschromedriver.exe')driver.get('https://meyerweb.com/eric/css/tests/pseudos-inspector-test.html')script = "返回 window.getComputedStyle(document.querySelector('body>p.el'),':after').getPropertyValue('content')"打印(driver.execute_script(脚本).strip())
控制台输出:
" (fin.)"
此控制台输出与 ::after
的 content
属性的 value 完全匹配
这个用例
要提取 ::before
元素的 content 属性的值,您可以使用以下解决方案:
script = "return window.getComputedStyle(document.querySelector('div.crow'),':before').getPropertyValue('content')"打印(driver.execute_script(脚本).strip())
<小时>
结尾
一些相关文件:
- Document.querySelector()
- Window.getComputedStyle()
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:
- Style the first letter, or line, of an element
- Insert content before, or after, the content of an element
::after
::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
::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:
- 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.
Demonstration of extracting properties of pseudo-element
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:WebDriverschromedriver.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.)"
This console output exactly matches the value of the content
property of the ::after
element as seen in the HTML DOM:
This usecase
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
A couple of relevant documentations:
- Document.querySelector()
- Window.getComputedStyle()
这篇关于如何在使用 Selenium Python 之前定位伪元素 ::before的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!