如何填写 Codeception 验收测试的富文本编辑器字段

我正在尝试在 Codeception 的验收测试中填充富文本编辑器字段 (TinyMCE)。

使用fillField()函数不起作用，因为这个“字段”并不是真正的输入字段。这是一个iframe，样式看起来像一个精美的文本区域。

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

最好通过将可重复使用的操作添加到您的Actor class (AcceptanceTester， 默认情况下）。然后，您可以使用测试中的操作来设置富文本编辑器字段的内容，而不会降低测试的可读性。有关这方面的更多详细信息，请参阅代码接收文档 http://codeception.com/docs/06-ReusingTestCode#What-are-Actors.

我在下面提供了 TinyMCE 和 CKEditor 的解决方案。该解决方案使用executeInSelenium()致电让我们访问 Facebook 的底层WebDriver 绑定 https://github.com/facebook/php-webdriver/wiki/Example-command-reference。从那里，我们只需使用所描述的框架切换/Javascript 注入技术here http://yizeng.me/2014/01/31/test-wysiwyg-editors-using-selenium-webdriver/设置目标编辑器的内容。

请注意，最后的调用$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 内容。