How to write to a CodeMirror textarea??? [solved]

Support for iMacros. The iMacros software is the unique solution for automating every activity inside a web browser, for data extraction and web testing.
Forum rules
Before asking a question or reporting an issue:
1. Please review the list of FAQ's.
2. Use the search box (at the top of each forum page) to see if a similar problem or question has already been addressed.
3. Try searching the iMacros Wiki - it contains the complete iMacros reference as well as plenty of samples and tutorials.
4. We can respond much faster to your posts if you include the following information: CLICK HERE FOR IMPORTANT INFORMATION TO INCLUDE IN YOUR POST
Post Reply
nico.rasters
Posts: 13
Joined: Fri May 15, 2020 11:57 am

How to write to a CodeMirror textarea??? [solved]

Post by nico.rasters » Wed May 27, 2020 3:20 pm

Code: Select all

iMacros VERSION BUILD=1005
Chrome Version 81.0.4044.92 (Official Build) (32-bit)
Firefox 76.0.1 (64-bit)
Internet Explorer Version 11.1425.17134.0; Update Versions: 11.0.185
Windows 10 Enterprise (10.0.17134 Build 17134)
Country or region: Netherlands
Windows display language: English (United Kingdom)
I have a Personal Edition license.
I am trying to search and replace text within a textarea. Or at least, I thought I was dealing with a textarea. But it turns out to be a CodeMirror (https://codemirror.net/index.html) editor. It has a textarea (sometimes two), but writing to that textarea does not do anything.
Used the developer tool to get a proper xpath to the various elements as they do not have IDs or even a name.

Code: Select all

TAG XPATH="//*[@id="textBlockId_4861"]/div[1]/div[3]/textarea" EXTRACT=TXT
PROMPT {{!EXTRACT}}
TAG XPATH="//*[@id="textBlockId_4861"]/div[1]/div[3]/div[1]" EXTRACT=TXT
PROMPT {{!EXTRACT}}
The textarea is completely blank. If I understand it correctly it will only be filled just before doing a post to the server. So my idea was to fill the textarea and do a post. But that doesn't work.
The div contains the text that I typed into the editor. But as far as I know I can't write text to a div.
There's https://stackoverflow.com/questions/415 ... itable-div but that's not very useful.
https://stackoverflow.com/questions/283 ... iv-imacros also says I should use EVENT (without any further explanation), so I'll be looking into that.
Maybe EVAL can manipulate the DOM?

Might just give up though. This script is taking me at least one day per line of code, so it will cost me less time to enter all the text manually.
Last edited by nico.rasters on Wed May 27, 2020 8:37 pm, edited 1 time in total.
chivracq
Posts: 9247
Joined: Sat Apr 13, 2013 1:07 pm
Location: Amsterdam (NL)

Re: How to write to a CodeMirror textarea???

Post by chivracq » Wed May 27, 2020 4:29 pm

nico.rasters wrote:
Wed May 27, 2020 3:20 pm

Code: Select all

iMacros VERSION BUILD=1005
Chrome Version 81.0.4044.92 (Official Build) (32-bit)
Firefox 76.0.1 (64-bit)
Internet Explorer Version 11.1425.17134.0; Update Versions: 11.0.185
Windows 10 Enterprise (10.0.17134 Build 17134)
Country or region: Netherlands
Windows display language: English (United Kingdom)
I have a Personal Edition license.
I am trying to search and replace text within a textarea. Or at least, I thought I was dealing with a textarea. But it turns out to be a CodeMirror (https://codemirror.net/index.html) editor. It has a textarea (sometimes two), but writing to that textarea does not do anything.
Used the developer tool to get a proper xpath to the various elements as they do not have IDs or even a name.

Code: Select all

TAG XPATH="//*[@id="textBlockId_4861"]/div[1]/div[3]/textarea" EXTRACT=TXT
PROMPT {{!EXTRACT}}
TAG XPATH="//*[@id="textBlockId_4861"]/div[1]/div[3]/div[1]" EXTRACT=TXT
PROMPT {{!EXTRACT}}
The textarea is completely blank. If I understand it correctly it will only be filled just before doing a post to the server. So my idea was to fill the textarea and do a post. But that doesn't work.
The div contains the text that I typed into the editor. But as far as I know I can't write text to a div.
There's https://stackoverflow.com/questions/415 ... itable-div but that's not very useful.
https://stackoverflow.com/questions/283 ... iv-imacros also says I should use EVENT (without any further explanation), so I'll be looking into that.
Maybe EVAL can manipulate the DOM?

Might just give up though. This script is taking me at least one day per line of code, so it will cost me less time to enter all the text manually.

Alright..., interesting...! :twisted:

Hum, OK, this 'CodeMirror' looks very similar to the also pain-in-the-ass 'tiny-mce' Editor used on many Sites, and for which indeed (mostly) only the 'EVENT' Mode works, + several Threads on the Forum...

Thanks to the Demo you provided, I was able to have a Look and do a bit of Testing, the 'TAG' Mode doesn't really work indeed, I quickly switched to the 'EVENT' Mode, for which not "everything" works "straightforward" either, many Actions don't get recorded, so I had to guess a bit and add them manually, but I got it to work, all 3 Sub-Scripts do work, the 'Ctrl^a' + 'Del'/'Backspace' also both work and is maybe not needed on your own Site...
For the 'Ctrl^v' (Paste from Clipboard) and the '{{!CIPBOARD}}', I had "my" Script copied to the Clipboard...:

Code: Select all

VERSION BUILD=8820413 RECORDER=FX
TAB T=1
URL GOTO=https://codemirror.net/index.html

'Remove existing Content:
EVENTS TYPE=KEYPRESS SELECTOR="#demo>FORM>DIV>DIV>TEXTAREA" CHARS="a" MODIFIERS="Ctrl"
'=> With 'Del' Key:
EVENT TYPE=KEYPRESS SELECTOR="#demo>FORM>DIV>DIV>TEXTAREA" KEY=46
'=> Or with 'Backspace' Key, they both work:
'EVENT TYPE=KEYPRESS SELECTOR="#demo>FORM>DIV>DIV>TEXTAREA" KEY=8
WAIT SECONDS=.5

'Paste with 'Ctrl^v' from Clipboard (Quick):
EVENTS TYPE=KEYPRESS SELECTOR="#demo>FORM>DIV>DIV>TEXTAREA" CHARS="v" MODIFIERS="Ctrl"
PAUSE

'Paste = type from Clipboard (Slow):
EVENTS TYPE=KEYPRESS SELECTOR="#demo>FORM>DIV>DIV>TEXTAREA" CHARS={{!CLIPBOARD}}
PAUSE

'Type some Custom Content: ('KEY=13' = 'Return')
EVENTS TYPE=KEYPRESS SELECTOR="#demo>FORM>DIV>DIV>TEXTAREA" CHARS="Line 1"
EVENT TYPE=KEYPRESS SELECTOR="#demo>FORM>DIV>DIV>TEXTAREA" KEY=13
EVENTS TYPE=KEYPRESS SELECTOR="#demo>FORM>DIV>DIV>TEXTAREA" CHARS="Line 2"
(Tested on iMacros for FF v8.8.2, PM v26.3.3, Win10_x64.)

>>>

And nope, you cannot manipulate the DOM from 'EVAL()' afaik, but you can from the 'URL GOTO=javascript' Syntax... :idea:
- (F)CI(M) = (Full) Config Info (Missing): iMacros + Browser + OS (+ all 3 Versions + 'Free'/'PE').
- I don't even read the Qt if that (required) Info is not mentioned...!
- Script & URL help a lot for more "educated" Help...
nico.rasters
Posts: 13
Joined: Fri May 15, 2020 11:57 am

Re: How to write to a CodeMirror textarea???

Post by nico.rasters » Wed May 27, 2020 7:29 pm

Thanks a lot. You are Most Awesome.
Had a brainwave while I was preparing dinner and just came back online to give it a final try, only to find you already posted the solution. First had to reinstall Firefox as I had forgotten to turn the automatic updates off :|
It worked for me on the demo website, but for TestVision I couldn't select the textarea (it's not always there?). But of course by now we know how to deal with that. Just click on the area where we're supposed to do the typing.
And I'm lazy so I used "body" as the selector.

Code: Select all

CLICK X=800 Y=270
' Select existing Content:
EVENTS TYPE=KEYPRESS SELECTOR="body" CHARS="a" MODIFIERS="Ctrl"
EVENTS TYPE=KEYPRESS SELECTOR="body" CHARS="c" MODIFIERS="Ctrl"
SET !VAR1 {{!CLIPBOARD}}
PROMPT {{!VAR1}}
EVENT TYPE=KEYPRESS SELECTOR="body" KEY=46
I used prompt to test whether I really managed to get the text. Not sure if that's how you're supposed to debug your code, but it works for me.
Now I just need to find and replace a certain text within VAR1.

Code: Select all

SET !VAR1 EVAL("\"{{!EXTRACT}}\".replace(/xxx/g, \"yyy");")
Looks like it uses a regular expression. Still have to find out which dialect. I probably won't need any fancy pattern as I will be using very specific placeholders. Those are being generated by a VBA script in Word, but that's a different story.

For the grand finale I should put VAR1 back on the clipboard and paste it into the textarea.
I wonder if I can clear the clipboard first...
SET !EXTRACT NULL works, so maybe SET !CLIPBOARD NULL?
No, that just writes the text "NULL" to the clipboard.

How do I tag this question as solved?
chivracq
Posts: 9247
Joined: Sat Apr 13, 2013 1:07 pm
Location: Amsterdam (NL)

Re: How to write to a CodeMirror textarea???

Post by chivracq » Wed May 27, 2020 8:30 pm

nico.rasters wrote:
Wed May 27, 2020 7:29 pm
Thanks a lot. You are Most Awesome.
Had a brainwave while I was preparing dinner and just came back online to give it a final try, only to find you already posted the solution. First had to reinstall Firefox as I had forgotten to turn the automatic updates off :|
It worked for me on the demo website, but for TestVision I couldn't select the textarea (it's not always there?). But of course by now we know how to deal with that. Just click on the area where we're supposed to do the typing.
And I'm lazy so I used "body" as the selector.

Code: Select all

CLICK X=800 Y=270
' Select existing Content:
EVENTS TYPE=KEYPRESS SELECTOR="body" CHARS="a" MODIFIERS="Ctrl"
EVENTS TYPE=KEYPRESS SELECTOR="body" CHARS="c" MODIFIERS="Ctrl"
SET !VAR1 {{!CLIPBOARD}}
PROMPT {{!VAR1}}
EVENT TYPE=KEYPRESS SELECTOR="body" KEY=46
I used prompt to test whether I really managed to get the text. Not sure if that's how you're supposed to debug your code, but it works for me.
Now I just need to find and replace a certain text within VAR1.

Code: Select all

SET !VAR1 EVAL("\"{{!EXTRACT}}\".replace(/xxx/g, \"yyy");")
Looks like it uses a regular expression. Still have to find out which dialect. I probably won't need any fancy pattern as I will be using very specific placeholders. Those are being generated by a VBA script in Word, but that's a different story.

For the grand finale I should put VAR1 back on the clipboard and paste it into the textarea.
I wonder if I can clear the clipboard first...
SET !EXTRACT NULL works, so maybe SET !CLIPBOARD NULL?
No, that just writes the text "NULL" to the clipboard.

How do I tag this question as solved?

OK, good-good...!, and "Most Awesome", ah-ah...!, yeah-yeah...! :oops:

>>>

Yep, 'PROMPT' is the Way to follow your Vars (especially with 'EVAL()') and to debug your Scripts in pure '.iim'... 8)

>>>

Concerning your "SET !CLIPBOARD NULL", have a look at the following Thread/Post where I had already done the same Discovery/Testing about hum, 4 years ago already...!, => the "The little Bug I discovered..." Section, which was actually linking to also another Thread (with a "... this Thread..." Link), but it looks like that Thread has been deleted since..., hum, strange, that was an "interesting" Thread... :(

But anyway, that Post already contains some Testing about resetting the Clipboard, Empty String doesn't work either, then I would say, just set it to 1 Space Char..., or what I do in a few of my Scripts, reset the Clipboard to its "original" Content from before running the Script, that's sometimes handy, if you are using your Computer doing "other things" and the Script is running "in the Background", and you forget/forgot that your Script is (also) using the OS Clipboard and you end up losing what you were doing "manually"...

The Script posted in that Post from 4 years ago actually contains this Mechanism, => the 'Clipboard_Temp' Var... 8)
Oh...!, and I also "extensively" use the 'PROMPT' in that Script to follow all Vars, also interesting for you maybe... :idea:

>>>

For your Global 'replace()', yep, search the Forum a bit, you'll find many Threads about that, I prefer to use some other Syntax myself, that I find much easier... Or open a New Thread if you don't come out by yourself...

>>>

Tagging a Thread as Solved can simply be done by adding "[Solved]" to the Thread Title, such Threads are indeed "more interesting' for other Users searching the Forum... That's very neat... 8)
- (F)CI(M) = (Full) Config Info (Missing): iMacros + Browser + OS (+ all 3 Versions + 'Free'/'PE').
- I don't even read the Qt if that (required) Info is not mentioned...!
- Script & URL help a lot for more "educated" Help...
nico.rasters
Posts: 13
Joined: Fri May 15, 2020 11:57 am

Re: How to write to a CodeMirror textarea??? [solved]

Post by nico.rasters » Fri May 29, 2020 2:20 pm

Quick follow-up.

An error message such as "value.trim is not a function, line: 23 (Error code: -1001)" may pop up.
I did not understand it at first, but it happens when you forget to add "BUTTON=0" to an EVENT TYPE=CLICK.

Code: Select all

EVENT TYPE=CLICK XPATH="/html/body/div[2]/div/div[1]/div/p" BUTTON=0
And for some reason my double forward slash XPATH references did not work. Luckily the full XPATH links (starting from the root node with one forward slash) do.
See also https://www.w3schools.com/xml/xpath_syntax.asp
nico.rasters
Posts: 13
Joined: Fri May 15, 2020 11:57 am

Re: How to write to a CodeMirror textarea??? [solved]

Post by nico.rasters » Sat May 30, 2020 11:28 am

The final solution:

Code: Select all

' Initialize screen (in TestVision the focus is by default on the Stem item, but it's easier if we can assume that the focus is always off)
CLICK X=20 Y=20
' Click on the stem editor (I used the web developer in Chrome to get the full xpath reference)
EVENT TYPE=CLICK XPATH="/html/body/div[2]/div[3]/div[2]/div[1]/div[2]/div/div[1]" BUTTON=0
' Click on the "Code View" button (because I need the HTML code)
EVENT TYPE=CLICK XPATH="/html/body/div[2]/div[3]/div[2]/div[1]/div[2]/div/div[1]/div[1]/button[2]/span" BUTTON=0
' Note that right now the cursor is located in the right place, but only if you don't remove it by doing a pause or prompt!
' Issue a select all, copy command
EVENTS TYPE=KEYPRESS SELECTOR="body" CHARS="a" MODIFIERS="Ctrl"
EVENTS TYPE=KEYPRESS SELECTOR="body" CHARS="c" MODIFIERS="Ctrl"
' Replace some text and put the result on the clipboard for later use
SET !VAR1 EVAL("var str=\"{{!CLIPBOARD}}\"; str.replace(\"[FORMULA_001]\", \"Lorem ipsum\");")
SET !CLIPBOARD {{!VAR1}}
' Click on the "Code View" button again to go back to the editor view
EVENT TYPE=CLICK XPATH="/html/body/div[2]/div[3]/div[2]/div[1]/div[2]/div/div[1]/div[1]/button[2]/span" BUTTON=0
' Now we can remove the text (this was NOT possible in the code view!)
EVENTS TYPE=KEYPRESS SELECTOR="body" CHARS="a" MODIFIERS="Ctrl"
EVENT TYPE=KEYPRESS SELECTOR="body" KEY=46
' Click on the "Code View" button once more
EVENT TYPE=CLICK XPATH="/html/body/div[2]/div[3]/div[2]/div[1]/div[2]/div/div[1]/div[1]/button[2]/span" BUTTON=0
' Paste the content of the clipboard (remember the cursor needs to be inside the editor, so don't pause or prompt)
EVENTS TYPE=KEYPRESS SELECTOR="body" CHARS="a" MODIFIERS="Ctrl"
EVENTS TYPE=KEYPRESS SELECTOR="body" CHARS="v" MODIFIERS="Ctrl"
' Return to initial state
CLICK X=20 Y=20
My main problem was how to get the cursor inside the CodeMirror editor.
A CLICK with x and y coordinates works, but the fields that I have to click in are not always in the same place because the length of the text may vary and the editor expands accordingly.
So I figured I needed to retrieve the x and y coordinates of the editor elements. There's javascript for that, but EVAL can't access the document. A solution for that would be to use URL GOTO, but how to get the value back into an iMacros variable? Someone hinted at using console.log for this. See https://stackoverflow.com/questions/517 ... os-browser
I would also need to find an element through an XPATH reference. See https://stackoverflow.com/questions/105 ... -webdriver
I couldn't get this to work, but luckily I realized that the cursor was already in the right place but I was removing it by using PAUSE and PROMPT :cry:

If only CodeMirror simply used a textarea in the code view...
All the web applications I've been using iMacros scripts for lately look very high-tech (to a newbie), but the user experience is awful and they're difficult to automate. So let me formulate the "iMacros Law" as "the quality of the user experience is inversely related to the complexity of the script."
Post Reply