基于Node.js+Puppeteer提取带自定义指标的TradingView深色图表

核心问题原因 #

Puppeteer默认启动全新的无痕浏览器上下文，不会加载你手动配置的TradingView主题、指标等设置；另外，页面加载完成后可能需要等待自定义组件渲染完毕才能截图。

方案1：复用已配置的浏览器用户数据目录 #

这个方法最直接——先手动用Chrome打开TradingView，配置好深色主题、添加自定义指标，然后让Puppeteer复用这个Chrome的用户数据目录，直接加载已保存的设置。

步骤： #

1. 找到Chrome的用户数据目录：
   • Windows: C:\Users\<你的用户名>\AppData\Local\Google\Chrome\User Data
   • Mac: ~/Library/Application Support/Google/Chrome
   • Linux: ~/.config/google-chrome
2. 关闭所有Chrome窗口（避免占用目录）
3. 修改Puppeteer代码，指定userDataDir参数：

const puppeteer = require('puppeteer');

(async () => {
  // 替换为你的Chrome用户数据目录路径
  const userDataDir = '/Users/xxx/Library/Application Support/Google/Chrome';
  
  const browser = await puppeteer.launch({
    headless: false, // 先开无头模式调试，确认设置生效后再改成true
    userDataDir: userDataDir,
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
    slowMo: 100 // 可选，慢动作便于观察加载过程
  });

  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 720 });
  
  // 打开你已配置好的TradingView图表页面（比如收藏的自定义图表链接）
  await page.goto('https://www.tradingview.com/chart/xxxx/', {
    waitUntil: 'networkidle2', // 等待网络请求基本完成
    timeout: 60000 // 延长超时时间，确保图表加载完毕
  });

  // 额外等待自定义指标渲染（根据实际情况调整等待时间或选择器）
  await page.waitForSelector('.pane-legend-item', { timeout: 30000 }); // 等待指标图例出现
  await page.waitForTimeout(2000); // 再等待2秒确保样式稳定

  // 截图
  await page.screenshot({ path: 'tradingview-custom-chart.png', fullPage: false });

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

方案2：手动模拟用户操作设置主题和指标 #

如果不想复用用户目录，可以通过Puppeteer模拟点击操作，手动设置深色主题并添加自定义指标。

示例代码： #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
    slowMo: 100
  });

  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 720 });
  
  await page.goto('https://www.tradingview.com/chart/', {
    waitUntil: 'networkidle2',
    timeout: 60000
  });

  // 1. 切换深色主题
  await page.waitForSelector('.header-chart-button--theme');
  await page.click('.header-chart-button--theme');
  await page.waitForSelector('.tv-theme-selector__item--dark');
  await page.click('.tv-theme-selector__item--dark');
  await page.waitForTimeout(1000); // 等待主题切换生效

  // 2. 添加自定义指标（以RSI为例，替换为你的指标）
  await page.waitForSelector('.header-toolbar-indicators');
  await page.click('.header-toolbar-indicators');
  await page.type('.search-Hsmn_0WX', 'RSI'); // 搜索指标
  await page.waitForSelector('.apply-common-tooltip');
  await page.click('.apply-common-tooltip');
  await page.waitForTimeout(2000); // 等待指标加载渲染

  // 3. 等待图表稳定后截图
  await page.waitForSelector('.pane-legend-item');
  await page.screenshot({ path: 'tradingview-custom-chart-manual.png' });

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

注意：TradingView的DOM选择器可能会更新，需要用DevTools查看最新的选择器。

方案3：登录TradingView账号同步设置 #

如果你的自定义指标和主题是保存在TradingView账号里的，可以模拟登录操作，加载云端的设置：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });

  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 720 });
  
  await page.goto('https://www.tradingview.com/chart/', { waitUntil: 'networkidle2' });

  // 点击登录按钮
  await page.waitForSelector('.tv-header__login');
  await page.click('.tv-header__login');

  // 输入账号密码（替换为你的账号）
  await page.waitForSelector('.tv-signin-dialog__social.tv-signin-dialog__toggle-email');
  await page.click('.tv-signin-dialog__social.tv-signin-dialog__toggle-email');
  await page.type('.tv-control-input__input', 'your-email@example.com');
  await page.type('.tv-control-input__input[type="password"]', 'your-password');
  await page.click('.tv-button.tv-button--primary.tv-button--no-border-radius.tv-button--size-large.tv-button--full-width');

  // 等待登录完成，图表加载自定义设置
  await page.waitForNavigation({ waitUntil: 'networkidle2' });
  await page.waitForTimeout(3000);

  await page.screenshot({ path: 'tradingview-logged-in-chart.png' });

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

调试技巧 #

• 先开启headless: false模式，直观观察页面加载和操作过程，排查哪里出错
• 使用page.on('console', msg => console.log(msg.text()))监听页面控制台输出，查看是否有报错
• 用page.waitForSelector()等待关键元素，避免过早截图
• 延长timeout时间，确保复杂图表有足够加载时间

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