如何使用Puppeteer与Notion导出弹窗中的元素交互？

你的问题核心是用了动态生成的XPath和ID（比如#id_86、绝对路径XPath），这些值每次刷新页面都会变化，导致无法稳定定位元素。另外需确保等待弹窗完全渲染后再执行操作。以下是修正后的方案：

关键修正点 #

• 抛弃绝对XPath和动态ID，改用基于文本内容或语义化属性的稳定选择器
• 每个操作前用waitForSelector确保元素可见且可交互

修正后的完整代码 #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080 });

  // 登录流程（保留你的原有逻辑）
  await page.goto('https://www.notion.so/');
  await page.waitForSelector('text/Log in');
  await page.click('text/Log in');
  
  const emailInput = await page.waitForSelector('#notion-email-input-1');
  await emailInput.type("mymail");
  await page.click('text/Continue with email');
  
  await page.waitForSelector('#notion-password-input-2');
  await page.type('#notion-password-input-2', 'mypass');
  await page.click('text/Continue with password');

  // 打开导出弹窗
  await page.waitForSelector('div.notion-topbar-more-button');
  await page.click('div.notion-topbar-more-button');
  await page.waitForSelector('text/Export');
  await page.click('text/Export');

  // 点击弹窗中的「Current view」选项
  await page.waitForSelector('text/Current view');
  await page.click('text/Current view');

  // 选择下拉菜单中的目标选项（此处示例为「Everything」，可替换为你需要的选项）
  await page.waitForSelector('text/Everything');
  await page.click('text/Everything');

  // 点击弹窗底部的确认导出按钮
  await page.waitForSelector('div.notion-modal-button[type="primary"]');
  await page.click('div.notion-modal-button[type="primary"]');

  // 等待导出完成（根据文件大小调整延迟时长）
  await new Promise(resolve => setTimeout(resolve, 15000));

  await browser.close();
})();

额外说明 #

• 如果text/Current view定位到多个元素，可结合弹窗容器缩小范围，比如：div.notion-modal-content text/Current view
• 若Notion UI更新导致选择器失效，可通过Chrome开发者工具（F12）右键元素复制选择器，但优先选择包含固定文本/语义属性的选择器，避免依赖动态生成的ID或绝对路径

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