使用Cypress.IO在CKeditor 4上设置数据

Question

我正在使用 cypress 来自动化我的项目。我有CKeditor4。 所以我尝试下面的代码在 CKEditor 中输入，因为 cypress 中的

type

方法非常慢

it('does work2', async() => {
        cy.visit('https://ckeditor.com/ckeditor-4/demo/')

        cy.get('#cke_1_contents iframe[title="Editor, ckdemoarticle"]').then(async(el)=>{
            const body = await el.contents().find("body")[0];
            // @ts-ignore
            const editor = body.ckeditorInstance;
            editor.setData("<p>'Typing some stuff'</p>")
        });
}

但是我可以在控制台上看到以下错误

    Unhandled rejection TypeError: Cannot read properties of undefined (reading 'setData')  
at eval (https://ckeditor.com/__cypress/tests?p=cypress\e2e\test.cy.ts:75:36)  
 at step (https://ckeditor.com/__cypress/tests?p=cypress\e2e\test.cy.ts:43:23)   
 at Object.eval [as next] (https://ckeditor.com/__cypress/tests?p=cypress\e2e\test.cy.ts:24:53)    
at fulfilled (https://ckeditor.com/__cypress/tests?p=cypress\e2e\test.cy.ts:15:58)From previous event:    
at Promise.longStackTracesCaptureStackTrace [as _captureStackTrace] (https://ckeditor.com/__cypress/runner/cypress_runner.js:3486:19)    
at Promise._then (https://ckeditor.com/__cypress/runner/cypress_runner.js:1239:17)

我意识到

ckeditorInstance

在CKEditor4中不可用。

尝试了互联网上所有可用的方法，但在 Cypress.IO 中找不到解决方案。

那么如何使用cypress代码使用

setData

方法

Answer 1

我认为这并不完全可靠，但这是一个合理的起点。

cy.visit('https://ckeditor.com/ckeditor-4/demo/')

// Note 1
cy.window()
  .its('CKEDITOR.instances.ckdemoarticle', { timeout: 10_000 })
  .should('exist')

// Note 2
cy.get('iframe')
  .eq(0)
  .its('0.contentDocument.body')
  .should('contain', 'Essential things to think about')

// Note 3
cy.window().then(win => {
  console.log(win.CKEDITOR.instances.ckdemoarticle)
  win.CKEDITOR.instances.ckdemoarticle.setData(
    '<p>Some other editor data.</p>',
    {
      callback: function () {
        console.log('callback', this.checkDirty())
        this.checkDirty() // true
      },
    }
  )
})

// Note 4
cy.get('iframe')
  .eq(0)
  .its('0.contentDocument.body')
  .should('contain', 'Some other editor data')

注释

1. 等待实例存在（访问后）

2. 验证当前内容 - 调用之前似乎需要

   setData()

   ，也许只是将编辑器置于活动模式（单击也可能有效）

3. 调用

   setData()

   方法。请注意，不同页面的实例名称

   ckdemoarticle

   会有所不同。

4. 验证新文本，如果没有其他原因，只是为了防止测试在应用程序重新渲染编辑器之前终止。

我还没有机会探索所有方面，但这似乎是一个很好的开始测试。