PuppeteerでGitHubガイドをクロールする

介紹#

puppeteer は、Chrome 公式のヘッドレス Chrome Node ライブラリです。UI なしで Chrome の機能を呼び出すための一連の API を提供し、クローラーや自動化処理などさまざまなシナリオに適用されます。

使用方法#

インストール#

npm install puppeteer-chromium-resolver --save

ブラウザの起動 / 終了#

 const browser = await (puppeteer.launch({
        args: ['--no-sandbox', 
        '--disable-setuid-sandbox'],
        //httpsページにアクセスする場合、このプロパティはhttpsエラーを無視します
        ignoreHTTPSErrors: true,
        headless: true, //trueに変更するとヘッドレスモードになり、ブラウザが表示されず、UIのない環境でChromeが実行されます
  }));

  //終了
  browser.close();

新しいタブを作成して移動する#

const page = await browser.newPage();
await page.goto('https://github.com/'+name+'?tab=repositories'); //指定したユーザーのリポジトリページに移動する

コンソールで関数を実行する（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 を使用し、指定したユーザーのフォロワー数、コミットした日付とその日のコミット数、および公開されている各プロジェクトの URL、プロジェクト名、コミット数、およびスター数をスクレイピングし、結合して JSON 形式で返します。

プロジェクトのリンク：getGithub

呼び出し例：

http://localhost:4000/getAllContributions/Magren0321

データの例：

遭遇した問題#

各年の contributions 数をスクレイピングする際、要素の属性を取得できなかったため、data-dateやdata-countなどの属性は GitHub が独自に定義したものであり、直接取得することはできません。ここではgetAttribute() メソッドを使用する必要があります。

また、Attribute には setAttribute () と removeAttribute () の 2 つのメソッドがあり、それぞれノードの存在しない属性を設定および削除します。

//日付とその日のコミット数を取得
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 になります。直接リクエストを送信すると、2 つの改行が含まれていることがわかりました😵
他のデータをテストする必要があります😔