How to fill a rich text editor field for a Codeception Acceptance test

codeception functional test
test suite codeception
codeception dependent tests
codeception acceptance _before
codeception test order
codeception skip test
codeception api testing
codeception functional test database

I'm trying to fill a rich text editor field (TinyMCE) within my acceptance test in Codeception.

Using the fillField() function doesn't work as this 'field' isn't really an input field. It's an iframe, styled to look like a fancy textarea.

How can I set some text into the body of the TinyMCE box? I think I'm looking for the addition of a $I->setContent(xpathOrCSS) function. Or does something else already exist to do this?

It is best to do this by adding re-usable actions to your Actor class (AcceptanceTester, by default). You can then use the actions in your tests to set the content of rich text editor fields without reducing the readability of your tests. More details on this are available in the Codeception documentation.

I have included solutions for TinyMCE and CKEditor below. The solution uses the executeInSelenium() call to give us access to Facebook's underlying WebDriver bindings. From there, we simply use the frame switching/Javascript injection technique described here to set the content of our target editor.

Note that the final call to $webDriver->switchTo()->defaultContent() is very important - this switches WebDriver's focus back from the RTE iframe to the page that contains it.

Actor functions:

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

Example Usage:

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

In all cases, the first parameter refers to the name/id attribute of the original textarea element, and the second parameter is the HTML content to fill it with.

How to fill a rich text editor field for an Acceptance test � Issue #1794 , I'm trying to fill a rich text editor field (TinyMCE) within my acceptance test. Using the fillField() function doesn't work as this 'field' isn't really an� Codeception keeps tests clean and simple as if they were recorded from the words of an actual acceptance tester. It makes no difference what (if any) CMS or framework is used on the site. You can even test sites created with different languages, like Java, .NET, etc.

Best way:

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

Acceptance Tests, I'm trying to fill a rich text editor field (TinyMCE) within my acceptance test in Codeception. Using the fillField() function doesn't work as this 'field' isn't really an � Hello everyone My name is Fadil H. from Indonesia. I'm doing my thesis research about turning BDD scenarios into a test-case codeception automatically. I created a tool that can change the BDD scenario you input into a test-case codeception. The final result of my application is a test-case codeception that you are ready to use the tools

If you have a simple setup and only need to test one instance in tinyMCE 4, this worked for me.

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

Acceptance Testing Select2 and CKEditor in CodeCeption, Acceptance testing can be performed by a non-technical person. links with valid URLs or form submit buttons; You can't fill in fields that are not inside a form Codeception tries to locate an element by its text, name, CSS or XPath. is not formatted properly, for example, to discover that labels aren't set or that fields have� It depends on what the text field is supposed to accept and what it's for. If it's meant to accept specific formats of data, your tests will be different than if it's meant to accept free-form data. For example, text fields are often used for postal code entry.

Tried and following solution works:

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

How to fill CKeditor textarea with content using c, CKEditor is a battle-tested WYSIWYG HTML editor. It's our go-to solution when we need to give complete control to the user on their content. Text Field. Text fields let users enter and edit text. Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. TextField. The TextField wrapper component is a complete form control including a label, input and help text. It supports standard, outlined and filled styling.

try this

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

selenium, This is a follow up question to this one -- How to fill a rich text editor field for a Codeception Acceptance test. The solution given on this post,� It is a very basic project that performs unit test to an object. The codeception structure is being generated using the codecept binary: Step 1: Create the structure. Step 2: Generate the a unit test object. Then added my code to test object and Step 3: Run the tests. Details. Codeception version: 2.5.1; PHP Version: 7.2.13

CodeceptJS, Ceci est une question de suivi � celui-ci - How to fill a rich text editor field for a Codeception Acceptance test Le solution donn� sur ce post, fonctionne� I tried passing inputs in an array by calling the test case in for loop by passing array values as input parameter. In acceptance.php, multiple set of inputs can be passed using if loop. This runs my test as only 1 test case with different assertions. But, it runs the test case until it fails for any inputs/assertion. (for ex:

Test actions, SuperCharged End 2 End Testing with WebDriver & Puppeteer. storeName); // Fill fields by labels or placeholders I.fillField('Email', faker.internet.email());� i'm using modal forms module to call webforms on a website builded using Drupal. Some days ago i had started to build my tests stack (for now, just acceptance tests). I started with codeception and, for now, PhpBrowser and MailCatcher modules are enough. On my website i have some popup forms and i want test his content. As we can see on the official documentation, PhpBrowser doesn't support

03-AcceptanceTests.md, Testing. Magento Testing Guide � Functional Acceptance Testing (MFTF) � Integration Testing � JavaScript Edit on GitHub They are mostly XML implementations of Codeception actions. <fillField> fills a text field with the given string. Fill in `<input id="myfield" . Returns formatted string for test use. For test objects in desktop applications, the action raises only text change events and does not raise keystroke events. For test objects on web pages , the action fires the onchange event (a “text change” event), and “keystroke” events like keyup , input and keydown that may trigger keyboard-related scripts (for example, autocompletion

Comments
  • What are you using for carrying your acceptance tests? Since TinyMCE is mostly JS-driven, using PHPBrowser is not an option, you would need to use WebDriver (recommended) or PhantomJS (if you need a headless JS-enabled browser)
  • Great answer, it saved my day and its very readable for all ckeditor tests in the future. Thanks Alex !
  • Very generic and incomplete answer
  • you're definitive wrong, it's all you need to work on this problem. Think by yourself. any more point is unnecessary overhead information. its not about teaching all about the questions, it's about answer just that the problem says.
  • Works perfectly for: Yii2+Redactor