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

Question

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

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

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

Answer 1

最好通过向 Actor 类(默认情况下为 AcceptanceTester)添加可重用操作来实现此目的。然后，您可以使用测试中的操作来设置富文本编辑器字段的内容，而不会降低测试的可读性。有关此内容的更多详细信息，请参阅 Codeception documentation .

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

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

Actor 功能:

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

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