editContent issue with tinyMCE

Ui.Vision General Discussion
1

Hi,

I have a working script with Katalon Recorder to set text in a specific tinyMCE element (they also have an ‘editContent’ command).
I back ported the same commands to UI.Vision RPA, it seems to work because i can see the text in the element but it looks like an event is not triggered and the application does not see any change and does not save the element content. There is no “iframe” in this tinyMCE element
I tried with other multiple combination without success : (X)Click/(X)Type, (X)Click/Sendkeys (and more tricky ones).
The form is not public (but we own the cloud site, i may be able to create you an account if needed), I did screencasts and a DOM screenshot.
Could you give me some hints on how to make it work or if you need more information.

Katalon Recorder :

C8Oforms_KatalonRecorder_tinyMCE
C8Oforms_KatalonRecorder_tinyMCE1912×1005 1.25 MB

UI.Vision RPA :

C8Oforms_UIVision_tinyMCE
C8Oforms_UIVision_tinyMCE1912×1005 1.51 MB

Thank you.

2

I forgot the DOM screenshot :

image
image1255×236 30.7 KB

3

It is difficult to see what goes wrong just based on the screenshots. But if Katalon works, then we should be able to solve it quickly. => If you can create a test account for us, that would be helpful. You can email the credentials to team AT ui.vision - just mention this forum post.

I did a quick test on the public tinyMCE demo, and all works fine there:

{
  "Name": "tinymce",
  "CreationDate": "2021-4-20",
  "Commands": [
    {
      "Command": "open",
      "Target": "https://www.tiny.cloud/docs/demo/basic-example/",
      "Value": ""
    },
    {
      "Command": "selectFrame",
      "Target": "id=basic-example_ifr",
      "Value": ""
    },
    {
      "Command": "editContent",
      "Target": "id=tinymce",
      "Value": "<p style=\"text-align: center;\" data-mce-style=\"text-align: center;\">it works!<img title=\"TinyMCE Logo\" src=\"//www.tiny.cloud/images/glyph-tinymce@2x.png\" alt=\"TinyMCE Logo\" width=\"110\" height=\"97\" data-mce-src=\"../../../images/glyph-tinymce@2x.png\"></p><h2 style=\"text-align: center;\" data-mce-style=\"text-align: center;\">Welcome to the TinyMCE editor demo!</h2><h2>Got questions or need help?</h2><ul><li>Our <a href=\"https://www.tiny.cloud/docs/\" data-mce-href=\"../../\">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Try the <a href=\"https://stackoverflow.com/questions/tagged/tinymce\" target=\"_blank\" rel=\"noopener\" data-mce-href=\"https://stackoverflow.com/questions/tagged/tinymce\"><code>tinymce</code> tag at Stack Overflow</a>.</li><li>We also offer enterprise grade support as part of <a href=\"https://www.tiny.cloud/pricing\" data-mce-href=\"../../../pricing\">TinyMCE premium plans</a>.</li></ul><h2>A simple table to play with</h2><table style=\"border-collapse: collapse; width: 100%;\" border=\"1\" data-mce-style=\"border-collapse: collapse; width: 100%;\"><thead><tr><th>Product</th><th>Cost</th><th>Really?</th></tr></thead><tbody><tr><td>TinyMCE</td><td>Free</td><td>YES!</td></tr><tr><td>Plupload</td><td>Free</td><td>YES!</td></tr></tbody></table><h2>Found a bug?</h2><p>If you think you have found a bug please create an issue on the <a href=\"https://github.com/tinymce/tinymce/issues\" data-mce-href=\"https://github.com/tinymce/tinymce/issues\">GitHub repo</a> to report it to the developers.</p><h2>Finally ...</h2><p>Don't forget to check out our other product <a href=\"http://www.plupload.com\" target=\"_blank\" rel=\"noopener\" data-mce-href=\"http://www.plupload.com\">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p><p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.</p>"
    }
  ]
}
4

Hello,

Thank you for your answer, I will mail you soon an account to our forms builder site.
I tested your macro script and confirm it just works fine, the HTML is written in the editor but the demo site does not permit to see the HTML/DOM changes even if you click in the HTML tab (it displays the old HTML values that seems to be hardcoded and can not be edited).

Regards.

5

Hi,

I have sent you mail (I assumed it was ui DOT vision DOT com) with test account, steps to reproduce and another mail with the zip backup of macros I use.
Thank you very much.

6

We did not receive anything? The email is image

7

My bad, sent to wrong mail address (.com).
I just re-sent the e-mail.

Thanks

8

Thanks for the login! => I tested it and for me all works after I changed the recorded XPath to a better XPath (I used the CLICK Xpath options to find a good one).

and does not save the element content.

To test the saving, I closed the page and reopened it, and the text is still there.

Can you confirm this, or maybe I did not test correctly?

My test:

9

With XClickRelative and XType it works as well:

10

Hello,

Thanks for your work.
It took me time to understand why it kept not working for me.
It works for you because in your demo, you are manually clicking elsewhere (Cc tab) and an onBlur event is triggered. This is this event that triggers the save of data entered in the editor, in our application.
It is not working for me because in my script the next command is a ‘click’ command that clicks on the Cc tab and it does not trigger the onBlur event and data is not saved. I also tried with an XClick command but does not fire event too.
Is there a way to fire the onBlur event on a target element ?

Thx

11

This is an interesting issue. I was surprised that using XClick does still not trigger the onBlur event. But if you add the tab key ${KEY_TAB} after entering the text, this triggers the onBlur event :slight_smile:

PS: Can you please keep the login open for another 1-2 weeks? Then we can debug this further and make editContent itself trigger the onBlur event.

Macro code:

{
  "Name": "tinymce2",
  "CreationDate": "2021-4-28",
  "Commands": [
    {
      "Command": "open",
      "Target": "https://confirmed.convertigo.net/convertigo/projects/C8Oforms/DisplayObjects/mobile/index.html#/editor/1618995179805",
      "Value": ""
    },
    {
      "Command": "XClick",
      "Target": "xpath=//*[@id=\"headerPa\"]/div/div[2]",
      "Value": ""
    },
    {
      "Command": "XClick",
      "Target": "xpath=//*[@id=\"headerPa\"]/div/div[2]",
      "Value": ""
    },
    {
      "Command": "XClick",
      "Target": "xpath=//ion-label/div",
      "Value": ""
    },
    {
      "Command": "XClick",
      "Target": "xpath=//editor/div",
      "Value": ""
    },
    {
      "Command": "comment",
      "Target": "First Tab",
      "Value": ""
    },
    {
      "Command": "comment",
      "Target": "editContent // xpath=//editor/div",
      "Value": "111"
    },
    {
      "Command": "XType",
      "Target": "12345",
      "Value": ""
    },
    {
      "Command": "comment",
      "Target": "Send a tab to trigger BLUR event",
      "Value": ""
    },
    {
      "Command": "XType",
      "Target": "${KEY_TAB}",
      "Value": ""
    },
    {
      "Command": "comment",
      "Target": "Second Tab",
      "Value": ""
    },
    {
      "Command": "click",
      "Target": "xpath=//div[2]/span/p",
      "Value": ""
    },
    {
      "Command": "comment",
      "Target": "editContent // xpath=//editor/div",
      "Value": "test"
    },
    {
      "Command": "XClick",
      "Target": "xpath=//editor/div",
      "Value": ""
    },
    {
      "Command": "XType",
      "Target": "Hello World!",
      "Value": ""
    },
    {
      "Command": "XType",
      "Target": "${KEY_TAB}",
      "Value": ""
    },
    {
      "Command": "type",
      "Target": "xpath=//ion-toolbar/div[2]/ion-item/div/div/ion-input/input",
      "Value": "Now it is saved!"
    },
    {
      "Command": "click",
      "Target": "xpath=//*[@id=\"headerPa\"]/div/div",
      "Value": ""
    }
  ]
}
12

Thanks for the tip, it works like a charm!
Your account is still active for you, if you need to make more tests.

1 Like
13

This change has been done meanwhile.