Employing XPATH to locate specific text content enclosed within one div and nested within another div

<?xml version="1.0" encoding="UTF-8"?>

<div id="app" class="grid bg-local font-body justify-center" style="background-image: url(&quot;/img/picture.jpg&quot;);"> 
  <div data-v-f7g8b83d=" " data-fruit-code="**I WANT TO GET WHAT'S IN HERE**" class="note relative bg-background items-center select-none w-56 sm:w-64 pb-4" style="transform: rotate(6deg);"/>
  <div data-v-f7g8b83d=" " data-fruit-code="**I WANT TO GET WHAT'S IN HERE 1**" class="note relative bg-background items-center select-none w-56 sm:w-64 pb-4" style="transform: rotate(6deg);"/>
  <div data-v-f7g8b83d=" " data-fruit-code="**I WANT TO GET WHAT'S IN HERE 2**" class="note relative bg-background items-center select-none w-56 sm:w-64 pb-4" style="transform: rotate(6deg);"/>
  <div data-v-f7g8b83d=" " data-fruit-code="**I WANT TO GET WHAT'S IN HERE 3**" class="note relative bg-background items-center select-none w-56 sm:w-64 pb-4" style="transform: rotate(6deg);"/>
  <div data-v-f7g8b83d=" " data-fruit-code="**I WANT TO GET WHAT'S IN HERE 4**" class="note relative bg-background items-center select-none w-56 sm:w-64 pb-4" style="transform: rotate(6deg);"/>
</div>

I am currently developing a web scraping bot to extract specific information from a website. My goal is to retrieve the text that corresponds to the attribute "data-fruit-code".

After trying different XPATH commands like:

//*[@id="app"]/div[2]/div

and

//*[@data-fruit-code]

I found that both of them highlighted the entire div instead of just extracting the "data-fruit-code" text I needed. I suspect there might be an error in my XPATH command. What adjustments can I make to accurately capture only the "data-fruit-code" text?

I experimented with adding functions like text() and word(), but unfortunately, they did not yield the desired results.

For assistance, I referred to resources such as:

https://developer.mozilla.org/en-US/docs/Web/XPath

htmlcssxmlseleniumxpath

Answer №1

Remember that the data-fruit-code is referred to as an attribute and can be identified in XPath with a preceding @ symbol.

There are numerous methods for selecting specific attributes. Here are two intriguing options:

  1. Using this XPath,

    //@data-fruit-code

    all instances of the data-fruit-code attribute within the document will be selected.

  2. Alternatively, with this XPath,

    //div[@id="app"]/div/@data-fruit-code

    only data-fruit-code attributes on div elements whose parent div has an id attribute value of app will be selected.

Answer №2

Attempt

//div[@data-fruit-code]/@data-fruit-code

Result

**Here's the desired content**
**Here's the desired content 1**
**Here's the desired content 2**
**Here's the desired content 3**
**Here's the desired content 4**

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

Attempting to implement a functionality that will allow users to easily delete records from the database

I've taken on a school project where I am tasked with creating a login/registration form. Additionally, I need to develop functionality that allows users to register, login, view records, and delete records from the database using a dropdown menu and ...

phphtmlsqldatabasemysqli

PHP is struggling to retrieve the value of "img src"

CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="./test2.php" method="POST"> ...

phphtml

Meteor: dynamic approach to assigning array values in Spacebars

It's hard to put this into words... I have a collection with an array, and as I iterate through it, I've been setting colors.[0].imageLink without changing the [0]. Now, I want this to be dynamic based on the value of a function (in this case, th ...

javascripthtmlmeteorspacebars

Video embedded in a plain CSS popup that automatically starts playing even before the popup is triggered

My goal is to incorporate a video into a minimalist CSS modal window, following the guidance provided here. While the setup works well overall, I encounter a issue where the video starts playing before the modal window is opened (I need to maintain the "au ...

htmlcssmodal-dialog

Unexpected behavior observed when trying to smoothly scroll to internal links within a div, indicating a potential problem related to CSS dimensions and

Within a series of nested div containers, I have one with the CSS property overflow:hidden. My goal is to smoothly scroll to internal links within this specific div using jQuery. The snippet of code below has worked successfully in previous projects: ...

javascriptjquerycssscroll

What could be causing the removal of style classes from my element after it is appended?

Could you please explain how it functions? I am attempting to append a div with content using innerHTML and it is working, but without any of the styling classes being applied. const element = document.createElement("div"); element.classList.add("col ...

javascripthtmlbootstrap-5

Is there a way to create animated CSS box-shadow depth using jQuery or CSS3 transitions?

This code snippet applies delays but doesn't seem to update the style changes until the loop completes: for (i=20;i>=0;i--) { var boxShadow = i+"px "+i+"px "+i+"px #888"; $('article').css("box-shadow", boxShadow); ...

javascriptjquerycsscss-transitions

"Customize the appearance of your theme by adjusting the background and text colors when making a

Is there a way to dynamically change the style of a webpage based on user selection using CSS in AngularJS? I've searched online, but haven't found a solution that works for me. I have a CSS file with different styles and I want to apply these ...

cssangularjs

Automatically resize ui-select dropdown box to the left side

I've been tasked with incorporating AngularJS ui-select into my project, specifically creating a multiselect dropdown. Currently, the dropdown box automatically adjusts its width based on the length of the longest selectable text, causing it to extend ...

javascripthtmlcssangularjsui-select

Applying CDNJS CSS or external CSS to Nodemailer HTML templates with Jade and Express: A Guide

I am attempting to send emails using node mailer. I have a jade template with HTML markup in an external file, which is compiled and rendered correctly. However, the styles inserted through maxcdn or cdnjs are not being applied. In this situation, how can ...

javascripthtmlnode.jsemailexpress

Superimpose two actionlinks and prioritize the one appearing above

I have implemented a menu similar to http://tympanus.net/Tutorials/SlideDownBoxMenu/. Below this menu, I have placed a webgrid. The issue I am facing is that when I hover over the menu, the slidedownbox with two action links pops up directly over the heade ...

jqueryhtmlcssasp.net-mvc-4

Merging Angular with jQuery: Organizing jQuery into a distinct file leads to the error message 'Property 'top' cannot be read because it is undefined.'

My project is based on AngularJS, and I've been trying to incorporate a jQuery code for a sticky sidebar feature. Strangely enough, when I tested my code on Plunkr, it works perfectly fine. However, when I try to implement it in my actual project, it ...

javascriptjqueryhtmlangularjs

How to Style Django's Multiwidget & MutliValueField Textarea with Crispy Forms

I've created a custom form field setup using a TextField to store a large amount of text split into 10 logical parts. To achieve this, I decided to create 10 individual Textarea fields by subclassing both MultiWidget and MultiValueField: class MultiWi ...

htmldjangobootstrap-4django-formsdjango-crispy-forms

Generating Speech from Text using jQuery API in HTML

Can a website be created to detect textbox text upon longClick by the user, and function across various browsers? The site should also have mobile compatibility. Appreciate any help! ...

javascriptjqueryhtmlcsstext-to-speech

What could be causing this code to malfunction on a mobile device?

I am struggling to make this drag and drop function work on mobile devices. Despite implementing the code, it doesn't seem to function properly when accessed on my mobile phones. Here is the snippet of the code: copy = 1; $('.dragArea img&apo ...

javascripthtmlcss

Triggering an event for a div using Javascript, along with a Rails loop

I have a page showcasing a collection of listings that are displayed on the main page. <% @listings.each do |listing| %> # do something <% end %> Each listing now includes a data-toggle, essentially a button. <a id="chat-menu-toggle" h ...

javascriptjqueryhtmlruby-on-rails

Users may encounter an issue when attempting to swipe from the bottom to the top on iOS while

I am trying to adjust the wifi status on ios by swiping up from the Control Center located at the bottom of the screen. dimension = driverWrapper.getIosDriver().manage().window().getSize(); int middleX = dimension.getWidth() / 2; int y = dimen ...

javaseleniumappium

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

javascripthtmlcss

Tips for properly interpreting text entered into a Text Box

Presenting the TextBox Image along with its XPath for easy reference: Click here to view the image Below is the code snippet that I attempted: { String NameTxtBxData = driver.findElement(By.id("ngoName")).getText(); System.out.println(NameTxtBx ...

seleniumselenium-webdriver

Is it possible to have the navigation bar (bootstrap) appear on top of my slider as the default setting, without taking up additional space?

I'm encountering a rather simple issue that's giving me some trouble. I'm currently working on a website design using Bootstrap, and initially, there were no image sliders included by default. After integrating an image slider, I noticed th ...

htmlcssbootstrap-4