Puppeteer 在 headless 模式下不会 return 一个 HTML 标签，但当它不在 headless 模式下时会 - 这是为什么？

Question

我最近开始在 JavaScript 中尝试使用 Puppeteer 进行网络抓取，并注意到当我运行我的代码使用无头 Puppeteer 实例时，它不会 return 标签我正在寻找但会 return []。然而，当无头模式关闭时，代码 returns 标签就好了。它return的标签是

[ ElementHandle {
    _context:
     ExecutionContext { _client: [CDPSession], _world: [DOMWorld], _contextId: 3 },
    _client:
     CDPSession {
       _events: [Object],
       _eventsCount: 27,
       _maxListeners: undefined,
       _callbacks: Map {},
       _connection: [Connection],
       _targetType: 'page',
       _sessionId: '6950CA7711045DA500204C2EFDAFC5B3' },
    _remoteObject:
     { type: 'object',
       subtype: 'node',
       className: 'HTMLHeadingElement',
       description: 'h1',
       objectId: '{"injectedScriptId":3,"id":3}' },
    _disposed: false,
    _page:
     Page {
       _events: {},
       _eventsCount: 0,
       _maxListeners: undefined,
       _closed: false,
       _client: [CDPSession],
       _target: [Target],
       _keyboard: [Keyboard],
       _mouse: [Mouse],
       _timeoutSettings: [TimeoutSettings],
       _touchscreen: [Touchscreen],
       _accessibility: [Accessibility],
       _networkManager: [NetworkManager],
       _frameManager: [FrameManager],
       _emulationManager: [EmulationManager],
       _tracing: [Tracing],
       _pageBindings: Map {},
       _ignoreHTTPSErrors: false,
       _coverage: [Coverage],
       _javascriptEnabled: true,
       _viewport: [Object],
       _screenshotTaskQueue: [TaskQueue],
       _workers: Map {} },
    _frameManager:
     FrameManager {
       _events: [Object],
       _eventsCount: 3,
       _maxListeners: undefined,
       _client: [CDPSession],
       _page: [Page],
       _networkManager: [NetworkManager],
       _timeoutSettings: [TimeoutSettings],
       _frames: [Map],
       _contextIdToContext: [Map],
       _isolatedWorlds: [Set],
       _mainFrame: [Frame] } } ]

我曾尝试使用 await page.goto(url, {"waitUntil" : "networkidle0"}); 让程序等到页面完全加载后再 return 添加标签，但还是没有成功。这是我的功能失调代码：

const initializeBrowserTask = async (proxy) => {
  console.log("Initializing browser task...");
  if (proxy == '') {
    console.log('No proxy.')
    const browser = await puppeteer.launch({ headless: false });
    return browser;
  } else {
    const browser = await puppeteer.launch({
      'args': ['--proxy-server=`${proxy}`']
    });
    console.log("Proxy: `${proxy}`")
    return browser;
  };

}

const browserTask = async (proxy, url) => {
  const browser = await initializeBrowserTask(proxy);
  let check = 0
  const page = await browser.newPage();
  console.log('Running...')
  await page.goto(url);
  console.log("Arrived at URL!")
  let status = await page.$x('//*[@id="app"]/div[1]/div/div[1]/h1');
  console.log(status)


};

browserTask('', 'http://adidas.com/yeezy')

我确实删除了之前提到的 {"waitUntil" : "networkidle0"}，因为它没有解决问题。出于某种原因，此代码在浏览器不是无头时有效，但在无头时会 return [] 。为什么会出现此问题，我该如何解决？

Answer 1

刚刚弄清楚我的代码出了什么问题。显然，我试图抓取的网站 (adidas.com) 过滤掉了基于 headers 的请求。我没有意识到的是，在无头模式下，我实际上到达了 Adidas 的 403 Access Denied 页面，这就是为什么我要查找的标签是 non-existent。我猜 headless puppeteer 只是发送 HTTP 请求的另一种方式，而 non-headless 更像是一个实际的网络驱动程序，这就是为什么 non-headless 模式没有被 Adidas 阻止的原因。

为了修复无头模式并添加适当的 headers，我在 `page.goto(url);' 之前使用了这行代码行：

await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36');

事实证明，我只缺少 headers 来欺骗阿迪达斯网站不阻止我。

Puppeteer 在 headless 模式下不会 return 一个 HTML 标签，但当它不在 headless 模式下时会 - 这是为什么？

Puppeteer won't return an HTML tag in headless mode but will when it is not in headless mode - why is this?

javascript

node.js

web-scraping

puppeteer