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++.

Moderators: Community Moderators, iMacros Moderators

Forum rules
Before asking a question or reporting an issue:
1. Please review the list of FAQ's.
2. Use the Google search box (at the top of each forum page) to see if a similar problem or question has already been addressed. This will search the entire contents of the forums as well as the iMacros Wiki.
3. We can respond much faster to your posts if you include the following information:

CLICK HERE FOR IMPORTANT INFORMATION TO INCLUDE IN YOUR POST

Answering your own posts (e.g. attempting to "bump" your topic) drops your topic from the list of unanswered threads, so it may actually receive less views.

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

by richard.beacroft on Mon May 11, 2015 2: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.


Below is a picture of what the editor looks like
dd.png


Kind Regards,
Rik
richard.beacroft
 
Posts: 1
Joined: Mon May 11, 2015 1:25 am

Return to Scripting and Command Line Interface

Who is online

Users browsing this forum: No registered users and 4 guests

-->