Protractor的browser.executeScript对应Playwright等效实现：修改Monaco编辑器内容

核心等效写法 #

你之前在Protractor中通过browser.executeScript执行页面脚本的逻辑，在Playwright中对应使用page.evaluate方法实现，等效代码如下：

const someJavaScriptCode = `需要写入Monaco编辑器的JS代码内容`;

// 等待Monaco加载完成，避免访问报错
await page.waitForFunction(() => window.monaco?.editor);

// 执行页面逻辑修改Monaco内容
await page.evaluate((code) => {
  window.monaco.editor.getModel(monaco.Uri.parse("")).setValue(code);
}, someJavaScriptCode);

和原Protractor拼接字符串的写法相比，Playwright支持直接通过page.evaluate的第二个参数往页面JS上下文传参，不需要手动拼接代码字符串，规避了特殊字符导致的语法报错问题，安全性和兼容性更好。

通用兼容写法 #

如果你的场景下Monaco实例的Uri不是空串，或者页面存在多个Monaco实例，可以直接获取当前活跃的编辑器实例修改内容，兼容性更强：

await page.waitForFunction(() => window.monaco?.editor);

await page.evaluate((code) => {
  const activeEditor = window.monaco.editor.getActiveEditor();
  // 确保编辑器实例存在再操作
  if (activeEditor) {
    activeEditor.getModel().setValue(code);
  }
}, someJavaScriptCode);

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