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

Question

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

使用该fillField()功能不起作用,因为此"字段"实际上不是输入字段.它是一个iframe样式,看起来像一个花哨的textarea.

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

Answer 1

最好通过向您的Actor类添加可重用的操作来做到这一点（AcceptanceTester默认情况下为 ）。然后，您可以使用测试中的操作来设置富文本编辑器字段的内容，而不会降低测试的可读性。Codeception 文档中提供了有关这方面的更多详细信息。

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

请注意，最后调用 to$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")');