Drupal, a powerful and adaptable Content Management System (CMS), enables users to create and maintain complicated websites effortlessly. It is an open-source platform with numerous modules and themes, empowering developers to build specialized and feature-rich websites.
The CKEditor, a well-known and frequently used WYSIWYG editor, is one of the fundamental parts of Drupal. By offering a user-friendly interface with formatting options, image insertion, link creation, and other rich text editing capabilities, Drupal CKEditor improves the experience of editing material.
Drupal users can make their websites more engaging and visually pleasing by generating and editing content with the CKEditor. As Drupal versions are upgraded, CKEditor is also updated. The latest version released with Drupal 10 is CKEditor 5. In this blog, we will discuss Behat test techniques for both CKEditor 4 and CKEditor 5.
CKEditor 4 vs. CKEditor 5
In Drupal, the "CKEditor" module is responsible for integrating the CKEditor WYSIWYG (What You See Is What You Get) editor into Drupal's content creation interface. CKEditor allows users to create rich, formatted text content without requiring knowledge of HTML or CSS.
On the other hand, CKEditor 5 has a flexible design that allows you to add or remove features as needed. It uses a system called virtual DOM to speed up editing and works well with modern web technologies like React and Angular. Its modern and user-friendly interface is more accessible than CKEditor 4, streamlining the editing experience.
Moving from CKEditor 4 to CKEditor 5 might require changes to the DOM structure. However, it's worth considering that CKEditor5 has a newer and more adaptable DOM structure, designed to be more versatile and provide a seamless editing experience for developers and end-users. This allows for greater control over the final product.
Automate Behat test for CKEditor 4
CKEditor 4 and CKEditor 5 have significant differences in their DOM structures, which can impact Behat automation. Here's an explanation with an example:
The DOM structure in CKEditor 4 is relatively simple, and each text area is represented as a single iframe element. To enter text into the editor using Behat, you can simply locate the iframe element and send keys to it.
Example Behat test step
Behat custom context for CKEditor 4
This works great with CKEditor 4. But when we try the above custom context for CKEditor 5 we get the following error.
Why do we get this error
In CKEditor 5 it is not represented as a single iframe element. Instead the editor is composed of multiple div elements each with its own set of classes and attributes. To enter text into the editor using Behat you must locate the appropriate div element with ck-editor__editable class and use that to locate the specific editor instance and send keys to it.
Path to resolution
To address the error mentioned above it is necessary to create a separate Behat custom context that is specifically designed for CKEditor 5.
Finally it sets the data value of the CKEditor instance using editorInstance.setData(""$string"");
Example Behat test step
Behat custom context for CKEditor5
The code is available on Github.
CKEditor is a feature-rich WYSIWYG editor that offers an intuitive interface and powerful functionality for content creators from beginners to experienced professionals.
It helps users create beautiful and sophisticated content with ease without requiring proficiency in HTML or CSS. This versatile tool offers a range of customization options making it the perfect choice for anyone looking to create professional-grade content.
When working with Behat/Mink remember to have a separate custom context for CKEditor 5 as it requires different scripting than CKEditor 4. The custom context provided in this blog demonstrates how to achieve it with CKEditor 5 in Behat/Mink.