Using C# with selenium and cleditor

Question

I want to be able to set the body for a cleditor text field using selenium in c#, but this process seems to be very difficult. Can anyone explain it like i'm 4 years old?

Answer 1

The basic Selenium logic is you find the element first, then perform actions to it.

However, in this case, you have the following difficulties:

1. the editor is in an iframe
2. the iframe doesn't have id, name or even meaningful src
3. the editor is not an input or textarea, but the body itself.

How to navigate into iframes (Arran's link should be a good tutorial to look at)

Use Firefox+Firebug+Firepath to find iframes.

As you can see, there are four iframes in the page, you need one of the following methods to switch to the editor frame, not the other frames. (source)

IWebDriver Frame(int frameIndex); // works but not desirable, as you have 4 frames, index might be changing
IWebDriver Frame(string frameName); // not working, your editor doesn't have frameName or id.
IWebDriver Frame(IWebElement frameElement); // the way to go, find frame by xpath or css selector in your case

So we have:

IWebElement iframe = driver.FindElement(By.XPath("//iframe[@src='javascript:true;']"));
driver.SwitchTo().Frame(iframe);

How to send keys to the editor

Once your driver is inside the iframe, through Firebug, you can see that the editor is actually the body, not input or textarea.

So you need to find the body element, clear it and send keys. Note that Clear() may not work on body element, so you need either use IJavaScriptExecutor or send Control+a to select all first.

Switch out of the iframes

After some text has been sent to the editor, you can use driver.SwitchTo().DefaultContent(); to get out.

The completed code

using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;
using OpenQA.Selenium.Firefox;

namespace SOTest {
    [TestClass]
    public class TestCLEditor {
        [TestMethod]
        public void TestMethod1() {
            IWebDriver driver = new FirefoxDriver();
            driver.Navigate().GoToUrl("http://premiumsoftware.net/CLEditor");

            // find frames by src like 'javascript:true;' is really not a good idea, but works in this case
            IWebElement iframe = driver.FindElement(By.XPath("//iframe[@src='javascript:true;']"));
            driver.SwitchTo().Frame(iframe);

            IWebElement 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");

            // alternative way to send keys to body
            // IJavaScriptExecutor jsExecutor = driver as IJavaScriptExecutor;
            // jsExecutor.ExecuteScript("var body = document.getElementsByTagName('body')[0]; body.innerHTML = 'Some text';");

            driver.Quit();
        }
    }
}

Answer 2

In google chrome navigate to the page right click on the editable area of the text field. Click Inspect Element. When the html opens up, right click on the highlighted element and click Copy XPath.

In Selenium Web driver

IWebElement textField =      driver.FindElement(By.XPath("Paste what you got from CHROME"));
textField.SendKeys("Desired Text");