I am using "puppeteer": "^1.20.0", for testing.
I have implemented the wysiwyg editor redactor as iframe:
<div class="redactor_box">
<ul class="redactor_toolbar">
<li class="redactor_btn_group redactor_btn_right">
<ul>
<li class="redactor_btn_container_switchmode">
<a href="javascript:void(null);" title="Use BB Code Editor" class="redactor_btn_switchmode" unselectable="on" tabindex="-1"></a>
</li>
</ul>
</li>
<li class="redactor_btn_group redactor_btn_right">
<ul>
<li class="redactor_btn_container_removeformat">
<a href="javascript:void(null);" title="Remove Formatting" class="redactor_btn_removeformat" unselectable="on" tabindex="-1"></a>
</li>
</ul>
</li>
<li class="redactor_btn_group">
<ul>
<li class="redactor_btn_container_bold">
<a href="javascript:void(null);" title="Bold (Ctrl+B)" class="redactor_btn_bold" unselectable="on" tabindex="-1"></a>
</li>
<li class="redactor_btn_container_italic">
<a href="javascript:void(null);" title="Italic (Ctrl+I)" class="redactor_btn_italic" unselectable="on" tabindex="-1"></a>
</li>
<li class="redactor_btn_container_underline">
<a href="javascript:void(null);" title="Underline (Ctrl+U)" class="redactor_btn_underline" unselectable="on" tabindex="-1"></a>
</li>
</ul>
</li>
<li class="redactor_btn_group">
<ul>
<li class="redactor_btn_container_fontcolor">
<a href="javascript:void(null);" title="Text Color" class="redactor_btn_fontcolor" unselectable="on" tabindex="-1"></a>
</li>
<li class="redactor_btn_container_fontsize">
<a href="javascript:void(null);" title="Font Size" class="redactor_btn_fontsize" unselectable="on" tabindex="-1"></a>
</li>
<li class="redactor_btn_container_fontfamily">
<a href="javascript:void(null);" title="Font Family" class="redactor_btn_fontfamily" unselectable="on" tabindex="-1"></a>
</li>
</ul>
</li>
<li class="redactor_btn_group">
<ul>
<li class="redactor_btn_container_createlink">
<a href="javascript:void(null);" title="Link" class="redactor_btn_createlink" unselectable="on" tabindex="-1"></a>
</li>
<li class="redactor_btn_container_unlink">
<a href="javascript:void(null);" title="Unlink" class="redactor_btn_unlink" unselectable="on" tabindex="-1"></a>
</li>
</ul>
</li>
<li class="redactor_btn_group">
<ul>
<li class="redactor_btn_container_alignment">
<a href="javascript:void(null);" title="Alignment" class="redactor_btn_alignment" unselectable="on" tabindex="-1"></a>
</li>
</ul>
</li>
<li class="redactor_btn_group">
<ul>
<li class="redactor_btn_container_unorderedlist">
<a href="javascript:void(null);" title="• Unordered List" class="redactor_btn_unorderedlist" unselectable="on" tabindex="-1"></a>
</li>
<li class="redactor_btn_container_orderedlist">
<a href="javascript:void(null);" title="1. Ordered List" class="redactor_btn_orderedlist" unselectable="on" tabindex="-1"></a>
</li>
<li class="redactor_btn_container_outdent">
<a href="javascript:void(null);" title="< Outdent" class="redactor_btn_outdent" unselectable="on" tabindex="-1"></a>
</li>
<li class="redactor_btn_container_indent">
<a href="javascript:void(null);" title="> Indent" class="redactor_btn_indent" unselectable="on" tabindex="-1"></a>
</li>
</ul>
</li>
<li class="redactor_btn_group">
<ul>
<li class="redactor_btn_container_smilies">
<a href="javascript:void(null);" title="Smilies" class="redactor_btn_smilies" unselectable="on" tabindex="-1"></a>
</li>
<li class="redactor_btn_container_image">
<a href="javascript:void(null);" title="Image" class="redactor_btn_image" unselectable="on" tabindex="-1"></a>
</li>
<li class="redactor_btn_container_media">
<a href="javascript:void(null);" title="Media" class="redactor_btn_media" unselectable="on" tabindex="-1"></a>
</li>
<li class="redactor_btn_container_insert">
<a href="javascript:void(null);" title="Insert..." class="redactor_btn_insert" unselectable="on" tabindex="-1"></a>
</li>
</ul>
</li>
<li class="redactor_btn_group">
<ul>
<li class="redactor_btn_container_draft">
<a href="javascript:void(null);" title="Drafts" class="redactor_btn_draft" unselectable="on" tabindex="-1"></a>
</li>
</ul>
</li>
<li class="redactor_btn_group">
<ul>
<li class="redactor_btn_container_undo">
<a href="javascript:void(null);" title="Undo (Ctrl+Z)" class="redactor_btn_undo" unselectable="on" tabindex="-1"></a>
</li>
<li class="redactor_btn_container_redo">
<a href="javascript:void(null);" title="Redo (Ctrl+Y)" class="redactor_btn_redo" unselectable="on" tabindex="-1"></a>
</li>
</ul>
</li>
</ul><iframe style="width: 100%; height: 264px;" frameborder="0" class="redactor_textCtrl redactor_MessageEditor redactor_BbCodeWysiwygEditor redactor_NoAutoComplete"></iframe>
<div class="redactor_editor_drop dragDisabled"><span>Uploads are not available.</span></div><textarea name="message_html" id="ctrl_message_html" class="textCtrl MessageEditor BbCodeWysiwygEditor NoAutoComplete" style="height: 260px; display: none;" data-css-url="css.php?style=3&css=editor_contents&d=1589815082"
data-dialog-url="index.php?editor/dialog&style=3" data-auto-save-url="conversations/save-draft" data-options="{"autoSaveFrequency":"60","bbCodes":[]}"></textarea></div>
I am trying to use:
const editFrame = await page.frames().find(f => f.name() === 'redactor');
const inputb = await editFrame.$('#html');
However, the iframe does not have any name. Furthermore, how do I then input into the iframe.
I highly appreciate your replies!