問題描述

我正在使用 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.)"

此控制臺輸出與 ::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的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！