Angular项目中用Cypress向ngx-monaco-editor-v2输入文本的最优方案

针对Angular项目中用ngx-monaco-editor-v2@17.0.1集成的Monaco编辑器，在Cypress端到端测试中高效输入带格式文本的需求，推荐以下几种方案：

方案一：直接调用Monaco编辑器API（最优解） #

绕过模拟用户输入，直接通过Monaco的实例API设置内容，完全保留文本格式，且效率最高。

实现步骤： #

1. 等待编辑器加载完成，确保Monaco实例已初始化
2. 获取目标编辑器实例，调用setValue设置文本
3. 可选：触发编辑器的变更事件，确保Angular组件同步值

// 等待编辑器可见，且Monaco全局对象已加载
cy.get('ngx-monaco-editor').should('be.visible');
cy.window().should('have.property', 'monaco');

// 获取编辑器实例并设置内容
cy.window().then((win) => {
  // 若页面只有一个编辑器，直接取第一个实例
  const editor = win.monaco.editor.getEditors()[0];
  if (editor) {
    // 传入带格式的目标文本（比如包含换行符的JSON）
    editor.setValue(yourFormattedText);
    // 触发变更事件，确保组件绑定的表单值同步更新
    editor.trigger('cypress-test', 'change');
  }
});

如果编辑器绑定了Angular的FormControl，也可以直接操作表单控件赋值：

cy.get('ngx-monaco-editor')
  .invoke('ngControl')
  .invoke('setValue', yourFormattedText);

方案二：模拟粘贴操作（贴近真实用户场景） #

若需要模拟用户粘贴的真实操作，可通过Cypress模拟剪贴板写入并触发粘贴事件，同时规避浏览器剪贴板限制。

实现步骤： #

1. 聚焦编辑器输入框
2. 模拟写入剪贴板内容
3. 触发粘贴事件或快捷键

cy.get('.monaco-editor textarea')
  .focus()
  .then(($textarea) => {
    const targetText = yourFormattedText;
    // 写入剪贴板
    cy.window().then((win) => {
      win.navigator.clipboard.writeText(targetText);
    });
    // 触发粘贴事件
    $textarea[0].dispatchEvent(new ClipboardEvent('paste', {
      clipboardData: new DataTransfer(),
      bubbles: true,
      cancelable: true
    }));
    // 或用快捷键触发（根据系统选择）
    // cy.get('.monaco-editor').type('{ctrl}v'); // Windows/Linux
    // cy.get('.monaco-editor').type('{meta}v'); // Mac
  });

剪贴板权限配置 #

若遇到浏览器剪贴板权限限制，可在cypress.config.js中添加启动参数：

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser, launchOptions) => {
        if (browser.family === 'chromium') {
          launchOptions.args.push('--allow-clipboard-access');
          launchOptions.args.push('--unsafely-treat-insecure-origin-as-secure=http://localhost:4200'); // 替换为你的测试地址
        }
        return launchOptions;
      });
    },
  },
};

方案三：优化原生输入（适合模拟真实键盘操作） #

如果必须模拟键盘输入，可将文本中的换行符替换为Cypress的{enter}指令，同时关闭输入延迟提升效率：

// 将文本中的换行符替换为Cypress的enter指令
const inputText = yourFormattedText.replace(/\n/g, '{enter}');

cy.get('.monaco-editor textarea')
  .focus()
  .clear()
  .type(inputText, { delay: 0 }); // 取消输入延迟，提高速度

方案对比 #

内容的提问来源于stack exchange，提问作者Phil Jollans