puppeteer 教程（5） ----入门例子（爬取csdn文章列表标题）

Myth丶恋晨 2021-11-01 13:48 321阅读 0赞

## 目标 ##

爬取csdn文章列表标题

#### 主要学习以下知识点 ####

<table> 
 <thead> 
  <tr> 
   <th>方法名称</th> 
   <th>方法说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>page.waitForSelector</td> 
   <td>等待某个元素出现</td> 
  </tr> 
  <tr> 
   <td>page.$$eval</td> 
   <td>此方法在页面内执行 Array.from(document.querySelectorAll(selector))，然后把匹配到的元素数组作为第一个参数传给 pageFunction</td> 
  </tr> 
 </tbody> 
</table>

详细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