Typing characters in rich text editor using Selenium IDE

问题

I'm currently setting up an automation testing in Salesforce application but I am having a problem of typing characters in rich text editor using Selenium IDE.

As I know that the rich text editor is wrapped in the iframe. In the HTML, I got the code like this:

<iframe id="j_id0:j_id4:j_id6:j_id115:j_id117:textAreaDelegate_Comments__c_frame"     
frameborder="0" allowtransparency="true" tabindex="0" src="" title="Rich text editor, 
j_id0:j_id4:j_id6:j_id115:j_id117:textAreaDelegate_Comments__c, press ALT 0 for help." 
style="width:100%;height:100%">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html class="CSS1Compat" lang="en" dir="ltr" style="background-color: transparent;">
<head>
<body id="j_id0:j_id4:j_id6:j_id115:j_id117:textAreaDelegate_Comments__c_rta_body"   
class="cke_show_borders" contenteditable="true" spellcheck="false" style="background-
color: transparent;">
</html>

</iframe>

My current steps are:

Command: selectFrame, Target: xpath=//*[contains (@id, 'j_id0:j_id4:j_id6:j_id115:j_id117:textAreaDelegate_Comments__c_frame')]
Command: click, Target: xpath=//*[contains (@id, 'j_id0:j_id4:j_id6:j_id115:j_id117:textAreaDelegate_Comments__c_rta_body')]
Command: focus, Target: xpath=//*[contains (@id, 'j_id0:j_id4:j_id6:j_id115:j_id117:textAreaDelegate_Comments__c_rta_body')]
Command: sendKeys, Target: xpath=//*[contains (@id, 'j_id0:j_id4:j_id6:j_id115:j_id117:textAreaDelegate_Comments__c_rta_body')], Value: Input Value in Rich Text Editor!!!

When I ran this test case, and I got the following error in step 4 - Unexpected Exception: Error: Cannot set the selection end. fileName -> chrome://selenium-ide/content/selenium-core/scripts/atoms.js, lineNumber -> 6118, columnNumber -> 6. I didn't know what did I do wrong and why I couldn't typing characters in rich text editor using Selenium IDE.

Thanks

回答1:

I came across the same issue this morning; not with an iframe but with a contenteditable <span>. My workaround was to turn on "WebDriver". It's an "experimental feature", apparently. There's a bit of a writeup about it at

http://blog.reallysimplethoughts.com/2013/02/18/webdriver-playback-in-selenium-ide-is-here/ http://blog.reallysimplethoughts.com/2011/07/08/selenium-ide-and-selenium-2-webdriver/

If all you wanted was quick regression testing, maybe that would have helped. But since this quesiton is two months old, "quick" isn't really in the cards anymore. You have my sympathies.

Your situation sounds similar, at least superficially, to the bug report at

http://code.google.com/p/selenium/issues/detail?id=6981

which is sort of bad news.

For the record, the way I got to my workaround: I stared at the script in the IDE and couldn't figure out what could be going wrong, then I exported the test to a Python script using WebDriver, hoping I'd see the error. I ran it and it just worked! So I dug a bit more, found WebDriver as an option in the IDE itself, and there you go. I can't say what's actually going wrong, but I followed the link down into atom.js, where I spent more time than I should have admiring the code.

回答2:

Here css=iframe[title*='textAreaDelegate_Comments'] body -- This CSS Selector can be used for editing.

回答3:

If you can select the contentEditable element, you can set its inner HTML.

In Selenium IDE, I have a helper test at the top of my test suites that contains helper commands to make things like this a little more convenient.

Command: storeEval, Target: Selenium.prototype.doInnerHTML=function(locator,text){var element=this.browserbot.findElement(locator);if(element===null)return null;element.innerHTML=text}

Any time you create a custom command in Selenium IDE, you also need to reload them, so the last step of my helper test is: