Add CKEditor tests

My Ckeditor 4 command

Cypress.Commands.add("type_ckeditor", (element, content) => {
    cy.window().then((win) => {
        // check if CKEDITOR is defined and has instances
        if (!win.CKEDITOR || !Object.keys(win.CKEDITOR.instances).length) {
            throw new Error("CKEDITOR is not defined");
        }
        // if no element is passed simply use the last instance
        if (!element) {
            element = Object.keys(win.CKEDITOR.instances).pop();
        }
        // check if the element exists
        if (!win.CKEDITOR.instances[element]) {
            throw new Error(`CKEDITOR instance ${element} not found`);
        }
        if (win.CKEDITOR && win.CKEDITOR.instances && win.CKEDITOR.instances[element] && content) {
            try {
                win.CKEDITOR.instances[element].setData(content);
            } catch (error) {
                console.error('Failed to set data in CKEDITOR instance:', error);
            }
        } else {
            console.error('CKEDITOR instance or content is not defined');
        }
    });
});

Used in test like cy.type_ckeditor("", pageInfo.html_chunk); or

cy.type_ckeditor(
        "edit-body-0-value",
        "<p>Test Event Description <strong>Body</strong></p>"
      );

Thanks for the contribution. I'll give it a whirl with CKEditor 5...should be very similar. I'll report back here.

I actually have cypress on another project with CKeditor5 here is what I have.

// commands.js

Cypress.Commands.add("type_ckeditor5", (element, text) => {
  return cy.get(element).then((el) => {
    const editor = el[0].ckeditorInstance
    editor.setData(text)
  });
});

// find a dynamic id assigned to a paragraphs wyyswig
Cypress.Commands.add("type_ckeditor", (element, content) => {
    cy.window().then((win) => {
        // check if CKEDITOR is defined and has instances
        if (!win.CKEDITOR || !Object.keys(win.CKEDITOR.instances).length) {
            throw new Error("CKEDITOR is not defined");
        }
        // if no element is passed simply use the last instance
        if (!element) {
            element = Object.keys(win.CKEDITOR.instances).pop();
        }
        // check if the element exists
        if (!win.CKEDITOR.instances[element]) {
            throw new Error(`CKEDITOR instance ${element} not found`);
        }
        win.CKEDITOR.instances[element].setData(content);
    });
});

Then I use it in testing like...

cy.type_ckeditor5(".field--name-field-pg-body .ck-editor__editable", pageInfo.html_chunk);

I needed the Cypress.Commands.add("type_ckeditor", (element, content) due to my projects are heavy Layout Paragraphs projects, which when editing a modal spawns up with the paragraphs fields, so the ID's are always random so I typically just have to choose the last CKeditor instance in order to set content into that field.

I would be curious how to test other features of Ckeditor, but right now I really only go as far as pasting text into it, then testing to see if that same text is rendered after saving a page.

For me I think I guess testing "creating a link" in Ckeditor would be my top priority, second would be images.