Incorrect Next Sibling Element Returned

Libraries Browser
1

I am using Robot Framework to test agains a Web App generated by Flutter… Because all the elements are in a shadowRoot I’m using the Browser Library. However I’m having an issue getting the correct next sibling from the following html within the shadowRoot.

Using the following: ${element}= Get Element [aria-label="Declaration Signature"] + fit-semantics I would expect to get returned: Element with id: flt-semantic-node-144 However it is returning: Element with id: flt-semantic-node-145 I can't use the id to select elements because Flutter generates them on the fly.. I've tested the css selector in Chrome Dev tools and it returns the correct element.. Anyone one have any suggestion on what may be going wrong here? Or what I may not be understanding?

Thanks.

2

Sorry, my first post and I guess the HTML didn’t get included… Trying again to add it:

<flt-semantics id="flt-semantic-node-51" style="position: absolute; width: 600px; height: 340px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 543, 139); pointer-events: none; z-index: 3; touch-action: none; overflow-y: scroll;">
	<flt-semantics-container style="position: absolute; pointer-events: none; top: 10px; left: 0px;">
	<flt-semantics id="flt-semantic-node-143" aria-label="Declaration Signature" role="text" style="position: absolute; width: 153px; height: 16px; transform-origin: 0px 0px 0px; transform: matrix3d(0.75, 0, 0, 0, 0, 0.75, 0, 0, 0, 0, 0.75, 0, 0, 20, 0, 1); pointer-events: all; z-index: 2;"></flt-semantics>
		<flt-semantics id="flt-semantic-node-144" style="position: absolute; touch-action: none; overflow-y: scroll; width: 560px; height: 200px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 32); pointer-events: all; z-index: 3;">
			<flt-semantics-scroll-overflow style="position: absolute; transform-origin: 0px 0px 0px; pointer-events: none; transform: translate(0px, 210px); width: 560px; height: 10px;"></flt-semantics-scroll-overflow>
		</flt-semantics>
		<flt-semantics id="flt-semantic-node-145" tabindex="0" role="button" style="position: absolute; width: 40px; height: 40px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 560, 112); pointer-events: all; z-index: 4;"></flt-semantics>
		<flt-semantics id="flt-semantic-node-142" aria-label="Message A." role="text" style="position: absolute; width: 600px; height: 56px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 256); pointer-events: all; z-index: 1;"></flt-semantics>
		<flt-semantics id="flt-semantic-node-146" style="position: absolute; width: 600px; height: 28px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 312); pointer-events: all; z-index: 5;">
			<textarea spellcheck="false" autocorrect="off" autocomplete="off" data-semantics-role="text-field" aria-label="Name and Title" style="position: absolute; top: 0px; left: 0px; width: 600px; height: 28px;"></textarea>
		</flt-semantics>
		<flt-semantics id="flt-semantic-node-147" aria-label="Important Reminder" role="text" style="position: absolute; width: 600px; height: 32px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 363); pointer-events: all; z-index: 6;"></flt-semantics>
		<flt-semantics id="flt-semantic-node-148" aria-label="
Message B." role="text" style="position: absolute; width: 600px; height: 105px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 412.43); pointer-events: all; z-index: 7;"></flt-semantics>
	</flt-semantics-container>
	<flt-semantics-scroll-overflow style="position: absolute; transform-origin: 0px 0px 0px; pointer-events: none; transform: translate(0px, 350px); width: 600px; height: 10px;"></fl-semantics-scroll-overflow>
</flt-semantics>```
3

@jswales What if you try this XPath:

//*[@aria-label=“Declaration Signature”]/following-sibling::flt-semantics[1]

4

I can’t use XPath because the elements are all in the shadowRoot… So I’m limited to using css selectors.

5

Sorry CSS variant:

flt-semantics[aria-label=“Declaration Signature”] + flt-semantics

6

This works for me:

${id} Get Attribute flt-semantics[aria-label=“Declaration Signature”] + flt-semantics attribute=id

7

Tried it with the suggestion…
Still returns -145 first followed by -144
I’ve even tried using Get Elements and looping through the results, but it always has the first two in the incorrect order, at least compared to when I inspect the elements in Chrome or Firefox…
I’ve run the test against both Chromium and FireFox…
I even ran with two Get Element, with the second using the result of the first and it had them in the incorrect order… Wonder if the Test is somehow displaying these elements in a different order?
Is there a way to get a view of the element tree like we see in Dev Tools when running the test on this page?

8

That’s strange. Is the result from Get Page Source different than you see in the browser? I personally never worked with a shadow DOM.

9

If I use this as the HTML file, than the following code still gets the sibling element

${id} Get Attribute flt-semantics[aria-label=“Declaration Signature”] + flt-semantics attribute=id

    <body>
        <div id="host">
        <template shadowrootmode="open">
            <flt-semantics id="flt-semantic-node-51" style="position: absolute; width: 600px; height: 340px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 543, 139); pointer-events: none; z-index: 3; touch-action: none; overflow-y: scroll;">
	            <flt-semantics-container style="position: absolute; pointer-events: none; top: 10px; left: 0px;">
	                <flt-semantics id="flt-semantic-node-143" aria-label="Declaration Signature" role="text" style="position: absolute; width: 153px; height: 16px; transform-origin: 0px 0px 0px; transform: matrix3d(0.75, 0, 0, 0, 0, 0.75, 0, 0, 0, 0, 0.75, 0, 0, 20, 0, 1); pointer-events: all; z-index: 2;"></flt-semantics>
	                <flt-semantics id="flt-semantic-node-144" style="position: absolute; touch-action: none; overflow-y: scroll; width: 560px; height: 200px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 32); pointer-events: all; z-index: 3;">
	                    <flt-semantics-scroll-overflow style="position: absolute; transform-origin: 0px 0px 0px; pointer-events: none; transform: translate(0px, 210px); width: 560px; height: 10px;"></flt-semantics-scroll-overflow>
	                </flt-semantics>
		            <flt-semantics id="flt-semantic-node-145" tabindex="0" role="button" style="position: absolute; width: 40px; height: 40px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 560, 112); pointer-events: all; z-index: 4;"></flt-semantics>
		            <flt-semantics id="flt-semantic-node-142" aria-label="Message A." role="text" style="position: absolute; width: 600px; height: 56px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 256); pointer-events: all; z-index: 1;"></flt-semantics>
		            <flt-semantics id="flt-semantic-node-146" style="position: absolute; width: 600px; height: 28px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 312); pointer-events: all; z-index: 5;">
			            <textarea spellcheck="false" autocorrect="off" autocomplete="off" data-semantics-role="text-field" aria-label="Name and Title" style="position: absolute; top: 0px; left: 0px; width: 600px; height: 28px;"></textarea>
		            </flt-semantics>
		            <flt-semantics id="flt-semantic-node-147" aria-label="Important Reminder" role="text" style="position: absolute; width: 600px; height: 32px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 363); pointer-events: all; z-index: 6;"></flt-semantics>
		            <flt-semantics id="flt-semantic-node-148" aria-label="Message B." role="text" style="position: absolute; width: 600px; height: 105px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 412.43); pointer-events: all; z-index: 7;"></flt-semantics>
	            </flt-semantics-container>
	            <flt-semantics-scroll-overflow style="position: absolute; transform-origin: 0px 0px 0px; pointer-events: none; transform: translate(0px, 350px); width: 600px; height: 10px;"></fl-semantics-scroll-overflow>
            </flt-semantics>
        </template>
        </div>
    </body>
</html>
10

Yes, the Get Page Source is basically set of script tags for javascript since it’s a flutter web app that is one big javascript application compiled from dart…
The shadow DOM so far has been ok so long as you use the Browser Library and css selectors, until this one page where it seems to be getting items out of order…
I guess my best bet at this point is to look at the list of attributes going down the tree, until I find a match of just the attributes that exist. Luckily in this case there is a difference in the attribute list for the two elements it seems to be switching around…
It’s very strange…