Cannot read properties of null (reading 'parent') error occurs when trying to type text into CKEditor

[Artem-Babich]

What is your Scenario?

Open the following page and type any text with typeText command: https://ckeditor.com/ckeditor-5/demo/feature-rich/

What is the Current behavior?

Nothing is entered and an error occurs

What is the Expected behavior?

The text should be typed without errors

What is your public website URL? (or attach your complete example)

https://ckeditor.com/ckeditor-5/demo/feature-rich/

What is your TestCafe test code?

import { Selector } from 'testcafe';

fixture`test-fixt`
    .page('https://ckeditor.com/ckeditor-5/demo/feature-rich/')

test('test', async t => {
    const editable = Selector('.ck.ck-content.ck-editor__editable')
    await t.click(editable)
        .typeText(editable, 'test')
})

Your complete configuration file

No response

Your complete test report

1) A JavaScript error occurred on "https://ckeditor.com/ckeditor-5/demo/feature-rich/".
     Repeat test actions in the browser and check the console for errors.
     Enable the “skipJsErrors” option to ignore JavaScript errors during test execution. Learn more: "https://testcafe.io/documentation/404038/recipes/debugging/skip-javascript-errors"
     If the website only throws this error when you test it with TestCafe, please create a new issue at:
     "https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md".
     
     JavaScript error details:
     Cannot read properties of null (reading 'parent')
     Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-Cannot read properties of null (reading 'parent')
     TypeError: Cannot read properties of null (reading 'parent')
         at listenTo.priority (https://ckeditor.com/assets/libs/ckeditor5-external/ck-demo-external-feature-rich-6268557744.js:2:1215668)
         at _c.fire (https://ckeditor.com/assets/libs/ckeditor5-external/ck-demo-external-feature-rich-6268557744.js:2:455233)
         at <computed> [as deleteContent] (https://ckeditor.com/assets/libs/ckeditor5-external/ck-demo-external-feature-rich-6268557744.js:2:458952)
         at Object.callback (https://ckeditor.com/assets/libs/ckeditor5-external/ck-demo-external-feature-rich-6268557744.js:2:901164)
         at _c._runPendingChanges (https://ckeditor.com/assets/libs/ckeditor5-external/ck-demo-external-feature-rich-6268557744.js:2:806472)
         at _c.enqueueChange (https://ckeditor.com/assets/libs/ckeditor5-external/ck-demo-external-feature-rich-6268557744.js:2:801045)
         at Ih.execute (https://ckeditor.com/assets/libs/ckeditor5-external/ck-demo-external-feature-rich-6268557744.js:2:901104)
         at Ih.<anonymous> (https://ckeditor.com/assets/libs/ckeditor5-external/ck-demo-external-feature-rich-6268557744.js:2:458832)
         at Ih.fire (https://ckeditor.com/assets/libs/ckeditor5-external/ck-demo-external-feature-rich-6268557744.js:2:455233)
         at <computed> [as execute] (https://ckeditor.com/assets/libs/ckeditor5-external/ck-demo-external-feature-rich-6268557744.js:2:458952)

Screenshots

No response

Steps to Reproduce

1. Run the test code above

TestCafe version

2.5.0

Node.js version

18.14.2

Command-line arguments

testcafe chrome test.js

Browser name(s) and version(s)

Chrome 112.0.5615.121 (Official Build) (64-bit)

Platform(s) and version(s)

Ubuntu 22.04

Other

No response

[Artem-Babich]

For team:
The issue is in the CKEditor inner logic. It tries to remove some content with selection ranges. But for some reason ranges array is empty.

getFirstRange() {
    let t = null;
    for (const e of this._ranges)
        t && !e.start.isBefore(t.start) || (t = e);
    return t ? new ka(t.start,t.end) : null  
    // It always returns null
}

[aorioir]

I have the same issue

[aorioir]

Here you are a workaround:

await t.eval(() => {
   const editor = window.document.querySelector(".ck-editor__editable");
   editor.ckeditorInstance.data.set(whateverYouWant);
},
{ 
   dependencies: { whateverYouWant } 
});

[Artem-Babich]

Hi @aorioir

Thank you for sharing your workaround.

[devpuraanjali]

Trying the workaround (using t.eval) from this thread, but not resolved the issue.

running into TypeError: Cannot read properties of undefined (reading ‘data’)`

The code snippet

export async function test1() {
const getCkEditorInstance = ClientFunction(() => window.document.querySelector('.ck-editor__editable');
const editorstring = 'Sample question for automation;
const editor = (await getCkEditorInstance()) as CkeditorInstance;
editor.ckeditorInstance.data.set(editorstring);
}

[ayemelyanenko-chegg]

Can you please share the complete workaround example based on the test code @Artem-Babich or @aorioir?

If we look at the example and plug in the workaround, the below is what we have. I attached TS errors based on the code.

fixture`test-fixt`
    .page('https://ckeditor.com/ckeditor-5/demo/feature-rich/')

    test.meta({
      testID: 't-0001',
    })('Sample ckeditor test', async (t) =>
await t.eval(() => {
    const editor = window.document.querySelector(".ck-editor__editable");
    editor.ckeditorInstance.data.set('test string');
  })
);

[ayemelyanenko-chegg]

Perhaps this could also be researched further and potentially fixed so there is no need for workarounds? CKEditor is quite popular so there are probably more people running into this issue.

[aarav-chegg]

I'm facing the same issue, it's blocking some of our deployment pipelines, I would really appreciate it if it gets prioritized.

[aorioir]

Can you please share the complete workaround example based on the test code @Artem-Babich or @aorioir?

If we look at the example and plug in the workaround, the below is what we have. I attached TS errors based on the code.

fixture`test-fixt`
    .page('https://ckeditor.com/ckeditor-5/demo/feature-rich/')

    test.meta({
      testID: 't-0001',
    })('Sample ckeditor test', async (t) =>
await t.eval(() => {
    const editor = window.document.querySelector(".ck-editor__editable");
    editor.ckeditorInstance.data.set('test string');
  })
);

maybe you can try to pass your text string throw a variable and use the second parameter of t.eval function

const yourText = 'test string'

await t.eval(() => {
   const editor = window.document.querySelector(".ck-editor__editable");
   editor.ckeditorInstance.data.set(yourText);
},
{ 
   dependencies: { yourText } 
});

[ayemelyanenko-chegg]

Thanks for the response @aorioir

We managed to get it to work by doing the following in case someone else is looking for more solutions

export interface CkeditorInstance extends Element {
  ckeditorInstance: {
    data: {
      set: (string: string) => void;
    };
  };
}


 await t.eval(() => {
    const editor = window.document.querySelector(
      '.ck-editor__editable'
    ) as CkeditorInstance;
    editor.ckeditorInstance.data.set('Sample question for automation');
  });

[miherlosev]

Hi folks,

There are some browser restrictions related to typing text into the content-editable elements. For example, inputEvent.getTargetRanges will always return an empty list.

To avoid this behavior, use the selectEditableContent method.

Example (this code will change the Did you know that… text):

import { Selector } from 'testcafe';

fixture `test-fixt`
    .page('https://ckeditor.com/ckeditor-5/demo/feature-rich/')

test('test', async t => {
    const editableRoot = Selector('.ck.ck-content.ck-editor__editable');
    const h2Editable   = editableRoot.find('h2');
	
    await t
	   .click(editableRoot)
	   .selectEditableContent(h2Editable, h2Editable)
           .pressKey('n e w t i t l e');
});