How to access Text from input field with no value attribute?

Libraries Browser
1

I have a Flutter App which I’m testing against… I am using the Browser Library because everything is in the Shadow DOM… The picture shows a Calendar field which I’d like to pull the date from:

Screenshot 2024-08-31 at 1.44.48 PM
Screenshot 2024-08-31 at 1.44.48 PM1158×330 10.7 KB

Here is the Dom for this section of the Application:

<body>
    <div id="host">
    <template shadowrootmode="open">
	    <flt-semantics id="flt-semantic-node-91" style="position: absolute; width: 518px; height: 51px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 584, 72); pointer-events: all; z-index: 1;"><input spellcheck="false" autocorrect="on" autocomplete="off" data-semantics-role="text-field" aria-label="Select a Date to Play" style="position: absolute; top: 0px; left: 0px; width: 518px; height: 51px;"></flt-semantics>
	    <flt-semantics id="flt-semantic-node-92" aria-label="# Hours" role="button" tabindex="0" style="position: absolute; width: 518px; height: 56px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 584, 143); pointer-events: all; z-index: 2;"></flt-semantics>
    </template>
    </div>
</body>

Nowhere in the above html does it provide the value of the Date. There’s an input field there, but I haven’t found a way to pull the current date value…
I’ve targeted the field with the below:
${attributes}= Get Attribute Names [aria-label=“Select a Date to Play”]
Which returns the following attributes:
16:48:28.438 INFO Attributes: [‘spellcheck’, ‘autocorrect’, ‘autocomplete’, ‘data-semantics-role’, ‘aria-label’, ‘style’]
No value attribute to query
Anyone have any suggestions?
I can click the field and then access the data value (since it’s in the title of the Calendar popup) and then cancel the click, but I’d like to do it without the click.
Thanks…

2

Hi Julian,

It looks like this is what you’re after

<input spellcheck="false" autocorrect="on" autocomplete="off" data-semantics-role="text-field" aria-label="Select a Date to Play" style="position: absolute; top: 0px; left: 0px; width: 518px; height: 51px;">

I’d try using the aria-label as the unique item in an xpath and getting the value attribute with Get Attribute something like this:

${DateToPlay}=    Get Attribute    //input[@aria-label="Select a Date to Play"]    value

Dave.

3

Hi Dave,
Yes that is what I’m after… I have to use the css selector since this is within the Shadow Root. I have tried the following…
${tee_date}= Get Attribute input[aria-label=“Select a Date to Play”] value
Which gives the following error:
AttributeError: Attribute ‘value’ not found!
So I’m not sure how to get the value from the input field…

4

Hi Julian,

Based on that error it seems your css selector is correct, sorry don’t use css selectors much I only recently learned about them, so the next thing I’d try is use that selector with Get Text

${DateToPlay}=    Get Text    //input[@aria-label="Select a Date to Play"]

Hopefully that will get you there.

Dave.

5

@damies13 XPath doesn’t pierce the shadow DOM. You have to use CSS or Get Element By or Get Element By Role.

1 Like
6

Sorry I meant to give that with the css selector Julian had like this:

${DateToPlay}=    Get Text     input[aria-label=“Select a Date to Play”]

Dave.

7

Hi Dave,
I ran the Get Text and all it returns is: Text: ‘’
It’s very odd where it must store the value, but it is a Flutter App so it does some odd things within the Web Canvas…
Julian

8

Hi Julian,

I have seen web apps that use java script actions on input fields when you change the field value it runs some validation on the input and then moves the data to another element in the page often a hidden div or input. Maybe flutter does something like that, I’m not familiar with flutter.

If you have access to the dev team maybe they can help you identify what’s happening and what you need to do to test this app?

Is the site on the internet? If you give a URL we can have a peek and try to figure it out.

Dave.

9

Hi Dave,
I couldn’t give access to the app, however I have built a working problem for two fields the Calendar and a List…
The list has I’m guessing the same issue where the currently selected one has a value but any unselected doesn’t which makes it difficult to select a specific value from the list.
I put a Click button on the app so you can have something to click in the test and get a result.
App is here:

Flutter is write once run anywhere code, and on the Web under the covers it does indeed convert the flutter/dart code down to JavaScript… So I suspect your supposition that there is a script action is likely correct, however I’ve not done much with JavaScript so don’t know if there’s a way to hook that somehow to get the values…
The JavaScript it compiles down to is here:
https://robotframeworktest-f7670.web.app/main.dart.js

Julian…

10

Hi Julian,

Here’s what I found:

When Items is selected and I run this javascript on the console I get these values:

image
image1513×617 40.8 KB

However when the date field is selected I get this:

image
image1517×702 53.2 KB

Using Evaluate JavaScript to call those java script calls “should work”

So the steps would be:

  • click the date field and set the date
  • Evaluate JavaScript document.querySelector('#flt-semantic-node-4 input').value to get the date selected
  • select an item from items
  • use js document.querySelector('#flt-semantic-node-5').ariaLabel to get value

It might not be the best solution but hopefully it’ll work, maybe someone who knows more about flutter can give you a better answer.

Dave.

1 Like