How to enter a value on yaml based UI using Karate UI Automation

Question

Here is the ui app screenshot- its a yaml page

The UI is a code editor, used to enter or update yaml/json content. I am trying to update 'value1' using the karate UI syntax's and it didnt seem to work, below are the trials

* string element = "//span[text()='Parent']/following::span[text='Child1']/following::span[text='value1']

#Syntax Approaches:

   * script(element, "_.innerHTML='100'")
   * script(element, "_.innerHTML='value1'").input('100')
   And waitFor(element).input('100')
   * input(element, '100')
   When value(element, '100')  
   * locate(element).input('100')

script(element, "_.innerHTML='100'") - worked, but the value '100' however was not persisted till saving it.

sample app - https://onlineyamltools.com/edit-yaml

sample yaml -
**

parent:
    child:
        key1: value1
        key2: value2
    child2:
        key3: value3
        key4: value4

**

element locator: //span[text()='parent']/following::span[contains(text(),'child')]/following::span[contains(text(),'value1')]

All I need is to be able to update the 'value1' to '100' and save it. Thanks

impossible to help without seeing the actual UI (HTML and JS) my suggestion is you do a search for other answers and figure this out yourself: https://stackoverflow.com/search?q=%5Bkarate%5D+tree+walking — Peter Thomas, Dec 09 '22 at 03:00
I have tried * rightOf(elementz).find('{}avlue1').clear().input('100') and it didn't work. Here is a sample yaml app - https://onlineyamltools.com/edit-yaml & the yaml content ------- parent: child: key1: value1 key2: value2 child2: key3: value3 key4: value4 ------------ All I need is to be able to update one of the 'value1' and save it. Thanks — J100, Dec 09 '22 at 04:00
@PeterThomas, I have added a sample app and more details to my query above, please suggest if I can try any other approaches, thank you. — J100, Dec 09 '22 at 04:10
sorry that looks really troublesome. that is some of the hardest HTML I have seen, no surprise there - because it is a complex rich-text editor. I can only give one hint, this will get you an array of one `Element` (refer docs) that has the line `key1: value` in it: `* def temp = locateAll('.CodeMirror-line', x => x.text.contains('value1'))` - the rest is up to you. if someone is asking you to do this, please gently explain that automating this is a waste of time — Peter Thomas, Dec 09 '22 at 05:19
@PeterThomas I was already able to locate the element, however when trying to update using `* script(element, "_.innerHTML='100'")` - The value '100' gets written/updated on the locator but not persisting till save action. Is there a better way to use the script function to update the `_.innerHTML` ? — J100, Dec 09 '22 at 17:57
given what kind of UI I saw, I can confidently say - I have NO idea, sorry. there is most definitely a lot of weird javascript involved, not just HTML. you may need to look at firing some events: https://stackoverflow.com/a/60800181/143475 — Peter Thomas, Dec 09 '22 at 18:01
I was able to achieve this in selenium using Actions class, here is the code `Actions builder = new Actions(driver); WebElement TimeVal = driver.findElement(By.xpath("//span[text()='value1'][1]")); builder.click(TimeVal).perform(); builder.moveToElement(TimeVal).clickAndHold().sendKeys(Keys.CLEAR).sendKeys("100").perform();` - can we do the similar implementation in karate? @PeterThomas — J100, Dec 23 '22 at 22:51
we can, but it needs research. right now I personally don't have the time — Peter Thomas, Dec 24 '22 at 05:03
Thanks @PeterThomas ! I was able to accomplish using this: `* mouse(element).click() * input(element, [Key.DELETE, Key.DELETE, Key.BACK_SPACE, Key.BACK_SPACE, '100'])` I don't have to switch to a new framework now. Appreciate your inputs :) — J100, Jan 04 '23 at 18:06
that's great. I recommend you add an answer to your own question (yes this is allowed on stack overflow) with details that will help others in future. and I will certainly point others to your findings. thanks ! — Peter Thomas, Jan 04 '23 at 18:09

Ollie · Answer 1 · 2022-12-08T23:00:19.143

Use the script function to set the innerHTML property of the element to the new value:

* script(element, "_.innerHTML='100'")

Use the input function to set the value of the element to the new value:

* input(element, '100')

Use the value function to set the value of the element to the new value:

* value(element, '100')

It's not clear from your question whether the value of the element is being updated in the web page, or whether the changes are being lost when you save the page.

If the changes are being lost when you save the page, it's possible that there is some JavaScript code on the page that is resetting the value of the element when the page is saved. In that case, you may need to use a different approach to update the value of the element.

score 0 · Accepted Answer · answered Jan 05 '23 at 21:08

The below karate code/syntax works for all the UI's having code editors as the one posted in the original question:

 * mouse(element).click()    
 * input(element, [Key.DELETE, Key.DELETE, Key.BACK_SPACE, Key.BACK_SPACE, '100'])

The Keyboard events can go in the array and may differ based on the scenario.

How to enter a value on yaml based UI using Karate UI Automation

2 Answers2