Playwrightに軽く入門してみる

ローカルでスクレイピングをしたい場面が出てきたので、Playwrightに入門しつつローカル上でWebサイトへアクセスする処理を試してみます。

インストールしテストを試す

新しくディレクトリを作り、そこでnpm initでインストールします。

mkdir scrap
cd scrap
npm init playwright@latest

下記のようなディレクトリ構成が作成されます。

playwright.config.ts
package.json
package-lock.json
tests/
  example.spec.ts
tests-examples/
  demo-todo-app.spec.ts

表示通り、下記を実行するとテストがヘッドレスで実行されます。

npx playwright test 

show-reportコマンドを叩くことで、結果をブラウザ上にUIで表示できます。

npx playwright show-report

リスト	詳細画面

スクレイピングしてみる

今回はスクレイピングしたいので、playwrightを別途インストールします。

npm i playwright

下記のようなjavascriptファイルを作成します。
ページを開き、タイトルの取得、スクリーンショットの保存までを行っています。

import { chromium } from 'playwright'; 

(async () => {
  let browser = null;
  let page = null;

  try {
    // ヘッドレスモードをオフにしてブラウザを起動
    browser = await chromium.launch({
      headless: false, // ヘッドレスモードをオフ
    });

    const context = await browser.newContext(); 
    page = await context.newPage();

    // 指定したURLを開く
    await page.goto('https://example.com');
    console.log('ページが開かれました！');

    // サンプル操作: ページタイトルを取得して表示
    const title = await page.title();
    console.log(`ページタイトル: ${title}`);

    // サンプル操作: スクリーンショットを撮る
    await page.screenshot({ path: 'example.png' });
    console.log('スクリーンショットが保存されました！');

    // 必要に応じて、ページ内の要素を操作する
    // 例: 特定のボタンをクリック
    // await page.click('text="More information..."');

  } catch (error) {
    console.error('エラーが発生しました:', error);
  } finally {
    // ブラウザを閉じる
    if (browser) {
      await browser.close();
    }
  }
})();

launchでヘッドレスモードをオフにすることで、実際にブラウザが起動し、スクリーンショットを取得する処理を行っています。
処理が一瞬なので、ブラウザの表示は一瞬です。
3秒待つなどの処理を入れるとわかりやすいです。

browser = await chromium.launch({
  headless: false, // ヘッドレスモードをオフ
});

普段使っているChromeのProfileを使ってみる

chromium.launchをlaunchPersistentContextにし、プロファイルとChromeのパスを渡します。

パスの場所は、chrome://version/へブラウザからアクセスすることで取得できます。

注意点として、useDataDirは親ディレクトリを選ぶ必要があります。

    // プロファイルと実行可能ファイルのパスを指定
    const userDataDir = '/Users/name/Library/Application Support/Google/Chrome/';
    const executablePath = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';

    // ヘッドレスモードをオフにしてブラウザを起動
    context = await chromium.launchPersistentContext(userDataDir, {
      headless: false,
      executablePath: executablePath,
    });

この状態で node index.jsを叩くことで、普段使っているユーザープロフィールでブラウザ操作ができるはずです。