Need some help in passing data in a Grid

[dsingh1]

I have a requirement to pass data in a Grid.
This Field in the Grid remains uneditable until someone clicks on this field.
Unselectable state

Upon clicking on the Field it becomes editable,a new section appears in the DOM as below.

I tried giving below statements:
Click Field/Double Click-Field
Delay
Set Text.—Input Data.

During Execution, the click happens but the Set Text doesn’t works to enter the text data inside the Field.
Is there any other way to input text data inside this field?

[Monty_Bagati]

Could you try clearing the text before setting it (clear text )

[dsingh1]

Already tried.It still doesn’t take the input.

[Monty_Bagati]

use the below

WebUI.waitForPageLoad(20, FailureHandling.STOP_ON_FAILURE)

WebUI.waitForElementVisible(findTestObject(‘your object path here’), 10)

WebUI.setText(findTestObject(‘your path here’), ‘mytext’)

or

use sendkeys instead of settext

[kazurayam]

@dsingh1

During Execution, the click happens but the Set Text doesn’t works to enter the text data inside the Field.

Please show the locator defined in the Test Object for the “Field” into which you want to enter the text.

The locator could be a CSS selector or XPath expression. Either will do; but it must precisely point to the target <div> element. I have a doubt that your locator could be wrong.

[dsingh1]

Hi @Monty_Bagati Can you share more details on the sendKeys action.
Like sendkeys with data say 5000 to input into that field.
Maybe i can give it a try.

[Monty_Bagati]

WebUI.sendKeys(findTestObject('your object'), '5000')

[dsingh1]

This is the Locator that i am using:
XPath:
(//*[contains(@columnref,‘PolicyReferenceDisplay’)])[1]//preceding::div[1]/input

basically navigating back from the Policy Reference grid to the preceding div which might possibly have an input tag.

[grylion54]

I have to agree with @Monty_Bagati that you should put a wait statement before you try to put your “setText()” or “sendKeys” statement to ensure you have your <input> object in place especially since you have to “click” to open your cell for edit, although, I might go with “Clickable” rather than “Visible”, as that is what you are wanting.

WebUI.waitForPageLoad(10)

WebUI.waitForElementClickable(findTestObject('...'), 10)

WebUI.sendKeys(findTestObject('...'), '5000')

Additionally, you may just use the <columnref> of the “AllocationAmount” cell itself.

(//div[contains(@columnref,'AllocationAmount')]/input)[1]`

Click into the HTML, then hit CTRL + F and copy and paste your pathway into the Find textbox and see if you get ‘1 of 1’ to the right of the pathway.

[kazurayam]

@dsingh1

This is the Locator that i am using:
XPath:
(//*[contains(@columnref,‘PolicyReferenceDisplay’)])[1]//preceding::div[1]/input

Still I have a doubt about this XPath.

You attached a screenshot :

In the DOM portion in this screenshot, I find no <input> tag.

Rather, I suppose that the <div class="x-editor x-small-editor x-grid-editor ..."> element is the one you should point to. This <div> renders the input field overlayed on the grid cell. I suppose that JavaScript dynamically modifies the attributes of the <div> tag so that it looks and works as an input field where you can type characters into.

On the other hand, your XPath wants to point to an <input> element somewhere.
I think that this XPath is not valid.
You should correct it.

[dsingh1]

The thing here is that div tag opens only when someone clicks on the Field in the UI.
If i try to expand the new div tag it will close automatically and not show what’s inside plus in the UI also, the field will go back to the un-selectable mode.
I suspected there might be an input tag inside the new div tag which I am unable to see at the moment, that’s the reason why i am navigating to input tag in the locator.

[kazurayam]

@dsingh1

I suspected there might be an input tag inside the new div tag

I suspect that there would be no input tag. So your XPath would not work.

I suspect that the <div> tag behaves the “input field” like a <input> tag. JavaScript can change the attributes of a <div> tag to behave like an <input> tag. So your XPath should point the <div> tag which is placed over the grid cell.

How to point the <div> tag as an “input field”? ---- I am not sure. You need to find it out yourself by hands on experiments. ---- Somebody to help?

[dsingh1]

This is what i get:

[Monty_Bagati]

So the problem is not with the keywords , it is clearly an issue with the element locator xpath. you need to sort out the xpath or css etc first to be able to perform any actions on it.

Are you sure this element is not inside any iframe or shadow root ? Did you check this ?

Also did you try to increase the delay from 5 to may be 10 or 12 secs to check

[dsingh1]

Element is not inside any iFrame or shadow root.
It is inside a grid section which remains un-selectable in beginning but turns editable when clicked.
Tried different waits also, it doesn’t work.

[kazurayam]

@dsingh1

It is inside a grid section which remains un-selectable in beginning but turns editable when clicked.

Your script can send a click event by calling WebUI.click(TestObject) targeting a grid cell.
Then a new <div> will be inserted in the <td> element.
Then your script should be able to grap the newly inserted <div> element provided you can write a valid XPath expression.

The web recorder tool and spy tool would not help you at all. You need to write the XPath manually.

Are you familiar enough with XPath syntax and semantics? If not, study this:

XPath in Selenium: How to Find & Write? (Text, Contains, AND)

or this:

XPath - XML: Extensible Markup Language | MDN

[dsingh1]

Further on changing diff locators and retrying i got below errors so far:
With SendKeys:
org.openqa.selenium.ElementNotInteractableException: element not interactable
With SetText:
org.openqa.selenium.InvalidElementStateException: invalid element state

[Dan_Bown]

I suspect you have two test objects that need to be captured - one is the test object you see on screen and in the DOM. The second one is more difficult to see because the first object must be clicked to reveal the second one.
My suggestion: make the field editable (by clicking on the field) and then freeze the screen (pause all JavaScript). To do so - try this link: [How To] Use The Browser Developer Tools (F12 DevTools) - #3 by Ibus. You may then use the normal dev tools to select the element without the DOM dynamically changing and obscuring things

[dsingh1]

Thank you so much @Dan_Bown.
I was able to freeze the JavaScript and open the hidden elements in DOM.
Now i am able to pass on the data inside the text field using the properties of the input tag which was hidden inside the div tag.

I used Ctrl+Shift+P to freeze and then gave command focus–Emulate
Tada…my hidden elements opened up their heart for me

[Dan_Bown]

Glad to hear