Selenium WebDriver: can't find element inside iframe using TinyMCE editor
Perhaps my question is similar to this Selenium WebDriver cannot find the element inside the iframe and throws a NoSuchElementException , however I still cannot find the element I require .
The element itself looks like:
body id="tinymce" class="mceContentBody" contenteditable="true" onload="window.parent.tinyMCE.get('compose_295_composeEditor').onLoad.dispatch();" dir="ltr" style="overflow: auto;">
iframe
containing this element:
body id="tinymce" class="mceContentBody" contenteditable="true" onload="window.parent.tinyMCE.get('compose_295_composeEditor').onLoad.dispatch();" dir="ltr" style="overflow: auto;">
I tried
driver.switchTo().frame(10);
driver.switchTo().frame(driver.findElement(By.id("tinymce")));
driver.findElement(By.id("tinymce")).clear();
driver.findElement(By.id("tinymce")).sendKeys("Privet!"); // clear mail text body
driver.switchTo().defaultContent();
but got error:
Unable to locate frame: 10
Tried also something like
driver.switchTo().frame(driver.findElement(By.id("tinymce")));
as described in other answers, but got NoSuchElement error.
Element HTML
around element:
<div class="b-compose__editor ru_RU">
<div id="compose_295_toolbar_external" class="compose__editor_toolbar defaultSkin">
<div class="js-removeDraftContainer infobar infobar_notice infobar_draft" style="display: none;">
<div id="compose_295_composeFrame" class="b-compose__editor__frame">
<div class="compose__editor__frame_shadow"></div>
<table class="w100" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="vti w100">
<div id="compose_295_composeEditorFrame" class="composeEditorFrame" style="height: 200px;">
<table id="compose_295_shell__text" class="mlruTmpId0" cellspacing="0" cellpadding="0" bgcolor="" background="" style="width: 100%">
<tbody>
<tr class="nojsdn textModeHide">
<tr>
<td class="cell w100">
<table id="compose_295_middleTable" class="w100" cellspacing="0" cellpadding="0">
<tbody>
<tr id="compose_295_middleRow_sht">
<td id="compose_295_shell__text_cell_holder" class="cell shell__text_cell_holder w100" valign="top">
<table class="w100" cellspacing="0" cellpadding="0">
<tbody>
<tr class="nojsdn textModeHide">
<tr>
<td id="compose_295_shell__text_cell" class="cell shell__text_cell w100" valign="top">
<textarea id="compose_295_composeEditor" class="bsbb composeEditor" wrap="physical" tabindex="10" name="Body" style="width: 100%; height: 570px; display: none;" cols="80" rows="15" spellcheck="true" aria-hidden="true"> </textarea>
<span id="compose_295_composeEditor_parent" class="mceEditor defaultSkin">
<table id="compose_295_composeEditor_tbl" class="mceLayout" cellspacing="0" cellpadding="0" style="width: 100%; height: 570px;">
<tbody>
<tr class="mceFirst mceLast">
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="compose_295_composeEditor_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="{#aria.rich_text_area}" style="width: 100%; height: 200px; display: block;" hidefocus="true" tabindex="10" scrolling="auto">
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<body id="tinymce" class="mceContentBody" contenteditable="true" onload="window.parent.tinyMCE.get('compose_295_composeEditor').onLoad.dispatch();" dir="ltr" style="overflow: auto;">
</html>
</iframe>
</td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
<tr class="nojsdn textModeHide">
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
UPD Selen and WordPress: new post test , olyv's answer there helped me, but:
1) It was very difficult to link this question to mine since it doesn't mention the TinyMCE editor in the title and the problem is not with wordpress.
2) I edited the name of my question to indicate the source of the problem - the TinyMCE editor.
3) Saifur's answer here answers my question perfectly. So I believe that my question should not be closed
source to share
According to the html
selector for identification is iframe
incorrect. I am using cssSelector which will allow you to identify iframe
with an incomplete id. Why don't you try this?
driver.switchTo().frame(driver.findElement(By.cssSelector("iframe[id$='_composeEditor_ifr']")));
d̶r̶i̶v̶e̶r̶.̶s̶w̶i̶t̶c̶h̶T̶o̶(̶)̶.̶f̶r̶a̶m̶e̶(̶d̶r̶i̶v̶e̶r̶.̶f̶i̶n̶d̶E̶l̶e̶m̶e̶n̶t̶(̶B̶y̶.̶i̶d̶(̶"̶t̶i̶n̶y̶m̶c̶e̶"̶)̶)̶)̶;̶
driver.findElement(By.id("tinymce")).clear();
driver.findElement(By.id("tinymce")).sendKeys("Privet!"); // clear mail text body
driver.switchTo().defaultContent();
source to share
Since you are using Firefox try this workaround. This doesn't require switching to the iFrame at all if all you want to do is send text to the tinyMCE object. I've tried other various options that you've done recently in Firefox, but for some reason the only one that seems reliable is the following:
driver.executeScript("tinyMCE.activeEditor.setContent('Privet!')");
source to share