How to create element to get text of only parent

image

How can I get the text of the parent div only?
I only know the way using xpath with .//div[contains(text(),‘Individual:’)]/following-sibling::text()
But I wanna get the element or find a WebUI method to get text of only parent div.
How can I do that?

Anything that relies on the dom innerText property is not going to help. That xpath and WebUI methods will all fail, I believe.

You can use JavaScript to build the immediate text but first you will need to figure out a css selector to locate that DIV. And to help with that, I’d need to see more HTML.

1 Like

Can you try the following XPath?

//div[contains(text(),‘Individual:’)]/…/ (the last should be two dots and an up-slash but it displays weird)

you can replace the two dots and up-slash with “parent::div” I believe, rather than “following-sibling”.

Once you have the XPath, then use WebUI.getText().

1 Like

If I using that, it’ll return all text in 2 div including:
Individual: 180220_1438 GSI_Auto.
But I need the “180220_1438 GSI_Auto” only.

Here’s the html element

<div _ngcontent-c1="" fxflex="0 0 calc(33.3%)" class="ng-star-inserted" style="flex-basis: calc(33.3%); box-sizing: border-box; max-width: calc(33.3%); min-width: calc(33.3%); padding: 0px 20px 20px 0px;">
    <mat-card _ngcontent-c1="" class="case-item clickable mat-card">
        <div _ngcontent-c1="" class="margin-bottom-10" fxlayout="row" style="flex-direction: row; box-sizing: border-box; display: flex;">
            <div _ngcontent-c1="" class="label text-primary" fxflex="35" style="flex: 1 1 100%; box-sizing: border-box; max-width: 35%;">Reference ID:</div>
            <div _ngcontent-c1="">180220_1438_MTT</div>
        </div>
        <div _ngcontent-c1="" class="margin-bottom-10 xh-highlight" fxlayout="row" style="flex-direction: row; box-sizing: border-box; display: flex;">
            <div _ngcontent-c1="" class="label" fxflex="35" style="flex: 1 1 100%; box-sizing: border-box; max-width: 35%;">Individual:</div> 180220_1438 GSI_Auto </div>
        <div _ngcontent-c1="" class="margin-bottom-10" fxlayout="row" style="flex-direction: row; box-sizing: border-box; display: flex;">
            <div _ngcontent-c1="" class="label" fxflex="35" style="flex: 1 1 100%; box-sizing: border-box; max-width: 35%;">ACCESS ID:</div> ZY-TH-8JNQ </div>
        <div _ngcontent-c1="" class="margin-bottom-10" fxlayout="row" style="flex-direction: row; box-sizing: border-box; display: flex;">
            <div _ngcontent-c1="" class="label text-primary" fxflex="35" style="flex: 1 1 100%; box-sizing: border-box; max-width: 35%;">Status:</div> ACCESS Initiated </div>
        <div _ngcontent-c1="" status-stepper="" _nghost-c8="">
            <ul _ngcontent-c8="" class="breadcrumb-container">
                <!---->
                <li _ngcontent-c8="" class="ng-star-inserted">
                    <div _ngcontent-c8="" class="steps active"><span _ngcontent-c8="" class="step-number"><!----><fa-icon _ngcontent-c8="" class="ng-fa-icon ng-star-inserted"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" class="svg-inline--fa fa-check fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></fa-icon></span>
                        <!---->
                    </div>
                </li>
                <li _ngcontent-c8="" class="ng-star-inserted">
                    <div _ngcontent-c8="" class="steps"><span _ngcontent-c8="" class="step-number"><!----></span>
                        <!---->
                    </div>
                </li>
                <li _ngcontent-c8="" class="ng-star-inserted">
                    <div _ngcontent-c8="" class="steps"><span _ngcontent-c8="" class="step-number"><!----></span>
                        <!---->
                    </div>
                </li>
                <li _ngcontent-c8="" class="ng-star-inserted">
                    <div _ngcontent-c8="" class="steps"><span _ngcontent-c8="" class="step-number"><!----></span>
                        <!---->
                    </div>
                </li>
            </ul>
        </div>
        <div _ngcontent-c1="" class="carret-card"></div>
    </mat-card>
</div>

Firstly, that HTML is subtly but crucially different to your screenshot taken from Chrome. In the screenshot, the text you’re trying to access is “free” text inside the “parent” div as you stated. In the HTML dump you pasted, it’s residing in a child div.

In this answer, I’m working with the latter.

If that is the only <mat-card> element on the page then this CSS selector will target the correct div.

mat-card > div div:nth-child(2)

and this Groovy/JavaScript combination will retrieve the text:

String js = '''
  return document.querySelector("mat-card > div div:nth-child(2)").innerText;
'''
String txt = WebUI.executeJavaScript(js, null)
println txt

If there is more than one <mat-card> element on the page, then we will need to improve the CSS selector and the JS. Plus, I’ll need to see even more HTML.

Advice: This is a brittle way to approach this problem. To improve it, ask the page developers to add some unique identifiers for mat-cards or their parent div wrappers – your life would be a lot easier and your selectors/locators would be less brittle. If they say “anonymous elements are cool and IDs are not”, tell them they’re confusing humans with code. :sunglasses:

1 Like