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

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

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

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

解决方法

最好通过向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);

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