Selenium IDE and TinyMCE 35

This entry was posted in Selenium and tagged selenium and tinymce Selenium IDE tinymce on by

I created a test case for creating a support ticket.  Our support ticket interface has multiple tinymce editors present for the various ticket description and action update fields.  I had a difficult time find a solution that would make Selenium IDE type text into one of these tinymce editors, but I found one that worked using the dom.  Use command “type” and target should be “dom=document.getElementById(‘id_of_the_tinymce_frame’).contentDocument.body” and the value can be any text you want entered into the tinymce editor.

Note – if you copy and paste the dom code above, you may have to redo the single quotes around the id after you paste it somewhere else.  I did this and the character changed and threw me off for a bit.

Leave a comment

Your email address will not be published. Required fields are marked *

35 thoughts on “Selenium IDE and TinyMCE”

  • Reply ↓
    Brandon Thomson

    By default “id_of_the_tinymce_frame” appears to be the “name” of the textarea, followed by an underscore, followed by the three letters “ifr”. Posting here since it wasn’t obvious to me. Thanks for the tip though, it works.

  • Reply ↓
    Robert Luong

    contentDocument doesn’t work in IE.

    Those of you who are testing in IE should use:

    dom=document.getElementById(’id_of_the_tinymce_frame’).contentWindow.document.body

  • Reply ↓
    Adam Ashley

    For those that actually want to use selenium for cross browser testing (you know what it was designed for), use the following sets of commands, works in FF3, IE6 and IE7 with the latest selenium and tinymce

    selectFrame(‘id_of_the_tinymce_frame’)
    // TinyMCE puts an ID of ‘tinymce’ on the body tag of the frame.
    // We want to send our type there for tinymce to pick it up and handle it.
    focus(‘tinymce’)
    type(‘tinymce’, ‘The text you want to input’)
    selectFrame(‘relative=parent’)

  • Reply ↓
    Ola

    Hi!

    I just tried this code:
    selectFrame(’id_of_the_tinymce_frame’)
    // TinyMCE puts an ID of ‘tinymce’ on the body tag of the frame.
    // We want to send our type there for tinymce to pick it up and handle it.
    focus(’tinymce’)
    type(’tinymce’, ‘The text you want to input’)
    selectFrame(’relative=parent’)
    It worked fine until you had 2 or more TinyMCEs on the same page.

    This code worked with multiple TinyMCEs:
    “dom=document.getElementById(’id_of_the_tinymce_frame’).contentDocument.body”

    Thanks a lot!

    • Reply ↓
      Paul Semeraro

      I don’t know if this is the best solution for the issue, but it worked for me.

      In my case, the test run speed was a little too fast. So, I added a ‘wait’ for an element before the script set focus to the next mce. The solution worked.
      I chose the textarea element id that was being managed by mce. (So, if my iframe ID was ‘test_ifr’ i looked up the corresponding textarea that was named ‘test’.

      Examples:

      waitForElementPresent ‘text_area_name’
      selectFrame ‘tiny_mce_iframe_id’
      focus tinymce
      type tinymce, TEST Text
      selectFrame relative=parent

      waitForElementPresent test
      selectFrame test_ifr
      focus tinymce
      type tinymce, TEST Text
      selectFrame relative=parent

      NOTE: For my code, I placed the test text inside opening and closing ‘p’ tags. If you don’t do that, you will overwrite the ‘p’ tags that are normally present within the mce iframe. My application under test actually looked for those, so I had to keep them in.

    • Reply ↓
      Tom Jackson

      Here’s a snippet of code that worked for me in IDE. I’ve got a list of the names of the instances of TinyMCE in a variable called ${frame}, so I’m looping through them and passing data from the ${date} variable I’ve created elsewhere. If you want to hard code the location of the TinyMCE, replace my xpath locator with the location, feel free to do so.

      selectWindow
      null

      selectFrame
      xpath=//*[contains (@id, ‘${frame}’)]

      click
      xpath=//*[contains (@id, ‘tinymce’)]

      focus
      xpath=//*[contains (@id, ‘tinymce’)]

      sendKeys
      xpath=//*[contains (@id, ‘tinymce’)]
      ${date} ${frame}

  • Reply ↓
    G Kamp

    Thanks guys, dom=document.getElementById(’id_of_the_tinymce_frame’).contentWindow.document.body worked for me, both in FF and IE.

    My version of tinymce (2.1.3) had the following id: ‘mce_editor_0’.

    • Reply ↓
      nexus

      im using selenium IDE 1.7.2
      With in the site im working on, i have 2 tinymce
      i tried to use dom exampl

      Command: type

      target: dom=document.getElementById(‘mce_edit_requirements_ifr’).contentDocument.body

      value: MyText or MyText

      When I click find for target it works
      no error
      but it does not write the text or value
      can any help…
      thanks

  • Reply ↓
    Paul Semeraro

    Many many thanks to Nick and Adam’s solutions! Adam’s (cross browser) solution worked for me.

    I was specifically looking for a solution that could be implemented within the IDE and this was it!

    I agree with torch – please keep this site up. It took FOREVER to find the best solution for this issue. THANK YOU for keeping it posted.

    Cheers

  • Reply ↓
    Rory Slegtenhorst

    Since TinyMCE 3.4.3.2, none of these solutions seem to work for me 🙁
    And the weird thing is, that the resulting HTML code looks exactly the same…

  • Reply ↓
    Boni

    Hi,

    We recently upgraded to tinyMCE 3.4.7. Before the update, we could access the “id_of_the_tinymce_frame” with the following code:
    “dom=document.getElementById(‘id_of_the_tinymce_frame_ifr’).contentDocument.body”
    After the upgrade, the code no longer works. When it’s executed, it appears to work but nothing is written to the body of the textarea. Has anybody encountered this problem yet? I wonder if tinyMCE 3.4.7 changed the default for “id_of_the_tinymce_frame”. Will appreciate any tip to resolve this problem as it is urgent.
    Thanks.
    Boni

  • Reply ↓
    Peter

    Hi I had the same issue. I fixed it like this:

    runScript
    tinyMCE.get(“text”).setContent(‘Selenium test page text’)

    where “text” is id of tinymce textarea

  • Reply ↓
    Rak

    runScript
    tinyMCE.get(“text”).setContent(‘Selenium test page text’)

    This is the only thing that worked for me, others didint.
    Thanks so much

  • Reply ↓
    tatrabanka

    hi guys,
    do you have any working solution for IDE?
    we have v3.4.5 of tinyMCE on server and i’m using FF14 and IDE1.9.0.
    i cannot get it working, tried all solutions i found, including these ones here.
    IDE can find bottom buttons or whole area of the editor.
    no errors but no text entered in it’s iframe either.
    thanks ever so much!!!

    • Reply ↓
      Terry Maples

      I have tried all of the suggestions in this post and still can’t get it to work.
      runScript tinymce.activeEditor.setContent(‘my text’) will populate is I execute one command line at a time by clicking on the line. However, if I try to just run it, it doesn’t populate the field and errors out at the submit clickAndWait statement. It’s as if I can’t find the cursor in the text field and then stalls because it doesn’t see the submit button?

      setCursorPosition
      xpath=html/body/table[2]/tbody/tr[1]/td[2]/div/form/table/tbody/tr[1]/td[2]/div/input

      click
      name=Contractor_Qualifications

      selectFrame
      id=Contractor_Qualifications_ifr

      focus
      tinymce

      runScript
      tinymce.activeEditor.setContent(‘QA Contractor Qualifications’)

      clickAndWait
      name=submit

      clickAndWait
      link=Back to List of Sections Page

      • Reply ↓
        Scott Feger

        Did you ever figure this out? This is the issue I’m having right now. If I run the full script, it does not work. If I step through it the text is written to the field.

  • Reply ↓
    John Joyce

    For Safari 9 I had to use the textContent property of the body.

    driver.execute_script(‘window.document.getElementsByTagName(“iframe”)[0].contentDocument.body.textContent += “some text “;’)

  • Reply ↓
    Jerry Hadesman

    I’m trying to have Selenium write to an field in ServiceNow using tinymce. We have the latest version of tinymce, using Firefox version 42.0 and Selenium version IDE 2.9.0
    Here is what I am trying to do
    Command: selectFrame target: id=kb_knowledge.u_draft_text_ifr
    Target: document.getElementById(“tinymce”).innerHTML=”I am typing into the Draft Section, I hope”;

    Currently I write nothing in the text area