如何使用Playwright在Monaco Editor中插入代码？

嘿，我之前也碰到过这个难题！Monaco Editor不像普通输入框那样直接用fill()就能搞定，不过有两个实用的方法可以实现代码插入，我给你一步步讲清楚：

方法一：直接调用Monaco的API（推荐，高效稳定） #

Monaco Editor会把编辑器实例暴露在浏览器的全局环境里，我们可以通过page.evaluate()在浏览器端执行代码，直接操作实例设置内容。这种方法适合大段代码，而且不会有模拟输入的延迟问题。

修改你的测试代码如下：

async ({ page }) => { 
  const testPage= new TestPage(page); 
  await testPage.navigateTo(); 
  
  // 等待编辑器容器加载完成
  await page.waitForSelector('#monaco-editor-selector'); 
  
  // 确保Monaco实例已经初始化完成（可选但推荐）
  await page.waitForFunction(() => {
    return window.monaco && window.monaco.editor.getEditors().length > 0;
  });

  // 插入目标代码
  const targetCode = `function calculateSum(a, b) {
  return a + b;
}`;

  await page.evaluate((code) => {
    // 获取第一个编辑器实例（如果页面只有一个编辑器的话）
    const editor = window.monaco.editor.getEditors()[0];
    if (editor) {
      // 设置编辑器内容
      editor.setValue(code);
      // 触发change事件，确保页面感知到内容更新（部分场景需要）
      editor.trigger('custom-trigger', 'change', {});
    }
  }, targetCode);
}

小提示： #

如果getEditors()[0]找不到你的编辑器，可能是页面里有多个编辑器，或者实例被存在了特定变量里。你可以打开浏览器开发者工具，在Console里输入window.monaco.editor.getEditors()看看实例列表，或者找页面初始化编辑器的代码（比如const myEditor = monaco.editor.create(...)），然后在page.evaluate()里用window.myEditor.setValue(code)来操作。

方法二：模拟真实用户输入（适合简单场景） #

如果不想直接操作API，也可以模拟用户聚焦编辑器、全选原有内容、输入新代码的流程，和真实操作完全一致：

async ({ page }) => { 
  const testPage= new TestPage(page); 
  await testPage.navigateTo(); 
  
  const editorLocator = page.locator('#monaco-editor-selector');
  await editorLocator.waitFor();
  
  // 点击编辑器聚焦
  await editorLocator.click();
  // 全选现有内容（如果有的话）
  await page.keyboard.press('Control+A');
  // 输入新代码
  await page.keyboard.type(`function hello() {
  console.log("Hello from Playwright!");
}`);
}

这种方法的好处是完全模拟用户行为，但输入大段代码时会比较慢，适合短代码片段的测试场景。

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