概要

今回は、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に公開しています。
参考にしてみてください。