はじめに

こんにちは、僕です。
この記事は KITアドベントカレンダー11日目の記事 になります。
今日はpuppeteerで遊んだってだけの短い記事を書いていきます。
これ面白いのでおすすめです。（今テスト勉強しながらコード読んでる）
今回作成したやつのコードは こちら

puppeteerとは何か

puppeteerとは操り人形という意味を持っています（知らんかった）
ちなみにコードは これ です。
ブラウザを自動でデバッグすることができるjsのライブラリです。
人類が無限に触ることができるものと言ったらCSSとこれくらいでしょう、楽しいから。

ということでこのライブラリを使用してコードを書いていきたいと思います。

書いていく

どうでもいい情報なのですが、僕は小さいJSを書く時はVimを使っています。楽なので。
てことでやっていきます。
※コード追えてないので細かい解説などはできません
※ちょっとしか読んでない中だけで思ったことは、めんどくさいやつを全部まるっとラッピングしてくれる優しいやつみたいな印象（大体のライブラリがそうだろ）

mkdir puppeteer_test
cd puppeteer_test
npm init
npm i puppeteer
npm i puppeteer-core

ここまで普通にnodeの環境をいい感じにします。
次にコードを書いていきます。

簡単な感じに

まずは最低限の感じのやつを実装します。

touch index.js
vim index.js

const puppeteer = require('puppeteer');
const sleep = (ms) => { return new Promise((resolve) => setTimeout(resolve, ms)); }

まずはpuppeteerを使える状態にして、ついでにsleep関数も適当に定義します。
sleepを定義する意味は、puppeteerに任せてるとどんどん先に進んでいってしまうため、ちょこちょこ人間味のある動作を再現したかったからです。

ブラウザを開いてスクショをとる

次に指定したURLにアクセスしてスクショを撮ってブラウザを閉じるみたいなやつを実装します。

const main = async () => {
  const br = await puppeteer.launch({
    headless: false,
    slowMo: 250,
  });

  const page = await br.newPage();
  await page.goto('https://www.takurinton.com/');
  await page.screenshot({path: 'test.png'});
  await br.close();
}

main()
.then(() => { console.log('ok'); })
.catch(err => { console.log(err); })

これだけです。簡単すぎてゲロ吐きそうになった。
まずはbrでブラウザに対する設定をします。headlessをfalseにしてあげることでデバッグを開始してくれるようになります。
あとはブラウザからページを開いてスクショをするという動作を定義します。
これだけでいい感じになります。今回は僕のポートフォリオのURLを使用していますが、お好みに合わせてそこは変化させてください。

入力フォームに値を入れる

次は自動で入力フォームに値を入れてサブミットボタンを押しちゃおうみたいなことします。
基本的にはhtmlのタグや、type, nameを指定して値を入力したりクリックの処理をしたりします。

const puppeteer = require('puppeteer');
const sleep = (ms) => { return new Promise((resolve) => setTimeout(resolve, ms)); }

const main = async () => {
  const br = await puppeteer.launch({
    headless: false,
    slowMo: 250,
  });

  const page = await br.newPage();
  await page.goto('https://www.takurinton.com/post/31');
  sleep(1000);  
  await page.type('input[name="name"]', 'たくりんとん');
  await page.type('textarea[name="contents"]', 'ジャンゴとってもいいですね！アドカレお疲れ様です！', { delay: 10 });
  await page.click('button[type="submit"]');
}

main()
.then(() => { console.log('ok'); })
.catch(err => { console.log(err); })

こんな感じです。今回は前回書いたアドベントカレンダーの記事にコメントするような感じのものを実装しました。
所々入ってるsleepは見やすくするための僕からの配慮です。感謝してください。

ブラウザを開く処理は先ほどと同じです。
先ほどと違うことは、page.typeを指定することでhtmlのタグをいじることができるようになるということです。これは便利で、あらゆるタグを触ることができます。自分のブログの場合はコメント欄は以下のような形になっています。

<form>
  <h1>コメント</h1>
  <input type="text" name="name" value="" required="" placeholder="お名前"/> 
  <textarea name="contents" required="" placeholder="コメントを入力"></textarea>
  <button type="submit" class="_3BcIejbYCkjvd-1SLMGPxp">送信</button>
</form>

つまり、inputタグのtype=nameが名前、textareaのname=contentsがコメント、buttonのtype=submitが送信ボタンになっています。これらを指定していい感じにボタンを押すことができます。
今回は送信後もブラウザは閉じないようにしてあります。

こんな感じでいい感じにブラウザをデバッグすることができます。楽しい。
もしよかったらcloneして実行してみてください。きっと楽しいです！

まとめ

今回はpuppeteerを少しだけ触れました。もっとたくさん遊べそうなので暇を見つけていろんなサイトをいじってみたいと思います。その前にテストが控えているのでそれを頑張ります。
また、同時並行でpuppeteerのコード読んでいきます。

補足: アドカレみたいに義務感あって書く記事よりも書きたい時に書く方が楽しいです。