Tips for extracting text from a span element

#Illustration A
<span class="levelone">
    <span class="leveltwo" dir="auto">
        ::before
        "Blue"
        ::after
    </span>
</span>



#Illustration B
<div class="itemlist">
    <div dir="auto" style="text-align: start;">
        "mobile"
    </div>
</div>



#Illustration C
<div class="quantity">
    <div class="color">...</div>
    <span class="num">10</span>
</div>

Hello there! I am currently experimenting with using selenium to parse content from HTML. So far, I have successfully extracted the data for illustrations A and B using the following code:

data1 = driver.find_elements_by_css_selector("span[class='leveltwo']")
data2 = driver.find_elements_by_css_selector("div[class='itemlist']")

I was able to retrieve "Blue" for illustration A and "mobile" for illustration B. The given HTML examples are only for demonstration purposes, as I have scraped all elements matching the specified classes.

However, when attempting to extract the value "10" from the third illustration, I encountered some difficulties. I tried using the following methods:

data3a = driver.find_elements_by_css_selector("div[class='quantity']")
data3b = driver.find_elements_by_css_selector("span[class='num']")
data3c = driver.find_element_by_class_name("num")

Unfortunately, all attempts resulted in an empty list. I suspect this could be due to the absence of the dir attribute in illustration C. Can anyone suggest the correct approach to extract the "10" value from this specific example?

htmlcssseleniumweb-scrapingtags

Answer №1

Here is a suggestion for the third example, you might want to consider using the following CSS:

div.quantity span.num

You can implement this in your code like so:

example3a = driver.find_elements_by_css_selector("div.quantity span.num")
print(example3a.text)

Alternatively, you can also use:

print(example3a.get_attribute('innerHTML'))

Answer №2

In order to specifically retrieve the 10, you can employ the following method:

results = driver.find_elements_by_css_selector("div.quantity span.num")

If you want to extract both elements within the 

<div class="quantity">
, you should use:

elements = driver.find_elements_by_xpath("//div[@class='quantity']//*")
for element in elements:
    print(element.text)

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

Tips on enabling zooming for resizing an image and initially sizing it using vh/vw units

My issue involves having an extensive amount of code spread across various components (I'm using vue.js). Although I can't share all the code efficiently, I'll do my best to explain the situation clearly: I have a div that contains an image ...

htmlcssvue.js

Tips on preventing duplicate data from being extracted from an HTML source with HtmlAgilityPack

In my project, I am utilizing HtmlAgilityPack to scrape data from an HTML Code source. Let me show you an example of the HTML structure: <div class="enum-container"> <div class="enum"> <span class="field-key">MD5</span> ...

c#htmlvb.netextracthtml-agility-pack

Update JavaScript variable value when there is a change in the onchange

Greetings, thank you for taking the time to read this. I am currently working with an input that includes a datepicker calendar. This calendar has variables called minDays and MaxDays which allow users to select a specific number of days. In my HTML form, ...

javascriptphphtmlajaxonchange

Background image animation with timed CSS3 transitions

Just dipping my toes into the world of CSS and HTML, but I'm getting the hang of it. Currently, I have a background image on my header section and I want to transform it into a slideshow featuring 3-4 images that rotate automatically. I've come ...

javascriptjqueryhtmlcss

Unable to find element in webtable using Selenium WebDriver

I encountered an issue while attempting to retrieve values from a static webtable. The error message I received is shown in the code snippet below: import java.util.List; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; import org.ope ...

javahtmlseleniumxpathselenium-webdriver

What is the best way to cycle through the hover images and select each profile beneath them?

Currently exploring , I am intrigued by the idea of creating a for loop. This loop would smoothly guide the mouse cursor to various images, clicking on profile links before returning to repeat the process with the next image and so forth. private final By ...

javaseleniumhover

Ways to modify styles defined in the global style.scss file using a child component's CSS and constraining it to affect only that specific component

When working on my Angular project, I have implemented some CSS styling in the global style.css file located at src/style.css. However, there are instances where I need to modify certain styles within a specific component only. Currently, I am able to achi ...

htmlcssangularangular-componentsng-deep

The high chart data is failing to load

I am brand new to highchart and have just started learning how to create a simple pie chart in HTML. Unfortunately, I am having trouble getting it to work properly. Everything seems correct to me, but for some reason, the highchart is not populating. Here ...

jqueryhtmlhighcharts

Adjust the background color of a non-selected Material-UI checkbox

Currently, I am working with a combination of React-Redux and Material-UI to style my project. Within this setup, I have a checkbox component that is placed on a toolbar with a blue background color (#295ED9). So far, I have successfully altered the color ...

cssreactjscheckboxreact-reduxmaterial-ui

Error: Selenium-Javascript tests encountering an unexpected token issue

Having worked with Selenium using Java for a long time, I decided to switch gears and start writing Selenium scripts in JavaScript. I found a helpful guide to learn JavaScript with Selenium, which you can check out here. However, when I attempted to run n ...

javascriptnode.jsseleniumnpmwebdriver

How can I increase the spacing between numbers in a sentence?

Is there a method to incorporate letter spacing to numerals while utilizing old style numerals through OpenType font feature settings on my website, without requiring each one to be enclosed in a span class? ...

cssfontsfont-facewebfontstypography

Creating a dynamic full-width background image that adjusts its height according to the content: a step-by-step guide

Currently, I'm attempting to apply a background image to a webpage that spans 100% width in order to adjust to the viewport size. The method I am using involves placing an image directly after the body tag with the subsequent styling: img#background ...

cssbackgroundpositioningbackground-image

Tips for overriding CSS rules marked as !important by a script

I recently implemented a JavaScript plugin from an external service that comes with its own CSS rules. However, these rules are not compatible with my layout as the width needs to be changed from 540 to 700px: #chat-container.bbhorizontal .main .booking { ...

csscss-selectors

Retrieve the folder and file name selected by the user in the browser

Can the client's directory path be obtained for a file uploaded to a server? ...

phpjavascripthtmlajaxbrowser

Reveal unseen information on the webpage upon clicking a link

I have successfully implemented a fixed header and footer on my webpage. The goal is to make it so that when a user clicks on a link in either the header or footer, the content of that page should appear dynamically. While I have explored various styles, ...

javascriptjqueryhtmlcss

Guide to adding a Json file in a PHP file with PHP

I have a PHP file with an embedded JSON file, and I want to update the JSON file with new information from a form. The form looks like this: <form action="process.php" method="POST"> First name:<br> <input type="text" name="firstName"> ...

javascriptphphtmljson

Display a variety of images when hovering over different elements

I have a logo in various colors that I want to cycle through on hover. The default image is black, then changes to red on the first hover, yellow on the second hover, and blue on the third hover. This cycle continues back to black and repeats. Any suggesti ...

javascriptjqueryhtmlcss

Capybara Selenium can't find the element on the page

https://i.sstatic.net/QysXa.pngI encountered an error when trying to execute a specific capybara command. What's interesting is that the XPath causing the error doesn't actually have any issues where it should exist. However, attempting to click ...

seleniumselenium-webdrivercapybaraselenium-chromedriver

Learn how to showcase the value of the selected radio button in AngularJS

To show the chosen radio button in the response div, make sure to hide the div if no option is selected. Check out the code below: <body ng-app="QuestionDisplayModule"> <form> <div ng-controller="QuestionDisplayController" ...

javascripthtmlangularjs

Discover a class located following a specific element even when they are not directly related

There is a group of elements all with the class month. Some of them also have the class cal, while only one has the class today. The goal is to locate the first element with the class cal, but only after finding the element with the class today. The chall ...

javascriptjqueryhtml