使用Cypress测试GrapesJs编辑器时iframe内拖放块失败问题求助

前置配置 #

初始化GrapesJS时，测试环境下将编辑器实例暴露到全局window对象，方便后续调用：

// GrapesJS 初始化代码
const editor = grapesjs.init({
  // 你的业务配置项
})
// 仅测试环境暴露实例，生产环境可移除
if (process.env.NODE_ENV === 'test') {
  window.__GJS_EDITOR = editor
}

同时在Cypress的全局命令文件cypress/support/commands.js中封装获取GrapesJS画布iframe的命令：

Cypress.Commands.add('getGjsCanvas', () => {
  return cy.get('iframe.gjs-frame')
    .its('0.contentDocument.body')
    .should('not.be.empty')
    .then(cy.wrap)
})

方案1：模拟原生拖拽事件（完全对齐用户真实操作） #

GrapesJS的拖放逻辑完全依赖原生dragstart、dragover、drop事件，按以下步骤触发即可实现跨iframe拖放：

it('拖放自研组件至画布验证正常加载', () => {
  // 1. 定位左侧组件块元素，选择器按你实际DOM结构调整
  cy.get('.gjs-block[data-id="your-custom-component-id"]').as('dragBlock')
  // 2. 触发拖拽开始事件，模拟鼠标左键操作
  cy.get('@dragBlock').trigger('dragstart', {
    dataTransfer: new DataTransfer(),
    which: 1,
    force: true
  })
  // 3. 画布元素触发dragover事件，允许放置操作，坐标可自定义调整放置位置
  cy.getGjsCanvas().find('.gjs-cv-canvas').trigger('dragover', {
    dataTransfer: new DataTransfer(),
    force: true,
    clientX: 100,
    clientY: 100
  })
  // 4. 触发drop事件完成放置
  cy.getGjsCanvas().find('.gjs-cv-canvas').trigger('drop', {
    dataTransfer: new DataTransfer(),
    force: true,
    clientX: 100,
    clientY: 100
  })
  // 5. 触发dragend事件收尾
  cy.get('@dragBlock').trigger('dragend', { force: true })

  // 验证组件成功添加至画布
  cy.getGjsCanvas().find('.your-custom-component-class').should('exist')
})

方案2：调用GrapesJS API添加组件（适合快速验证组件功能） #

如果不需要严格模拟拖拽UI交互，仅验证组件在画布内的运行状态，可直接调用编辑器API添加组件，执行效率更高、稳定性更强：

it('验证自研组件在画布内正常运行', () => {
  cy.window().then(win => {
    const editor = win.__GJS_EDITOR
    // 直接添加指定类型的自研组件到画布
    const addedComp = editor.addComponents({
      type: 'your-custom-component-type' // 替换为你自研组件的注册类型
    })
    expect(addedComp).to.not.be.empty
  })
  // 验证组件渲染、交互逻辑
  cy.getGjsCanvas().find('.your-custom-component-class').should('be.visible')
})

异常排查 #

如果拖放操作未生效，优先检查两点：

• 确认待拖拽组件块的draggable属性为true，自定义块样式时不要覆盖该属性
• 旧版本GrapesJS需要在dragstart事件中传递组件ID才能识别，调整dragstart参数即可：

  cy.get('@dragBlock').trigger('dragstart', {
    dataTransfer: {
      setData: () => {},
      getData: () => 'your-custom-component-id'
    },
    which: 1,
    force: true
  })
  

内容的提问来源于stack exchange，提问作者Ahsan Ali