0

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?

2
  • CKEditor is just used on the front end, it shouldn't affect the saving of field data - maybe you just need to provide a format column as well as the value? If you're able to describe a bit better what you mean by "the standard [...] step fails" it could help?
    – Clive
    May 31, 2022 at 9:05
  • @Clive Updated with more info. May 31, 2022 at 9:20

1 Answer 1

3

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!');
        }
        ");
  }
1
  • Shouldn't that first test be if (domEditableElement)?
    – Bob Kline
    Apr 12, 2023 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.