How do I test a CKEditor 5 text format field with Behat/Mink?

Question

Drupal 10 is switching from CKEditor 4 to 5.

So, I installed the experimental CKEditor 5 module and am attempting to update my Behat tests to use CKEditor 5.

I am using an @javascript test in Behat on CircleCI to check my Drupal 8 site.

The standard I fill in "my field" with "value" step fails for fields that use CKEditor. For example, for a long text field with the label Question, if I add a step:

And I fill in "Question" with "Will this work?"

Then I get the error: Element not interactable

As described in this question about CKEditor 4, there is a gist by johnennewdeeson that works for CKEditor 4 (which basically uses JS to find the editor instance and set the data), but it does not work for CKEditor 5 (CKEDITOR is not defined error).

So how can I set the value of a text format field in Behat using CKEditor 5?

Answer 1

As described in How to get the editor instance object from the DOM element?, you can search for ck-editor__editable and use that to locate the specific editor instance that you need to manipulate.

The following is a working example. Note that you have to replaced any underscores with hyphens in the machine name for $field_hyphenated_machine_name.

  /**
   * Input text using CKEditor.
   *
   * @Then I fill in the wysiwyg field :field_hyphenated_machine_name with :value
   * @Then I enter :value for wysiwyg field :field_hyphenated_machine_name
   */
  public function iFillInWysiwygOnFieldWith($field_hyphenated_machine_name, $value) {
    # https://ckeditor.com/docs/ckeditor5/latest/support/faq.html#how-to-get-the-editor-instance-object-from-the-dom-element
    $ckeditor5_drupal_editable_element = "div.form-item-$field_hyphenated_machine_name-display-0-value .ck-editor__editable";

    $this->getSession()
      ->executeScript(
        "
        const domEditableElement = document.querySelector(\"$ckeditor5_drupal_editable_element\");
        if (domEditableElement.ckeditorInstance) {
          const editorInstance = domEditableElement.ckeditorInstance;
          if (editorInstance) {
            editorInstance.setData(\"$value\");
          } else {
            throw new Exception('Could not get the editor instance!');
          }
        } else {
          throw new Exception('Could not find the element!');
        }
        ");
  }