Selenium WebDriver：无法使用 TinyMCE 编辑器在 iframe 中定位元素答案

【问题标题】：Selenium WebDriver: unable to locate element inside iframe using TinyMCE editorSelenium WebDriver：无法使用 TinyMCE 编辑器在 iframe 中定位元素
【发布时间】：2015-06-16 17:05:51
【问题描述】：

也许我的问题与Selenium WebDriver cannot locate element within an iframe, and throws NoSuchElementException 类似，但是我仍然找不到所需的元素。
元素本身看起来：

body id="tinymce" class="mceContentBody" contenteditable="true" onload="window.parent.tinyMCE.get('compose_295_composeEditor').onLoad.dispatch();" dir="ltr" style="overflow: auto;">

包含此元素的iframe 是：

body id="tinymce" class="mceContentBody" contenteditable="true" onload="window.parent.tinyMCE.get('compose_295_composeEditor').onLoad.dispatch();" dir="ltr" style="overflow: auto;">

我试过了

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();

但收到错误：

Unable to locate frame: 10

也试过类似

driver.switchTo().frame(driver.findElement(By.id("tinymce")));

如其他答案中所述，但收到 NoSuchElement 错误。

元素周围的HTML是：

<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 Selenium and wordpress: New post test ，奥利夫的回答帮助了我，但是：
1) 很难将这个问题与我的问题联系起来，因为它没有在标题中提到 TinyMCE 编辑器，而且问题不在于 wordpress。
2) 我编辑了我的问题名称以指明问题来源 - TinyMCE 编辑器。
3) Saifur 的回答完美地回答了我的问题。
所以我相信我的问题不应该结束

【问题讨论】：

可能有重复的ID。尝试使用 xpath 或 css 识别iframe
你在用火狐吗？
...你的元素和 iframe 是同一个元素吗？我认为你犯了一个错误。
如何使用 selenium webdriver 识别iframe？
我看到我的元素在iframe内

标签： java selenium iframe selenium-webdriver

【解决方案1】：

根据html选择器识别iframe不正确。我正在使用一个 cssSelector，它允许您识别具有部分 id 匹配的iframe。你为什么不试试这个？

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();

【讨论】：

这给出了错误：原因：org.openqa.selenium.NoSuchFrameException：元素不是框架元素：BODY
然后试试@Imcphers 提供的javascript 解决方案。这很复杂
听起来不错。我忘了删除你切换框架的方式。感谢@aholt 注意到这一点

【解决方案2】：

由于您使用的是 Firefox，请尝试此解决方法。如果您只想将文本提交到 tinyMCE 对象，则根本不需要切换到 iFrame。我尝试了您最近在 Firefox 中尝试的其他各种选项，但由于某种原因，唯一看起来可靠的选项是这个：

    driver.executeScript("tinyMCE.activeEditor.setContent('Privet!')");

【讨论】：

【解决方案3】：

只需将 cssSelector 与 iframe 一起使用

driver.switchTo().frame(driver.findElement(By.cssSelector("iframe")));

【讨论】：

由于这里使用的是 TinyMCE 嵌入式编辑器，所以这将不起作用。
此外，该页面上有多个 ifarmes。编辑器是第 10 帧，而您的代码将选择页面上的第一个 iframe。