Dusk : interact with CKEditor

Hey @bestmomo,

This is what I came up with.

First, use Facebook\WebDriver\WebDriverBy;

    public function typeInCKEditor ($selector, $browser)
    {
        $ckIframe = $browser->elements($selector)[0];
        $browser->driver->switchTo()->frame($ckIframe);
        $body = $browser->driver->findElement(WebDriverBy::xpath('//body'));
        $body->sendKeys($this->faker->paragraph);
        $browser->driver->switchTo()->defaultContent();
    }

    // inside Dusk test
    $this->browse(function ($browser) {
    ...
    $this->typeInCKEditor('#cke_description iframe', $browser);

Hope it gives you a start.

Thanks I'm going to try your code ;)

@dnlcorrea

Nice, it works ;)

When I run this code I get the following:

There was 1 error:

1. Tests\Browser\Entry_Generate_Entry_Test::testCreateEntry Facebook\WebDriver\Exception\UnknownServerException: unknown error: Cannot read property 'shadowRoot' of null (Session info: chrome=58.0.3029.110) (Driver info: chromedriver=2.28.455520 (cc17746adff54984afff480136733114c6b3704b),platform=Windows NT 6.1.7601 SP1 x86_64)

Needed to try a couple of times to make sure the body was attached. I was able to resolve my error using the following:

public function typeInCKEditor ($browser, $ckId, $text)
    {
        $frm = $browser->driver->findElement(WebDriverBy::cssSelector($ckId));
        $browser->driver->switchTo()->frame($frm);

        for ($i=0;$i<3;$i++) {
            try {
                $pass = true;
                $body = $browser->driver->findElement(WebDriverBy::id('entryCkeditorBody'));
                $body->click();
                if($pass) {
                    $body->sendKeys($text);
                    break;
                }
            }
            catch(\Exception $e){
                $pass = false;
                echo $e->getMessage();
            }
        }
        $browser->driver->switchTo()->defaultContent();
    }

I used $browser->script("CKEDITOR.instances['element_name'].setData('Test Data');");

Case 1 (Without your solution)- When i run dusk cases with ckeditor i got this error ! could you help me to solve this problem [

1. Tests\Browser\DuskDepartmentTest::testDepartmentCreate Facebook\WebDriver\Exception\InvalidElementStateException: invalid element state : Element is not currently interactable and may not be manipulated

Here’s a method I use to interact with CKEditor in Laravel Dusk. Assume you have an input with the ID #full_description.

In your HTML file, add this script:

<script>
let fdEditor;

$(document).ready(function () {
ClassicEditor
      .create(document.querySelector('#full_description'))
      .then( editor => {
            fdEditor = editor;
      })
})
</script>

Then, your Dusk test could look like this:

public function testExampleCkEditor(): void
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/your-page')
                ->waitForText('Paragraph')
                ->script('fdEditor.data.set("Type your text here"))')

            $browser->pause(1000)
                ->assertSee('You can continue write your test');
        });
    }