基于Puppeteer+Node.js的Facebook爬虫如何实现按位置筛选企业页面

Facebook的前端基于React这类框架实现，直接操作DOM属性（比如value或focus()）无法触发框架内部的状态更新，必须模拟真实用户的交互流程才能激活筛选框并完成位置筛选。下面是可行的实操步骤：

1. 等待筛选容器加载完成
   先确保页面渲染出aria-label为"Location"的元素，用Puppeteer的waitForSelector等待元素可见：

   await page.waitForSelector('[aria-label="Location"]', { visible: true, timeout: 10000 });
   

2. 激活输入交互状态
   多数情况下aria-label标记的是筛选框的外层容器，真正的输入框嵌套在内部。先点击容器触发激活，再定位到内部的真实输入元素：

   // 点击容器触发输入框激活
   await page.click('[aria-label="Location"]');
   // 等待内部输入框渲染完成
   await page.waitForSelector('[aria-label="Location"] input', { visible: true });
   

3. 模拟真实输入位置内容
   不要直接修改value属性，用Puppeteer的type方法模拟用户打字输入，触发框架监听的input事件：

   await page.type('[aria-label="Location"] input', 'Texas', { delay: 80 }); // 延迟模拟真实打字速度
   

4. 选择自动补全的位置选项
   Facebook的位置筛选带自动补全功能，输入后必须选择下拉列表中的选项才能触发筛选逻辑：

   // 等待下拉建议列表出现
   await page.waitForSelector('[role="listbox"] [role="option"]', { visible: true });
   // 选择第一个匹配的位置选项
   await page.click('[role="listbox"] [role="option"]:first-child');
   

5. 等待筛选结果加载完成
   选择位置后页面会重新渲染筛选结果，等待页面状态稳定后再抓取数据：

   // 等待网络请求趋于稳定，确保结果加载完成
   await page.waitForNavigation({ waitUntil: 'networkidle2' });
   

为什么之前的方法无效？ #

Facebook的前端框架会维护独立的内部状态，直接修改DOM的value属性不会同步到框架状态，自然无法触发筛选逻辑。只有通过模拟用户的点击、输入、选择等真实交互，才能触发框架监听的事件链，让筛选功能正常工作。

另外需确保你的Puppeteer实例已登录Facebook，未登录状态下部分筛选功能可能被限制。

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