使用Puppeteer编写网页爬虫时返回URL无结果的问题排查

核心问题1：异步函数调用未使用await #

BrowserTool是异步函数，直接调用会返回Promise对象而非实际结果。必须用await获取返回值，同时需将调用逻辑放在异步函数中（或用.then()处理）。

核心问题2：模板字符串语法错误 #

你用单引号包裹${ingredient}，这会被当作普通字符串无法解析变量，必须改用反引号（`）。

核心问题3：数组遍历方式错误 #

for...in遍历数组会拿到索引（如"0"）而非数组元素，应该用for...of或数组join方法直接拼接。

其他潜在问题 #

• 未导入puppeteer，代码会报错puppeteer is not defined
• 搜索结果选择器#mod-site-search-results-1是整个结果容器，点击它不会跳转到首个结果，需定位到具体链接元素

修正后的完整代码 #

import puppeteer from 'puppeteer'; // 必须导入puppeteer

const BrowserTool = async(props, websiteNum) => {
    const browser = await puppeteer.launch({ headless: "new" }); // 新版puppeteer推荐使用该无头模式
    const page = await browser.newPage();
    await page.goto(props.websites[websiteNum]);

    await page.setViewport({width: 1080, height: 1024});
    
    // 用join直接拼接数组元素，简洁高效
    const ingredients = props.ingredients.join(' ');
    await page.type('#typeaheadinput', ingredients);
    await page.keyboard.press('Enter');
    
    // 等待首个搜索结果链接加载完成
    const firstResultSelector = '#mod-site-search-results-1 a.m-MediaBlock__a-Anchor';
    await page.waitForSelector(firstResultSelector);
    
    // 直接获取首个结果的URL，无需跳转后再取当前页面地址
    const url = await page.$eval(firstResultSelector, el => el.href);
    
    await browser.close();
    return url;
};

export default BrowserTool;

// 正确调用异步函数的方式
(async () => {
    let object = {ingredients: ["chicken breast"], websites: ["https://www.foodnetwork.com/"]};
    let returnString = await BrowserTool(object, 0);
    console.log(returnString);
})();

关键修正点说明 #

1. 补充puppeteer导入：确保代码能正常调用puppeteer API
2. 修复异步调用逻辑：用自执行异步函数包裹调用代码，通过await拿到实际返回值
3. 优化数组拼接：用join替代错误的遍历方式，避免变量解析问题
4. 精准定位搜索结果：直接获取首个结果链接的href属性，比跳转后取URL更可靠高效
5. 更新无头模式配置：适配新版puppeteer的推荐设置，提升兼容性

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