Puppeteer Scrapper Example

example.js

const puppeteer = require("puppeteer");

// scrapeResults 會將頁面上的結果元素統整出我們要的資料結構。
async function scrapeResults(page) {
    return await page.evaluate(() =>
        Array.from(document.querySelectorAll(".section-result"), function (e) {
            return {
                // title 是店家標題。
                title: e.querySelector(".section-result-title")?.textContent,
                // rating 是店家評分。
                rating: e.querySelector(".cards-rating-score")?.textContent,
                // location 是店家營業地址概要。
                location: e.querySelector(".section-result-location")?.textContent,
                // details 是店家的詳細資料，可能是食品分類。
                details: e.querySelector(".section-result-details")?.textContent,
                // opening_hours 是營業時間。
                opening_hours: e
                    .querySelector(".section-result-opening-hours") // 清除不必要的符號與空白
                    ?.textContent.replace(/^ /, "")
                    .replace(/( |·)+$/, ""),
            };
        })
    );
}

(async () => {
    // 初始化一個瀏覽器。
    const browser = await puppeteer.launch();
    // 建立新的頁面。
    const page = await browser.newPage();
    // 前往 Google Map，把自己定位在台北 101。
    await page.goto("https://www.google.com.tw/maps/@25.0341242,121.5630288,18z");

    /**
     * 動作
     */

    // 在搜尋欄位輸入「小吃」。
    await page.type("#searchboxinput", "小吃");
    // 在搜尋欄位按下 Enter，並且等待事件發生。
    await (await page.$("#searchboxinput")).press("Enter");
    // 等待頁面直到搜尋結果元素出現。
    await page.waitForSelector(".section-result");
    // 擷取頁面上的結果元素。
    (await scrapeResults(page)).forEach(result => {
        console.log(result);
    });

    /**
     * 換頁
     */

    console.log("已經爬取完畢，換頁。");

    // 等待「下一頁」的按鈕出現在頁面上。
    await page.waitForSelector(`button[aria-label="下一頁"]`);
    // 點擊「下一頁」按鈕。
    await page.click(`button[aria-label="下一頁"]`);
    // 強制等待 3000 毫秒（應該有更可靠的寫法，尚未研究）。
    await page.waitForTimeout(3000);
    // 擷取頁面上的結果元素。
    (await scrapeResults(page)).forEach(result => {
        console.log(result);
    });

    /**
     * 結束
     */

    // 照張螢幕截圖，哈囉世界！
    await page.screenshot({ path: "google.png" });
    // 關閉瀏覽器。
    await browser.close();
})();

output

{
  title: '小凱悅南村小吃店',
  rating: '3.7',
  location: '莊敬路178巷14號',
  details: '熟食店',
  opening_hours: '於 下午12:00 營業'
}
{
  title: '品味滋優小吃店',
  rating: '3.8',
  location: '吳興街15號',
  details: '熟食店',
  opening_hours: ''
}
{
  title: '蘭香排骨飯',
  rating: '3.6',
  location: '吳興街11號',
  details: '熟食店',
  opening_hours: '營業至 下午2:00'
}
{
  title: '阿香越南小吃',
  rating: '4.0',
  location: '臨江街22號',
  details: '熟食店',
  opening_hours: '於 上午11:30 營業'
}
{
  title: '58食堂 燒魯肉飯便當',
  rating: '4.7',
  location: '基隆路一段350-31號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '劉記客家小吃',
  rating: '4.1',
  location: '忠孝東路四段559巷16弄36號',
  details: '熟食店',
  opening_hours: ''
}
{
  title: '金饗台灣小吃',
  rating: '4.4',
  location: '安和路二段69巷26號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '阿銘師雞肉飯',
  rating: '3.9',
  location: '吳興街69號',
  details: '熟食店',
  opening_hours: '營業至 下午8:00'
}
{
  title: '南村小吃店',
  rating: '3.7',
  location: '莊敬路423巷8弄14號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '正德小吃店',
  rating: '4.0',
  location: '忠孝東路四段553巷10號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '林員肉圓',
  rating: '1.0',
  location: '松壽路11號',
  details: '熟食店',
  opening_hours: ''
}
{
  title: '北港小吃',
  rating: '3.9',
  location: '松山路540巷2之3號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '萬香齋台南米糕 光復店',
  rating: '4.1',
  location: '光復南路290巷45號',
  details: '熟食店',
  opening_hours: '於 上午11:30 營業'
}
{
  title: '1973繼光香香雞',
  rating: '3.3',
  location: '松壽路12號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '陸光小吃館',
  rating: '4.0',
  location: '東豐街63號',
  details: '熟食店',
  opening_hours: ''
}
{
  title: '通化肉圓',
  rating: '4.3',
  location: '通化街39巷7號',
  details: '熟食店',
  opening_hours: '營業至 下午10:00'
}
{
  title: '東門甜不辣',
  rating: '4.2',
  location: '忠孝東路四段216巷32弄3號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '米粉湯',
  rating: '4.3',
  location: '莊敬路325巷40號',
  details: '熟食店',
  opening_hours: ''
}
{
  title: '今頂小吃',
  rating: '4.2',
  location: '忠孝東路四段77巷28號',
  details: '熟食店',
  opening_hours: '於 上午11:30 恢復營業'
}
{
  title: '鄉村小吃',
  rating: '3.8',
  location: '安和路二段186號',
  details: '熟食店',
  opening_hours: '營業至 下午8:00'
}
已經爬取完畢，換頁。
{
  title: '小吃麵攤',
  rating: '3.8',
  location: '松山路540巷1號',
  details: '熟食店',
  opening_hours: '於 下午12:00 營業'
}
{
  title: '鄭記四神湯',
  rating: '4.0',
  location: '臨江街40巷81號',
  details: '熟食店',
  opening_hours: '於 下午5:30 營業'
}
{
  title: '辣八巷',
  rating: '4.7',
  location: '吳興街8巷3號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '賽門鄧普拉新光信義店',
  rating: '3.7',
  location: '松壽路11號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '業葉小吃店・髮菜蟹肉羹',
  rating: '4.9',
  location: '松山路615巷6號',
  details: '熟食店',
  opening_hours: '營業至 下午2:00'
}
{
  title: '好餓哦 美食館',
  rating: '4.2',
  location: '逸仙路26巷7之1號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '(高太太)古早味小吃攤',
  rating: '3.7',
  location: '和平東路三段308巷2號',
  details: '熟食店',
  opening_hours: '於 下午4:00 營業'
}
{
  title: '非常好吃蔥抓餅',
  rating: '3.5',
  location: '忠孝東路四段216巷19弄2號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '老味道珍珠餛飩',
  rating: '3.6',
  location: '通化街49號',
  details: '熟食店',
  opening_hours: '營業至 下午11:30'
}
{
  title: '麗如小吃店',
  rating: '4.2',
  location: '瑞安街67號',
  details: '熟食店',
  opening_hours: '於 上午11:30 營業'
}
{
  title: '大福小吃店',
  rating: '4.4',
  location: '臥龍街72號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '無名鹽酥雞',
  rating: '4.3',
  location: '光復南路419巷89號',
  details: '熟食店',
  opening_hours: '於 下午5:30 營業'
}
{
  title: '芝香雞肉飯/芝香涼麵',
  rating: '4.0',
  location: '忠孝東路五段143號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '無名小吃店',
  rating: '4.7',
  location: '南京東路四段133巷5號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '萬華梧州街原汁排骨湯 吳興店',
  rating: '4.3',
  location: '吳興街28號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '年美小吃',
  rating: '4.3',
  location: '建國南路一段280號',
  details: '熟食店',
  opening_hours: '營業至 下午10:00'
}
{
  title: '豪野家蜜糖千層鯛魚燒',
  rating: '4.0',
  location: '松壽路12號',
  details: '熟食店',
  opening_hours: '於 上午11:00 營業'
}
{
  title: '素燥',
  rating: '4.5',
  location: '信義路四段355號',
  details: '熟食店',
  opening_hours: ''
}
{
  title: '東引小吃店 (捷運南京三民站)',
  rating: '4.0',
  location: '南京東路五段291巷20弄3號',
  details: '熟食店',
  opening_hours: '於 下午12:00 營業'
}
{
  title: '顏午許小吃店',
  rating: '4.9',
  location: '松山路292號',
  details: '熟食店',
  opening_hours: '營業至 下午8:00'
}

google.png