What is the process for interacting with pseudo HTML elements with Selenium WebDriver?

Is there a way to interact with pseudo HTML elements using Selenium WebDriver? For instance, elements like input::after and input::before that don't appear directly in the DOM but are visible on the page.

Answer №1

Imagine we have the following HTML setup (taken from a tutorial on example.com):

<!DOCTYPE html>
<html>    
  <head>
    <style>
      p::before {
        content: "Check this out -";}
    </style>
  </head>    
  <body contenteditable="false">   
    <p>My name is Jane</p>
    <p>I live in Janesville</p>
    <p><b>Note:</b> In order for this selector to function in older browsers, like IE8, a DOCTYPE must be specified, and the old CSS2 syntax must be used (:before instead of ::before).</p>
  </body>    
</html>

In order to retrieve the content of the :before pseudo-element, you could utilize the following snippet of JavaScript embedded in your Selenium script:

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');");

Expected output: "Check this out -"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble obtaining outcomes from Cloud Code in Parse

After struggling with this issue for quite some time, I have reached a point where I feel the need to seek help. I am working on a cloud code function that is supposed to retrieve a list of categories along with their respective products. Each category con ...

Understanding the Submission of a Form upon the submission event

On my form, I have multiple buttons - two of them use ajax to submit the form and clear it for adding multiple records, while the last button is for moving onto the next page. I'm wondering if jQuery's .submit() method can determine how the form ...

Opacity error with jQuery slider specifically affecting Google Chrome browser

My Magento site features a custom-built slider that is both responsive and has unique touch behavior. The desired behavior for the slider is as follows: A three-image slider where the middle image has an opacity of 1.0, while the other two images have an ...

React | Utilizing ForwardedRefs with React Components

I'm currently working on a React project where I am creating a custom component that needs to be exported using forwardedRef. However, as I attempt to do this, an error keeps popping up: error This is the code snippet causing the issue: export inter ...

Is it possible to clear a div using jQuery and then restore its contents?

In my setup, I have a video player within a div where clicking the play button (.video-play-container) fades in the video, and clicking the close button (.close-video) fades it out. The issue arose when the faded-out video continued playing in the backgr ...

Experiment with utilizing dynamic imports within the useEffect hook

I've been working on testing a custom hook I developed that involves dynamically importing @vimeo/player. The key snippet from the useVideoPlayer hook is as follows: useEffect(() => { async function setup() { const { default ...

Contrasting $window.location.reload() and $route.reload() functions in AngularJS

Could someone clarify the distinction between $window.location.reload() and $route.reload() in Angular.js? Although I have implemented both methods, I have noticed they achieve similar outcomes. Would someone be able to provide an explanation of the vari ...

What is the quickest and most efficient method for retrieving HTML content after JavaScript has been executed?

Having encountered limitations with the Youtube API for searching, I have turned to web scraping the search result page. Initially, I attempted to use Selenium to load the page and retrieve the HTML, but there was a noticeable delay upon startup. The Yout ...

Using a filter with ng-repeat

Currently, I am working on the front-end using Angular framework and I have a JSON file structured like this: { "groups": [ group1: { "part":1 }, group2: { "part":2 ...

Create an Angular directive that dynamically adds a template to a textbox when the Spacebar or enter key

Using AngularJS, I aim to display an HTML table in a textbox when the spacebar is pressed, and add the table element to the textbox. To achieve this, I have created a directive, but I am unsure if I have followed the correct approach. Let me provide a deta ...

Encountering Issues with Accessing Property

Upon trying to run my code, the console is displaying an error that I am unable to resolve. The error specifically states: "TypeError: Cannot read property 'author' of undefined." View the StackBlitz project here The error seems to be coming fr ...

Ways to expose a components prop to its slotted elements

I've set up my structure as follows: <childs> <child> <ul> <li v-for="item in currentData">@{{ item.name }}</li> </ul> </child> </childs> Within the child component, t ...

React-Query: executing a function after updating query data

After updating the cache in a form, triggered by a response from the server, I utilize setQueryData. However, following this cache update, my goal is to refocus on the form input field. Here are some details: Within my React application, I employ Recoil. ...

Angular not updating the values in real time

First and foremost, I am utilizing socket.io to emit data. Data is emitted upon connection (so the website does not appear blank) as well as when certain events occur. Upon initial connection or page refresh, everything updates and functions smoothly. Howe ...

How can I call the telerik radgrid.databind() function using a JavaScript function?

Currently, I am coding in ASP .NET and have an ASPX page featuring a Telerik RadGrid. I am curious to know if it is feasible to call the RadGrid.DataBind() method from within a JavaScript function? ...

In JavaScript, whenever there is an error for each variable A in B, it means that B is an array of arrays

I stumbled upon this code snippet: var B = []; var data = []; data.push("string"); // .... B.push(data); // ... for each (var A in B){ console.log(B); console.log(A); let obj = A[0].split("|", 3); console.log(obj[0]); ...

Displaying various location markers on a Google Map in React using state variables

I am a beginner with React and I am working on an app to deepen my understanding. I am currently utilizing the Google Maps API to display a map and I want to add multiple markers to the map. I am using a geocode API to retrieve the latitude and longitude ...

Challenges with implementing Node Polyfills in webpack configuration file

I recently started delving into web development and currently tackling a React project that involves connecting to an AWS database. After installing MySql using npm install mysql, I encountered an error message: Module not found: Error: Can't resolve ...

What is the best way to clear an array?

Yesterday I had a query regarding JSON Check out this link for details: How to return an array from jQuery ajax success function and use it in a loop? One of the suggested answers included this script: setInterval(updateTimestamps,30000); var ids = new ...

Having trouble parsing an array from req.body using Node.js Express

I am currently facing an issue while trying to retrieve an array from a JSON request using Postman. In my Node.js application, I am able to read all values from req.body except for the array. When attempting to access the array, I only receive the first va ...