Search code examples
javaseleniumwebdrivercuteeditor

Interact with a cute editor using webdriver


Does anyone know how I can interact with a cute editor using webdriver. I want to clear the text?

 <iframe id="CE_Editor1_ID_Frame" src="cuteeditor_files/template.asp"
 frameborder="0" class="CuteEditorFrame CuteEditorFrame"
 style="background-color: white; border: 1px solid rgb(221, 221, 221);
 height: 100%; width: 100%; display: block;"></iframe>

the below code won't work?

driver.switchTo().frame(0);
driver.switchTo().activeElement().clear();

Solution

  • I had a look at the Cute Editor's demo at http://cutesoft.net/example/general.aspx, now I understand why you used driver.switchTo().activeElement() instead of looking for textarea/input, because the iframe is the 'textarea', and you want to clear everything within the iframe.

    I assume yours is similar to the demo

    <iframe id="CE_Editor1_ID_Frame" src="cuteeditor_files/template.asp" frameborder="0" class="CuteEditorFrame CuteEditorFrame" style="background-color: white; border: 1px solid rgb(221, 221, 221); height: 100%; width: 100%; display: block;">
        <html>
            <head></head>
            <body>
                <table>the real stuff in the editor, you want to clear this, right?</table>
                <br>
                <br>
            </body>
        </html>
    </iframe>
    

    I don't think Selenium provides anything to delete nodes, but you can achieve this by JavascriptExecutor. Warning: untested code, only the logic's here. You need to debug a bit youself.

    // first try to avoid switching frames by index, unless you have no other ways.
    
    // if you have only one frame with class name CuteEditorFrame
    WebElement editorFrame = driver.findElement(By.cssSelector(".CuteEditorFrame"));
    driver.switchTo().frame(editorFrame);
    
    // if the id 'CE_Editor1_ID_Frame' not dynamic
    WebElement editorFrame = driver.findElement(By.cssSelector("#CE_Editor1_ID_Frame"));
    driver.switchTo().frame(editorFrame); // driver.switchTo().frame("CE_Editor1_ID_Frame");
    
    // then remove everything inside the iframe's body
    JavascriptExecutor js;
    if (driver instanceof JavascriptExecutor) {
        js = (JavascriptExecutor)driver;
    }
    WebElement editorBody = driver.findElement(By.cssSelector("body"));
    js.executeScript("arguments[0].innerHTML = ''", editorBody);
    
    // alternatively, using sendKeys directly is a better way
    WebElement body = driver.findElement(By.tagName("body")); // then you find the body
    body.sendKeys(Keys.CONTROL + "a"); // send 'ctrl+a' to select all
    body.SendKeys("Some text");