XPath complexity - Create an XPath expression based on the location of a different element

Within a table div, there are two child divs. The first child div represents the table header, and the second child contains the values corresponding to those headers.

The parent div is in bold, and the children are in italic bold.

<div class="sc-jgHCyG eZqcrI"> // >>>>>>>> Parent div
    <div class="sc-cTkwdZ fFvlhF"> // >>>>>>>>>>>> Child div - table headers
        <div class="sc-cBNfnY sc-eggNIi kHBkvh JiLrb align-items-center justify-content-between" draggable="false"
             width="1.8050541516245486">
            <div class="sc-iWFSnp cmuvkJ">
                <div></div>
            </div>
        </div>
        <div class="sc-cBNfnY sc-eggNIi fhvIWI JiLrb align-items-center justify-content-between" draggable="false"
             width="7.2202166064981945">
            <div class="sc-iWFSnp cmuvkJ">
                <div>Ticket</div>
            </div>
            <div><span class="sc-hTZhsR cQSaWH"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24"
                                                     aria-hidden="true"><path
                    d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path></svg></span></div>
        </div>
        (continues with other table headers)
    </div>
    <div> // >>>>>>>>>>>>>>>> second child div 
        (contains table values for each header)
    </div>
</div>

To extract all the Gross values from the table, regardless of their position, the following XPath can be used:

//div[contains(text(), 'Gross')]/../../../following-sibling::div//div[@class='sc-cBNfnY fhvIWI']

This XPath will retrieve all 7 Gross values present in the table cells.

39.39
43.19
26.25
30.27
38.91
31.99
29.99

Answer №1

Here is a concise XPath solution that doesn't rely on arbitrary class names:

//div[@class[contains(.,'d-flex')]]/div[count(//div[@class[contains(.,'justify-content-between')]][contains(.,'Gross')]/preceding-sibling::*)+1]/div

Answer №2

If you are working with separate tables, achieving your desired outcome with a single XPath expression is not possible.
One approach you can take is as follows:
To identify the column number where the text Gross is located, you can use the XPath:

column = count(//div[./div/div[text()='Gross']]/preceding-sibling::div[contains(@class,'fhvIWI')])+1

Based on the current XML, column is 8. Now, you can retrieve the target cells in the lower table using

//div[@class='sc-cBNfnY fhvIWI'][column]

Applying the expression

//div[@class='sc-cBNfnY fhvIWI'][8]

Produces the following results:

39.39
43.19
26.25
30.27
38.91
31.99
29.99

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

Developing a universal.css and universal.js file for a custom WordPress theme

I have developed a custom WordPress theme with an extensive amount of code. To manage the numerous style and script files, I have segmented them into multiple individual files. To integrate all these files into my template, I utilized the following code w ...

Enforce a restriction on the user's input value for the amount field within a React application

I'm looking to limit the user from entering more than 50000 in the input value. How can I achieve this using React? I am currently handling this on the onchange event. onPaymentAmountChanged = (e) => { let inputValue = e.target.value; if (i ...

During the execution of my Selenium test, a new private window unexpectedly appeared even though I did not include this action in my test script

While running a Selenium test script on my website, everything was perfect initially without any errors. However, due to malware affecting my browser, I had to reinstall it. After the reinstallation, when I ran the test again, a new private window opened a ...

What steps can I take to ensure the proper formatting of the `select` input on Mac OS?

How can I maintain consistent formatting for my form across different operating systems? Currently, the form looks good on Windows, but I want to ensure that the select input appears consistently on Mac OS, iOS, and Android devices as well. The image bel ...

Positioning elements at the bottom of the container

There is a dilemma that only those in the world of web development will understand. Beware! I have envisioned a layout for a website I am constructing. The concept involves tilted <hr/> elements on the page, with text wrapping around them (refer to ...

Apply CSS styles to the checkbox

I am new to CSS and I need help styling a checkbox element. When the user selects one of the checkboxes, I want the background color to change to yellow. Thank you for any assistance you can provide! .radio_toggle { float:left; } .radio_toggle label ...

Refresh HTML5 Canvas Drawing

Is it possible to create a meta code that efficiently toggles the visibility of a chart and grid by using checkboxes? Currently, I am redrawing the whole canvas whenever the 'Show Grid' setting is changed, but I'm hoping for a more optimized ...

Creating a Form with HTML and CSS

I am currently working on setting up a banner that includes an overlay with a cutout. Beneath the overlay, there is an image. My goal is to create this design using HTML and CSS. I have been experimenting with pseudo-elements but I am having difficulty re ...

locate several elements based on their unique identifiers

I am currently attempting to locate numerous elements using their individual ids. The elements have the following names: dcm-reservation-limit-multiple-input-generic-X where X represents the number of elements, such as: dcm-reservation-limit-multiple-in ...

Tips for preventing PyCharm from automatically completing HTML and Django template tags

While working on Django templates in PyCharm, I noticed that it automatically closes the tags. This can be helpful when starting a new tag, but it becomes annoying when I want to place existing content within a different tag because I have to delete or mov ...

Adjusting the angular routerLink based on an observable

When working with HTML in Angular, I am looking for a way to use an <a> tag that adjusts its routerlink based on whether or not a user is logged in. Is it possible to achieve this functionality within a single tag? <a *ngIf="!(accountService ...

Issue with jQuery DataTable: Unable to use column-level filters at the top and maintain a fixed height simultaneously

I am having an issue displaying data in a jQuery DataTable with a column level filter at the top, fixed height, and scroller enabled. Initially, I was able to display the column level filter at the top and it was functioning properly. However, when I set t ...

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

return <div> <div >{'Audios'}</div> {urls.map(url => <div > <audio controls src={url} ref={(element) => this.audioRefs.push(element)} /> </div>)} </div>; I a ...

Maintaining Order with SCSS and Compass - Is it Possible?

Does compiled SCSS using Compass preserve the order of declarations? Can Compass guarantee the order of properties (assuming it's the way Compass operates that determines this)? This is mainly important when there are multiple definitions with the s ...

Place centered items within a flexbox that uses space-between alignment

When designing a navigation section, I am looking to achieve space-between justification. However, for smaller screens where the navigation items may need to wrap onto multiple rows, I want the items to center themselves instead of aligning to the left whe ...

Discover the steps to download web page data using Objective-C while ensuring that JavaScript has finished executing

I attempted something similar: NSString *url = @"http://www.example.com"; NSURL *urlRequest = [NSURL URLWithString:url]; NSError *error = nil; NSString *htmlContent = [NSString stringWithContentsOfURL:urlrequest encoding:NSUTF8StringEncoding error:&e ...

Tips for handling page redirections in Selenium tests

I'm currently working on a task that involves waiting for a page redirect to be completed. I recently came across another question that discussed waiting for specific text to appear on the new page before proceeding. I'm wondering if it might be ...

Step by step guide on inserting View and Delete buttons in an HTML table populated by JSON data

I've successfully loaded data from a JavaScript file in JSON format into a plain HTML table using JavaScript. Everything is working well so far. I now want to enhance the table by adding two buttons, View and Delete, that when clicked will redirect to ...

Adding a PHP script alters the way content is displayed in a web browser

Forgive me for what may seem like a trivial question, but I have been searching for hours without any luck. It appears that including more than one file in an already included file is causing a minor change to the page layout. The issue manifests as a sli ...

Unexpected behavior from HTML5 number input field

Is there a way to prevent users from entering values outside the specified max and min attributes? The constraints work when using the arrows in the input field, but not when typing directly into it. Note: I am considering utilizing angularjs for this fun ...