How can we access pseudo html elements using selenium webdriver?

Question

How can we access pseudo html elements using selenium webdriver? Example input::after , input::before etc. These elements contents are not displayed in dom but is visible on page.

Answer 1

Lets say we have following HTML structure (borrowed from w3schools ):

<!DOCTYPE html>
<html>    
  <head>
    <style>
      p::before {
        content: "Read this -";}
    </style>
  </head>    
  <body contenteditable="false">   
    <p>My name is Donald</p>
    <p>I live in Ducksburg</p>
    <p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).</p>
  </body>    
</html>

To get content of :before pseudo-element you might use following JavaScript inserted in Selenium code:

Python

driver.execute_script("return window.getComputedStyle(document.querySelector('p'), ':before').getPropertyValue('content');")

Java

JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("return window.getComputedStyle(document.querySelector('p'), ':before').getPropertyValue('content');");

Returned value: "Read this -"

How can we access pseudo html elements using selenium webdriver?

Question

1 answers

solution1
1 2017-01-20 08:21:22

How can we access pseudo html elements using selenium webdriver?

Question

1 answers

solution1 1 2017-01-20 08:21:22

solution1
1 2017-01-20 08:21:22