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

Class methods cannot be invoked within their constructor

I'm currently facing challenges with implementing my express router. This is a "subrouter" of my main router, hence I need to extend express.Router. Here's an example of the code (simplified to include only one method): import express from "expr ...

javascriptnode.jsexpress

I am experiencing an issue with using double quotation marks in VS Code

Whenever I press the double quote symbol like this "", the cursor automatically moves to the end. While this may be natural, I would prefer the cursor to move inside the double quotes automatically when pressing them. Additionally, it's a bi ...

javascripthtmlreactjsvisual-studiovisual-studio-code

The controller returned a null value

I've encountered a situation where I'm utilizing a service file to execute a stored procedure: function createCampaign($campaignName, $groupNumber){ $stmt = \DB::connection('odbc')->getPdo()->prepare('CALL SCHE ...

javascriptphpjsonajaxlaravel

Could you please explain the distinctions among onLoad, onDomready, No wrap - in <head>, and No wrap - in <body>?

When it comes to editing my code, I rely on JSFiddle. However, I have noticed that in certain instances when running JavaScript or jQuery, the code only works if I choose "No wrap - <head>" or "No wrap - <body>". CLICK HERE FOR THE JSFIDDLE EX ...

javascriptjsfiddle

Receiving an unknown result from the bodyParser function

Currently, I am in the early stages of learning nodejs + express + handlebars and facing some challenges with my post request. The issue lies in extracting data for "province and municipality" from req.body.province and req.body.municipality, which is not ...

htmlnode.jsexpresshandlebars.jsbody-parser

Is it possible for npm to assist in determining the appropriate version of Primeng that is compatible with Angular 16 dependencies

While trying to add primeng to my project, I ran into an error message: npm i primeng npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

javascriptnode.jsangularnpmprimeng

Can anyone provide guidance on how to simulate a click on a JavaScript action for an iPhone?

I am attempting to trigger a click on a "javascript:void(0)" link so that I can retrieve HTML data within the script. Can someone advise me on how to achieve this without using illegal APIs like UITouchEvent, as I only work with NSUrl? Thank you in advan ...

javascriptiphonehtmlnsurl

'The error thrown states: "ReferenceError: httpResponse is not defined" occurs while attempting to parse the JSON response from a Parse HTTP

My commitment statement involves sending multiple requests to eBay, each time using the properties of a matchCenterItem as parameters. Once all instances have been processed, I aim to transmit all the responses to my iOS application. However, my effort to ...

javascriptjsonparse-platformpromise

React - Image Uploader exclusively accepts images with transparent backgrounds

I need to verify if an image has a transparent background and reject it if it does, but accept it if it doesn't. However, I am facing an issue where the hasAlpha function is not triggering an 'error' alert when the image contains a backgroun ...

javascriptreactjsmern

CSS: Experimenting with creating a hover effect that lifts the box upwards

Hey there! I'm currently working on adding a red hover box for my Menu. The issue I am facing is that the hover box is displaying below the menu line. I am attempting to adjust the hover box to move a bit higher or up. You can view the image here: ht ...

cssmenuhover

Enhancing MEAN Stack Application by Updating Table Post Database Collection Modification

In my efforts to ensure that my table data remains synchronized with the database information, I have encountered an issue. Whenever Data Changes: $scope.changeStatus = function($event,label,status){ var target = $event.currentTarget; target ...

javascriptangularjsrestexpressmean-stack

The elements within the flexbox are being truncated when viewed on smaller devices

I have encountered an issue with my code where the .content element, which has flex properties, appears cut off on small screens. I want to avoid setting a fixed size because the text within it may vary in size. The goal is for the background image to fi ...

htmlcssflexbox

Dynamic content loading for Twitter Bootstrap Popover using Ajax

Below is my code for dynamic content loading in a popover using AJAX. The popover displays correctly after the initial load, but there is an issue with its behavior on the first "show" event – it appears and disappears immediately. $("a.mypopover"). ...

javascriptjquerytwitter-bootstrap

Issue with data type not refreshing in mySQL Workbench

I'm facing an issue with changing the datatype of my "first_name" column. I want it to be VARCHAR(45), but it's stuck at INT(11) as shown in the table diagram and connection provided below. I've attempted to forward engineer the diagram mul ...

phphtmlmysqlmysql-workbenchalter-table

Each time I attempt to update my profile on the web application, I receive this notification

Working on creating a web app using react, redux, and node for managing profile data. I have a function that controls both creation and editing of profiles. The creation works fine, but I encounter an error message when trying to edit. I've reviewed m ...

javascriptnode.jsreactjsreduxes6-promise

What is the process for incorporating a custom attribute in Quasar?

My goal is to include custom properties in the Quasar framework, but I am encountering an error with ESLint. It displays the following message: Array prototype is read only, properties should not be added I am looking to implement an extend method for Arr ...

javascriptvue.jsvuejs2quasar-frameworkquasar

Tips on storing information within a Vue instance

Seeking a simple solution, all I need is to save data retrieved after an AJAX post in the Vue instance's data. See below for my code: const VMList = new Vue({ el: '#MODAL_USER_DATA', data: { user: []//, //userAcc: [] }, met ...

javascriptvue.jsvuejs2vue-componentvuex

Utilize CSS transition to smoothly reveal a hidden div with a fading effect

I am trying to create a hover effect where a caption displayed over an image fades in with a background color change. I have attempted to use transitions but they do not seem to work for block elements. For the code and JSFiddle, please visit this link. ...

htmlcss

Excess space noted at the bottom of tablet and mobile versions of the page

I'm struggling to troubleshoot an issue with the mobile and tablet versions of a web-shop I'm designing for university. Some pages have excessive space after the HTML tag, but only on certain pages. I've tried commenting out CSS lines relate ...

javascripthtmljquerycssbootstrap-5

Proper management of setTimeout in an Angular application

I am working on a one-page web application where the main component's ngOnInit() function triggers a recursive function called loopDoSomething() using setTimeout: ngOnInit(): void { // Perform some operations this.loopDoSomething(); } loopDoSome ...

javascriptangular