Home/ Questions/Q 1767
In Process
David Willey
Asked: 2022-05-30T05:43:12+00:00

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

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('test@email.com');
    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')

})
})
ckeditorcypresstype a text
Share

1 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')

    })
  }
    • 0

Leave an answer

You must login to add an answer.

Need An Account,