What is the best method for extracting the innerHTML value of html tags using a css selector or xpath?

I am currently struggling with retrieving the HTML inner text value using CSS selector or XPath. While I can achieve this using document.getElementById, I am unable to do so using selectors. I can only print the tag element but not the text from it.

For example:

<li class="active">
  <span id="lastPrice">1,603.35</span>
  &nbsp;&nbsp;<span id="CAToday"></span><br>
  <span class="up" id="change">28.80</span>
</li>

In the above HTML snippet, my goal is to extract 1,603.35 using either:

  • CSS

  • XPath

Although I have searched through various forums, I have been unsuccessful in finding a solution to my problem.

javascripthtmlcssxpathcss-selectors

Answer №1

When utilizing this XPath syntax

string(/li/span[@id='latestPrice'])

Pairing it with properly structured XML like below

<li id="current" class="active">
  <span id="latestPrice">1,603.35</span>
  <span id="CAToday"></span>
  <br/>
  <span class="up" id="change">28.80</span>
</li>

Outcome will be

1,603.35

You can verify the results at

Answer №2

To utilize the XPath version 2 feature, you can make use of the matches function as shown below:

//div[matches(text(), 'Hello ?\w+ What are your plans for today \w+')]

This particular function does support the usage of regular expressions.

Answer №3

Example of using Java Selenium with XPath:

driver.findElement(By.xpath("//span[@id='currentPrice']").getAttribute("innerText")

How to use Python Selenium with CSS Selector:

driver.find_element_by_css_selector("span#currentPrice").get_attribute("innerText")

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

Identify the significance within an array and employ the filter function to conceal the selected elements

I'm in the process of filtering a list of results. To do this, I have set up a ul list to display the results and checkboxes for selecting filter options. Each item in the ul list has associated data attributes. When a checkbox with value="4711" is c ...

javascriptjqueryhtmlfiltering

useEffect does not trigger a rerender on the primary parent component

I am facing an issue where the main parent component does not re-render when I change the state 'click button' in another component while using useEffect. Oddly enough, the main <App /> component only re-renders properly when I reload the p ...

javascriptreactjstypescriptreact-hooks

Ever thought about harnessing the power of SassDoc to create detailed documentation for your sass

After experimenting with sassdoc for documenting our sass mixins and functions, I realized that there doesn't seem to be a straightforward way to generate documentation for our sass variables. Specifically, I am looking for a solution that can output ...

cssnode.jsnpmsassgulp

When attempting to process JSON using the fetch method, the value for a valid JSON key

Currently, I am facing a challenge wherein I need to fetch data from my REST server to populate the frontend of my UI. This requires me to make requests not only to my own server but also to other servers. One specific request involves retrieving a list of ...

javascriptnode.jsjsonexpressfetch

What specific features does CSS3 offer in terms of background-size properties?

Let's delve into my knowledge: $, like in font-size: 14$; em, as in margin: 2em; What other units are out there? ...

css

Store a JSON object without creating a reference to it

My issue is presented in a much simpler manner. Here is the json (you can view it here if you wish) {"resource":[{"id":"1408694994","obj":[{"id":"1","action":[{"name":"ON","id":"301"},{"name":"OFF","id":"302"}]},{"id":"2","action":[{"name":"ON","id":"303 ...

javascriptjson

Having trouble installing node-sass through npm

Currently, I am attempting to install the SASS compiler node-sass in order to compile SCSS code into CSS code. Despite following an online tutorial and replicating the same steps, I keep encountering errors. npm init --yes : this will generate a json file ...

cssnode.jsjsonsass

Assign a class to the following element using an Angular 2 Directive

I have a dropdown menu and I want to incorporate an Angular2 directive to control the opening and closing of this dropdown. How can I apply the open class to the latest-notification div, knowing that my directive is applied to the button tag? Below is my ...

javascriptangularangularjs-directive

Effectively accessing the Templater object within a user script for an Obsidian QuickAdd plugin

I have developed a user script to be used within a QuickAdd plugin Macro in Obsidian. The Macro consists of a single step where the user script, written in JavaScript following the CommonJS standard, is executed. Within this script, there is a task to gene ...

javascriptnode.jsobsidian

I'm having trouble retrieving data from the server using the AngularJS $http.get() function. What am I doing wrong

Ensure that your question is clear and that your code properly showcases the issue at hand. Feel free to leave any questions or comments below for clarification. app.js var express = require('express'); var app = express(); app.use(express.sta ...

javascriptangularjsnode.jsexpressget

Tips for executing specific javascript on small screens or mobile devices

I am currently in the process of developing a Vue web application that needs to be functional on all devices. I have certain code that should only run on small screens or mobile devices. Right now, I am using an if statement with $(window).width() to achie ...

javascriptvue.jsvuejs2

convert webpages and images to PDF with a custom watermark

Looking to convert images fetched from the server into PDF format with a watermark by clicking a button. It would be ideal if there is a plugin that allows for PDF preview with disabled user selection and copy options. The website's platform is Sales ...

javascriptjquerypdfpdf-generation

How to retrieve the optgroup label from a Bootstrap Select dropdown

Currently, I am working with a BootStrap select box and my goal is to identify the optgroup of the option that has been selected. The following code snippet showcases a bootstrap select box with different options: <li rel="1"> <div class="div- ...

jqueryhtml

Fixing the height of the body padding with JS or JQuery for a

I have a rather straightforward question that pertains to an issue I am facing while building a website using BS4. Specifically, my problem revolves around a fixed-top navbar with the class "fixed-top". The challenge stems from not knowing the actual heig ...

javascriptjqueryhtmltwitter-bootstrap

Overlaying div above vimeo player

I'm attempting to overlay a div on top of a Vimeo video, a task I anticipated would be straightforward but turns out to be more complex than expected. Below is the HTML code snippet: <div id="wrap"> <iframe id="video" s ...

htmlcssflashvideo

Tips on elevating a dragged div above all other elements when utilizing two scrollbars

Currently, I have two horizontal scrollers where I need to drag a div from the upper scroller to the lower scroller. While this functionality is working properly, there is an issue with the dragged div getting lost under the borders of the scroller during ...

javascriptjqueryhtmlcssscroller

Trouble with variable in require path causing issues with r.js

As a newcomer to optimizing with r.js, I am also a big fan of requirejs build-config.js ({ appDir: "./src/main/webapp/webresources/javascript/", baseUrl: "./", dir: "./target/webresources/js", optimizeCss ...

javascriptnode.jsrequirejsr.jsrequirejs-optimizer

React Native Header Icon Not Showing on the Left Side

I'm brand new to react and currently working on a project where navigation is done through a hamburger menu. I haven't encountered any errors in my code, but for some reason, the hamburger menu icon isn't displaying as expected. Interestingl ...

javascriptreact-nativereact-navigation

Issue with displaying the Bootstrap paginator stylingSomething seems to be

Currently, I am working on a PHP project that involves creating a table with Bootstrap styling. To achieve this, I referred to a tutorial which guided me through the process. After linking the necessary Bootstrap CSS file using the provided code snippet, ...

phphtmlbootstrap-5

Modify one specific variable within my comprehensive collection on Firebase Firestore

After clicking the button, I need to update a variable. The variable in question is "bagAmount" and it is stored in my firestore collection. Here is a link to view the Firestore Collection: Firestore Collection Currently, I am able to update one of the va ...

javascriptangulartypescriptfirebasegoogle-cloud-firestore