avatar

Puppeteer爬取Github指北

• #前端#node.js

介绍

puppeteer 是一个Chrome官方出品的headless Chrome node库。它提供了一系列的API, 可以在无UI的情况下调用Chrome的功能, 适用于爬虫、自动化处理等各种场景。

使用

安装

npm install puppeteer-chromium-resolver --save

生成/关闭浏览器

 const browser = await (puppeteer.launch({
        args: ['--no-sandbox', 
        '--disable-setuid-sandbox'],
        //如果是访问https页面 此属性会忽略https错误
        ignoreHTTPSErrors: true,
        headless: true, //改为true则是无头模式，不显示浏览器，在无界面的环境中运行 Chrome
  }));

  //关闭
  browser.close();

生成新的tab并且跳转

const page = await browser.newPage();
await page.goto('https://github.com/'+name+'?tab=repositories'); //跳转到github某个用户的仓库页

在控制台中执行函数（ evaluate() ）

//获取当页的所有项目url，同时有下一页仓库的url的话也获取
 const rep =  await page.evaluate(()=>{
        const url = document.querySelectorAll('.wb-break-all > a');
        const next = document.querySelector('.BtnGroup > a');
        let urlList = undefined;
        let nextUrl = undefined;
        if(url != null){
            urlList = Array.prototype.map.call(url,(item)=>{
                return item.href;
            })
        }
        if(next!=null&&next.outerText==='Next'){
            nextUrl = next.href;
        }
        return {
            urlList:urlList,
            nextUrl:nextUrl
        }
  });

获取页面元素

const el = await page.$(selector)

点击元素

await el.click()

输入内容

await el.type(text)

爬取Github中的数据

使用了express，因个人需要爬取了指定用户的follower数，以及commit过的日期以及当天commit的次数，还有爬取每一个公开的项目的url、项目名、commit数以及star数，拼接后返回json。

项目地址：getGithub

调用例子：

http://localhost:4000/getAllContributions/Magren0321

返回数据示例：

踩到的坑

在爬取每一年的contributions数的时候，获取其元素的属性失败，因为其data-date以及data-count等属性是github自己定义的属性，无法直接获取，这里必须得使用getAttribute()方法。

同时Attribute中还有setAttribute()和removeAttribute()，分别是设置和移除节点原型中不存在的属性。

//获取日期以及当天的提交数
async function getDateList(yearData,page){
    await page.goto(yearData);
    const dateList = await page.evaluate(()=>{
        const date = document.querySelectorAll('.ContributionCalendar-day');
        const datelist = [];
        for(let item of date){
            if(item.getAttribute('data-count')!=0&&item.getAttribute('data-count')!=null){
                datelist.push({
                    data_date: item.getAttribute('data-date'),
                    data_count: item.getAttribute('data-count')
                })
            }
        }
      
        return datelist;
    })
    return dateList;
}

Github api还有一些奇奇怪怪的地方就不总结了……
比如返回一个空的数组，但是我输出其length居然是2，用直接请求发现是里面放了两个换行😵
只能找多几个数据测试😔

>cd ..