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

Answer 1

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.

Answer 2

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.