概要
今回は、Playwrightのコード生成機能についてご紹介します。
前回の記事
前回の記事では、Playwright の紹介と簡単なコード実行をしています。
こちらを前提に進めていきます。
コード生成機能
Playwrightを使ってのスクレイピングは、ログインが必要なページなど、一筋縄ではいかないページでもやりたい場合があると思います。
そういうときに、いちいち要素を調べてプログラミングしていては大変です。
Playwrightには、便利なコード生成機能があり、こういう時非常に役立ちます。
例えば、ニコニコの自分のアカウントのフォロー数とフォロワー数を取ってみましょう。（他にいいものが思いつかなかった汗）
コード生成機能は、
$ npx playwright codegen https://www.nicovideo.jp/
という形で、スクレイピングしたいページのURLを指定します。
そうするとブラウザが開きますので、実際にログイン処理を行い、欲しい要素のページまで遷移します。
そうすると、実際の操作がコードになって表示されます。
このコードを基に、プログラムを書いていきます。
（ほとんどはそのまま使えるので、カスタマイズしていく感じです。）
コードを参考に書いたプログラムは以下の通りです。
niconico.js
const playwright = require('playwright');
(async () => {
const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://www.nicovideo.jp/');
await page.getByRole('link', { name: 'ログイン' }).click();
await page.locator('#input__mailtel').click();
await page.locator('#input__mailtel').fill('xxxxxxx@xxxxxxx');
await page.locator('#input__password').click();
await page.locator('#input__password').fill('xxxxxxxxx');
await page.getByRole('button', { name: 'ログイン' }).click();
await page.goto('https://www.nicovideo.jp/my');
await page.screenshot({ path: 'screenshot.png', fullPage: true });
const follow = await page.getByRole('link', { name: 'フォロー中' }).innerText();
console.log(follow)
const follower = await page.getByRole('link', { name: 'フォロワー' }).innerText();
console.log(follower)
await browser.close();
})();
プログラミングしていて、途中で合ってるか不安になってきたら、スクリーンショットを簡単に取ることができます。
上のプログラミングの
await page.screenshot({ path: 'screenshot.png', fullPage: true });
の部分です。
こんな感じでスクリーンショットが取れます。
便利ですね。
実行してみると、フォロー数、フォロワー数が取れていることが分かります。
$ node niconico.js
フォロー中
8
フォロワー
4
後は取得できたデータを基に色々処理をしていくという形になります。
プログラムは、Githubに公開しています。
参考にしてみてください。