使用Playwright自动化MetaMask扩展时点击按钮超时、无法操作backgroundPage求助

选择器等待超时核心原因 #

• 页面归属错误：MetaMask 的欢迎页、交互弹窗等可见UI都属于扩展的前台渲染页面，不是后台页面。backgroundPage是Chrome扩展的无UI后台服务页，仅用于运行后台逻辑、监听事件，不存在任何DOM元素，因此在后台页查找UI选择器必然超时。
• 扩展加载时机错误：直接通过browserContext.backgroundPages()[0]同步获取后台页不可靠，扩展加载需要时间，触发后台页创建事件存在延迟，直接取数组大概率拿到空值。
• 选择器适配问题：不同版本MetaMask的DOM类名可能存在差异，.btn-primary不是固定通用选择器，需要手动打开MetaMask页面检查当前版本的实际元素属性。

backgroundPage 正确操作方式 #

backgroundPage 仅用于操作扩展的后台逻辑，比如读取后台存储、调用后台暴露的方法、监听后台事件，不能用于UI交互。正确获取方式如下：

// 等待backgroundPage加载完成事件，避免同步取数组为空的问题
const backgroundPage = await browserContext.waitForEvent('backgroundpage');
// 示例：获取扩展ID，后续用于打开MetaMask前台页面
const extensionId = backgroundPage.url().split('/')[2];

正确点击Get Started按钮实现代码 #

你需要先打开MetaMask的前台交互页面，再执行点击操作：

(async () => {
  const pathToExtension = require('path').join(__dirname, 'my-extension');
  const userDataDir = '/tmp/test-user-data-dir';
  const browserContext = await chromium.launchPersistentContext(userDataDir,{
    headless: false,
    args: [
      `--disable-extensions-except=${pathToExtension}`,
      `--load-extension=${pathToExtension}`
    ]
  });
  // 等待后台页加载，获取扩展ID
  const backgroundPage = await browserContext.waitForEvent('backgroundpage');
  const extensionId = backgroundPage.url().split('/')[2];
  // 打开MetaMask前台欢迎页，路径不对可手动打开扩展确认实际路径
  const mmPage = await browserContext.newPage();
  await mmPage.goto(`chrome-extension://${extensionId}/home.html`);
  // 等待按钮加载完成后点击
  await mmPage.click('.btn-primary', { timeout: 10000 });

  await browserContext.close();
})();

额外注意事项 #

• 如果使用Headless模式运行，需要将headless参数设置为"new"，旧版Headless模式不支持扩展加载。
• 如果打开home.html没有出现Get Started按钮，可以替换为MetaMask的欢迎页路径，比如welcome.html等。

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