puppeteer 教程（5） ----入門例子（爬取csdn文章列表標題）

目標

爬取csdn文章列表標題

主要學習以下知識點

方法名稱	方法說明
page.waitForSelector	等待某個元素出現
page.$$eval	此方法在頁面內執行 Array.from(document.querySelectorAll(selector))，然後把匹配到的元素數組作爲第一個參數傳給 pageFunction

詳細api 可參考
https://blog.csdn.net/mengxiangxingdong/article/details/99237204

開始

本文章代碼均在 上傳在
https://gitee.com/hugo110/puppeteer-demo

1.代碼

/*
爬取csdn 博客的文章的標題
 */
const puppeteer = require('puppeteer'); //引入puppeteer庫

(async () => {
    const browser = await puppeteer.launch({    //啓動瀏覽器
        headless: false,   //代碼運行時打開瀏覽器方便觀察
        // devtools:true   //打開f12界面
    });
    const page = await browser.newPage();  //打開瀏覽器的一個tab 頁
    await page.goto('https://blog.csdn.net/mengxiangxingdong', {timeout: 10 * 1000, waitUntil: 'networkidle2'});  //訪問網址 只有2個網絡連接時觸發（至少500毫秒後）
    //等待某個元素出現，  這裏我們要抓取文章，所以等待文章標題
    await page.waitForSelector('.article-list h4  a', {timeout: 10 * 1000});

    //開始解析每篇文章的標題
    //$$eval() 此方法在頁面內執行 Array.from(document.querySelectorAll(selector))，然後把匹配到的元素數組作爲第一個參數傳給 pageFunction。
    let titleArr = await page.$$eval('.article-list h4  a', els => {
        let arr = new Array();
        //開始解析每篇文章的標題
        for (let i = 0, len = els.length; i < len; i++) {
            arr.push(els[i].innerText); //獲取文章的標題
        }
        return arr;
    });
    // 輸出獲取的標題
    await  console.log('輸出方法獲取的標題');
    for (let i = 0, len = titleArr.length; i < len; i++) {
        await console.log(titleArr[i]);
    }
    await browser.close();  //關閉瀏覽器
})();

參考博客

https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v1.19.0&show=api-pageevalselector-pagefunction-args-1