How can one write input to CKEDITOR in the same way a user?

Discussions and Tech Support related to automating the iMacros Browser or Internet Explorer from any scripting and programming language, such as VBS (WSH), VBA, VB, Perl, Delphi, C# or C++.
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
richard.beacroft
Posts: 1
Joined: Mon May 11, 2015 8:25 am

How can one write input to CKEDITOR in the same way a user?

Post by richard.beacroft » Mon May 11, 2015 9:23 am

Hi,

We are new to iMacro and trying to evaluate the product to see whether we can use it for testing.
So we have tried to create a fairly complex scenario to see how it handles it.

We have recorded and edited an iMacro to test the building of an email using our drag-and-drop editor flow.
This works OK except when we have to work with the CKEDITOR.

When you drag a "text element" onto the designer surface, an editor is displayed to the user. The editor we are using is CKEDITOR.

We have got our iMacro building the drag-and-drop message, but are unable to simulate the user writing text into the CKEDITOR control.
We have tried in Chrome browser tools using CKEDITOR.instances["instance name"] (and variations of), but always receive an undefined error.
So our next plan of attack was to have a JavaScript function called that passes Keypress commands to the textarea control.

We can see the Keydown event wired up to a handler in the ckeditor.js file
ckeditor-events.png
The DOM for the page that contains the CKEDITOR control follows the below structure:

Code: Select all

<html>
  <body>
    ...
    <iframe id="draggyDroppy" ...>
      <html>
        <body>
          <div ...>
            <div ...>
              <div>
                <!-- CKEDITOR toolbar items -->
              </div>
              <div ...>
                <iframe ... widgetid="scayt_0">
                  <html>
                    <body>
                      <!-- DOM elements generated by CKEDITOR for editable formattable text content -->
                    </body>
                  </html>
                </iframe>
              </div>
            </div>
          </div>
        </body>
      </html>
    </iframe>
    ..
  </body>
</html>
The following iMacro line will set the text content in the wysiwyg editor to "This is the message body", (but changes the browser URL to be that of the iFrame with widgetid="scayt_0").
Also the below line sets the text in the CKEDITOR, but other attached key handler events are not fired. We know this is expected behaviour.

Code: Select all

URL GOTO=javascript:document.getElementById('draggyDroppy').contentWindow.document.querySelectorAll('[widgetid=scayt_0]')[0].contentWindow.document.getElementsByTagName('span')[0].textContent='This<SP>is<SP>the<SP>message<SP>body';
So our question is, how can we simulate a user entering text and formatting it within the WYSIWYG editor so that we can then validate that

Code: Select all

document.getElementById('draggyDroppy').contentWindow.document.querySelectorAll('[widgetid=scayt_0]')[0].contentWindow.document
contains the generated HTML that we expect to see?
It is important that we add entries to the text editor in such a way that the keydown event and other associated key events fire.
[/b]

Below is a picture of what the editor looks like
dd.png
Kind Regards,
Rik
Post Reply