How to add/type a text in CKeditor (v4) in Cypress Automation?Or any Method to Set The Value for Ckeditor in Cypress Automation?

Question

I am using this method in commands.js

Cypress.Commands.add(
'iframeLoaded', { prevSubject: 'element' },
($iframe) => {
    const contentWindow = $iframe.prop('contentWindow')
    return new Promise(resolve => {
        if (
            contentWindow &&
            contentWindow.document.readyState === 'complete'
        ) {
            resolve(contentWindow)
        } else {
            $iframe.on('load', () => {
                resolve(contentWindow)
            })
        }
    })
})
Cypress.Commands.add(
'getInDocument', { prevSubject: 'document' },
(document, selector) => Cypress.$(selector, document))

I need your Suggestions or any other method to solve the this problem.

Following code is working fine but nothing shows as output.

cy.get('iframe')
        .iframeLoaded()
        .its('document')
        .get('#cke_10_contents > .cke_wysiwyg_frame')
        .type("Text");

This is my Script & showing in the console 'Timed out retrying: expected '' to equal 'some new text'.

describe('demo', function() {
it('test', function() {


    cy.visit('https://automationtestname688296/create')
    cy.get('#email').type('[email protected]');
    cy.get('#password').type('test2020');
    cy.get('.checkmark').click().wait(2000);

    cy.get(':nth-child(6) > .form-control').contains('Login').click()
// I want to Enter Text in First Text Editor
.then(() => {

cy.get('iframe.cke_wysiwyg_frame')  // "cke_wysiwyg_frame" class is used here
  .iframeLoaded()                   // wait for the iframe to be loaded
  .then($frameWindow => {

    const win = cy.state('window'); // grab the window Cypress is testing
    const ckEditor = win.CKEDITOR;  // CKEditor has added itself to the window
    const instances = ckEditor.instances;  // can be multiple editors on the page

    const myEditor = Object.values(instances)
      .filter(instance => instance.id === 'cke_8')[0]; // select the instance by id

    // use CKEditor API to change the text
    myEditor.setData('<h1>some new text</h1>'); 

    // Verify
    cy.wrap($frameWindow)
      .its('document')
      .its('body')
      .invoke('text')
      .should('eq', 'some new text')

})
})

Answer 1

I have a feeling there's more to this, but a basic test like this works with CKEditor v5

cy.visit('https://ckeditor.com/ckeditor-5/demo/')
  .then(() => {

    cy.get('.ck-content')
      .clear()
      .type('Hello CKEditor');

    cy.get('.ck-content')
      .invoke('text')
      .should('eq','Hello CKEditor')

  })

---

For CKEditor v4,

cy.visit('https://ckeditor.com/ckeditor-4/demo/')
  .then(() => {

    cy.get('iframe.cke_wysiwyg_frame')  // "cke_wysiwyg_frame" class is used here
      .iframeLoaded()                   // wait for the iframe to be loaded
      .then($frameWindow => {

        const win = cy.state('window'); // grab the window Cypress is testing
        const ckEditor = win.CKEDITOR;  // CKEditor has added itself to the window
        const instances = ckEditor.instances;  // can be multiple editors on the page

        const myEditor = Object.values(instances)
          .filter(instance => instance.id === 'cke_1')[0]; // select the instance by id

        // use CKEditor API to change the text
        myEditor.setData('<h1>some new text</h1>'); 

        // Verify
        cy.wrap($frameWindow)
          .its('document')
          .its('body')
          .invoke('text')
          .should('eq', 'some new text')

    })
  })

Answer 2

this worked for me:

    cy.get("iframe.cke_wysiwyg_frame").then(function($iframe) {
      const $body = $iframe.contents().find("body");
      console.log($body);
      cy.wrap($body[0]).type("Random text");
    }); 

May also require to add a waiter ahead of it to make sure the frame is fully loaded.

Answer 3

// Call out to the page window and use the CKEDITOR object

cy.window()

.then(win => { win.CKEDITOR.instances["html_body"].setData("

HTML body

"); });

Answer 4

Here is the solution for Ckeditor(v4).Just add this custom command in command.js

Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe) => {
const $iframeDoc = $iframe.contents()
const findBody = () => $iframeDoc.find('body')

if ($iframeDoc.prop('readyState') === 'complete') return findBody()

return Cypress.Promise((resolve) => $iframe.on('load', () => 
resolve(findBody())))
});

Cypress.Commands.add(
    'iframeLoaded', { prevSubject: 'element' },
     ($iframe) => {
       const contentWindow = $iframe.prop('contentWindow')
       return new Promise(resolve => {
        if (
            contentWindow &&
            contentWindow.document.readyState === 'complete'
        ) {
            resolve(contentWindow)
        } else {
            $iframe.on('load', () => {
                resolve(contentWindow)
            })
        }
    })
})

Cypress.Commands.add(
   'getInDocument', { prevSubject: 'document' },
(document, selector) => Cypress.$(selector, document)
 )

Now, Copy the exact Selector of CkEditor and Access it like this code in your test:

cy.get('#cke_155_contents > .cke_wysiwyg_frame').first().then(frame => {
        const iframe = frame.contents();
        const body = iframe.find('body');
        body.attr('contenteditable', 'true');
        cy.wrap(body).type('Text Should be here.', { force: true })
    })
    cy.get('iframe.cke_wysiwyg_frame') // "cke_wysiwyg_frame" class is 
        .iframeLoaded() // wait for the iframe to be loaded
        .then($frameWindow => {
            const win = cy.state('window'); // grab the window Cypress
            const ckEditor = win.CKEDITOR; // CKEditor has added itself to 
            const instances = ckEditor.instances;//can be multiple editors
            const myEditor = Object.values(instances)
                .filter(instance => instance.id === 'cke_155')[0]; 
            // use CKEditor API to change the text
            myEditor.setData('<h1>Text Should be here.</h1>');
            // Verify
            cy.wrap($frameWindow)
                .its('document')
                .its('body')
                .invoke('text')
            cy.get('#high-submit').click()
        })

Answer 5

This solution works for me with Ckeditor(v4).

cy.pause(); //wait for the editor to load completely
cy.window().then((win) => {
            win.CKEDITOR.instances['editor1'].setData("HTML body") });

Answer 6

This works consistently for me.

1. Append the following to cypress/support/commands.js to get the functionality.

   Cypress.Commands.add('typeCkeditor', {
     prevSubject: true,
   }, (prevSubject, html) => {
    cy.get(prevSubject).invoke('attr', 'id').as('ckeditorInstance');
   
    cy.get('@ckeditorInstance').then((id) => {
      cy.state('window').CKEDITOR.instances[id].setData(html);
    });
   });
   

2. Append the following to cypress/support/index.d.ts to get the code editor hints.

   /**
    * Types on CKeditor fields.
    * @param HTML
    */
   typeCkeditor(html:string): Chainable<any>
   

3. Use it:

   cy.get('textarea-selector').typeCkeditor("Your message");
   

Note: the textarea selector should make reference to the hidden textarea where Ckeditor stores the HTML code, usually a few levels above the Ckeditor iframe.