如何填写富文本编辑器字段以进行Codeception Acceptance测试

Question

我正在尝试在Codeception中的验收测试中填写富文本编辑器字段（TinyMCE）。

使用fillField()函数不起作用，因为此“字段”实际上不是输入字段。这是一个iframe，看起来像一个花哨的textarea。

如何将一些文本设置到TinyMCE框的主体中？我想我正在寻找添加$I->setContent(xpathOrCSS)功能。或者还有其他事情可以做到这一点吗？

Answer 1

最好通过向Actor类添加可重用的操作（默认情况下为AcceptanceTester）来完成此操作。然后，您可以使用测试中的操作来设置富文本编辑器字段的内容，而不会降低测试的可读性。有关这方面的更多详情，请访问Codeception documentation。

我在下面列出了TinyMCE和CKEditor的解决方案。该解决方案使用executeInSelenium()调用，让我们访问Facebook的底层WebDriver bindings。从那里，我们只需使用here描述的帧切换/ Javascript注入技术来设置目标编辑器的内容。

请注意，最后调用$webDriver->switchTo()->defaultContent()非常重要 - 这会将WebDriver的焦点从RTE iframe切换回包含它的页面。

演员功能：

<?php

class AcceptanceTester extends \Codeception\Actor {
    use _generated\AcceptanceTesterActions;

    public function fillCkEditorById($element_id, $content) {
        $this->fillRteEditor(
            \Facebook\WebDriver\WebDriverBy::cssSelector(
                '#cke_' . $element_id . ' .cke_wysiwyg_frame'
            ),
            $content
        );
    }

    public function fillCkEditorByName($element_name, $content) {
        $this->fillRteEditor(
            \Facebook\WebDriver\WebDriverBy::cssSelector(
                'textarea[name="' . $element_name . '"] + .cke .cke_wysiwyg_frame'
            ),
            $content
        );
    }

    public function fillTinyMceEditorById($id, $content) {
        $this->fillTinyMceEditor('id', $id, $content);
    }

    public function fillTinyMceEditorByName($name, $content) {
        $this->fillTinyMceEditor('name', $name, $content);
    }

    private function fillTinyMceEditor($attribute, $value, $content) {
        $this->fillRteEditor(
            \Facebook\WebDriver\WebDriverBy::xpath(
                '//textarea[@' . $attribute . '=\'' . $value . '\']/../div[contains(@class, \'mce-tinymce\')]//iframe'
            ),
            $content
        );
    }

    private function fillRteEditor($selector, $content) {
        $this->executeInSelenium(
            function (\Facebook\WebDriver\Remote\RemoteWebDriver $webDriver)
            use ($selector, $content) {
                $webDriver->switchTo()->frame(
                    $webDriver->findElement($selector)
                );

                $webDriver->executeScript(
                    'arguments[0].innerHTML = "' . addslashes($content) . '"',
                    [$webDriver->findElement(\Facebook\WebDriver\WebDriverBy::tagName('body'))]
                );

                $webDriver->switchTo()->defaultContent();
            });
    }
}

用法示例：

$content = '<h1>Hello, world!</h1>';

// CKEditor
$I->fillCkEditorByName('rich_content', $content);
$I->fillCkEditorById('my_ckeditor_textarea', $content);

// TinyMCE
$I->fillTinyMceEditorByName('rich_content', $content);
$I->fillTinyMceEditorById('my_tinymce_textarea', $content);

在所有情况下，第一个参数引用原始name元素的id / textarea属性，第二个参数是填充它的HTML内容。

Answer 2

最好的办法：

$I->executeJS('$("#selector").val("Value")');

Answer 3

如果你有一个简单的设置，只需要在tinyMCE 4中测试一个实例，这对我有用。

$I->executeJS('tinyMCE.activeEditor.setContent(" your content goes here ");');

Answer 4

尝试和以下解决方案工作：

$I->switchToIFrame('#frameName');
$I->executeJS('document.getElementById("tinymce").innerHTML = "<p>Test abc def</p>";');

Answer 5

试试这个

$x = $I->grabAttributeFrom('//iframe', 'id');
$I->switchToIframe($x);
$I->fillField('//*[@id="tinymce"]', '<p>Test abc</p>');

Answer 6

如果您有和iframe这样：

    <iframe id="myFrameID" allowtransparency="true" title="Rich-Text- Area. Drücken Sie ALT-F9 für das Menü. Drücken Sie ALT-F10 
für Symbolleiste. Drücken Sie ALT-0 für Hilfe" 
style="width: 100%; height: 120px; display: block;" 
data-mce-style="width: 100%; height: 120px; display: block;" frameborder="0"></iframe>

注意，Codeception切换到使用iframe

$I->switchToIFrame("myFrameID");

请注意，省略“myFrameID”前面的＃，因为切换到iframe不使用css选择器而只是iframe的名称。

然后做

$I->executeJS('document.getElementById("tinymce").innerHTML = "<p>Some Text Here!</p>";');

并且不要忘记切换回上一个窗口：

$I->switchToIFrame();

正如https://codeception.com/docs/modules/WebDriver#switchToIFrame所述