cypress 中的 ckeditor5 给出错误：CKEditorError：无法读取 null 的属性（读取“root”）

Question

因此，我正在测试的页面上有一个 ckeditor，这是一个非常简单的测试，正在运行，但它突然开始给我错误。它有一个工具栏和一个 ckeditor，您可以在其中输入不同类型的标题、段落、要点、添加表格、嵌入视频和图像以及其他一些内容。我添加了 ckeditor 代码的片段（我使用带有 Angular 的 ckeditor5）和突然失败的测试片段。据我所知，代码没有任何重大更改或升级

afterEach(() => {
     cy.get('ckeditor').find('div.ck-editor__editable').clear();
 });

    it('should type heading 1 and show it on the side', () => {
        cy.get('.ck-heading-dropdown').click();
        cy.get('.ck-list__item').contains('Heading 1').click();
        cy.intercept('PATCH', '**/endpoint').as('endpoint');
        cy.get('.ck-editor__editable').type('heading 1');
        cy.wait('@endpoint').then(xhr => {
          expect(xhr.response.body.data).to.include('<h1>heading1</h1>');
          expect(xhr.response.statusCode).to.equal(200);
        }); 
        // assert value showing on the side
        cy.get('[data-cy="display"] > ul > li')
          .should('contain.text', 'heading1');
    )}

我收到的错误是：

我查看了 cypress 建议的页面（https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html），但没有找到任何相关内容

我也尝试添加这个，但它没有任何作用：

    Cypress.on(
  'uncaught:exception',
  (err) => !err.message.includes('CKEditorError')
);

Answer 1

正如@andrewpm 在他的评论中提到的那样

这是 CKEditor5 中的一个已知错误

一些解决方案可以在 GitHub 上的问题跟踪器

中找到

我发现最简单的解决方案是使用

cypress-real-events

库，可以在 here for npm 找到该解决方案。我之前使用过这个库，成功解决了 Cypress 中的其他问题。

安装该依赖项后，与建议的其他一些解决方案相比，代码更改相当小；原文：

cy.get('.ck-editor__editable').type('heading 1');

该元素需要焦点才能使

realType

正常工作，因此您需要添加 focus 调用，然后只需将

type

命令更改为

realType

:

cy.get('.ck-editor__editable').focus().realType('heading 1');