Playwrightとzxでブラウザ操作とCLIを連携する

画面上の値を取得してローカルPCの環境変数に設定しつつCLIでコマンドを実行する、ということをしていたので手順を残しておきます。

使用したライブラリなど

名称	リンク	補足
Playwright	https://playwright.dev/	E2Eテストを行うためのライブラリとして有名ですね。もちろんブラウザ操作の自動化だけでも有用です。
bun	https://bun.sh/	JavaScriptのランタイム...というだけではなくall-in-oneのツールとのこと。TypeScriptを自分でトランスパイルしなくても実行してくれるのが嬉しい。肉まんかわいい。
zx	https://github.com/google/zx	JavaScriptでシェルをかけるツールです。バックドアが仕込まれていたのはxzです。
dprint	https://dprint.dev/	Rust製のコードフォーマッターです。KAKEHASHIさんのテックブログで知りました。

はじめzxを使う予定はありませんでした。ブラウザ操作が必須だったのでPlaywrightを選択し、bun shellのアナウンスを耳にしていたのでランタイムにbunを選びました。しかし結局bunのみで実現ができそうになかった¹のでzxを使うことにしました²。

Introducing the Bun Shell

Cross-platform shell language & interpreter for shell scripting with JavaScript pic.twitter.com/Pis37UJumg

— Bun (@bunjavascript) January 20, 2024

zxを利用すると、例えばjavascriptからaws cliを利用する、とかもできます。これまでだったら何のために？と感じていましたが、ブラウザ操作が前提にある場合は非常に便利と感じました³。

dprintはおまけです。Biomeでも良いですが、formatを自動かつサクッとやりたいだけなのでdprintを使いました。

なお筆者のPCはApple SiliconのMacBookです。

--- 以下手順 ---

セットアップ

bun init

playwright

bun create playwright

playwrightの設定はデフォルトのままです。E2Eテストをしたいわけではないのでtests, test-examplesフォルダは削除します。そしてコードを生成するためにpackage.jsonでscriptを定義します。

{
  "scripts": {
    "record": "npx playwright codegen 対象のサイト",
  }
}

この状態でbun recordを実行すればブラウザが立ち上がり、操作が記録されます。こうして作成されたコードを元にスクリプトを作成します。ここではindex.ts内に記述します。

注意点として、playwrightは基本的に新規でブラウザを起動するため、認証のセッションは維持できません⁴。
しかしCookieによるセッション認証はコード内でCookieを設定することで突破できます。あるいはクライアント証明書が必要な場合は、別の工夫が必要です。

Cookieを設定する例

const context = await browser.newContext();
await context.addCookies([
  {
    name: cookie_name,
    value: cookie_value,
    domain: your_domain,
    path: path,
    expires: expire_period,
  },
]);

（MacかつChromeの場合）クライアント認証を自動で選択する（AutoSelectCertificateForUrlsを設定する）ためには、以下のコマンドをCLIで実行します。

defaults write com.google.Chrome AutoSelectCertificateForUrls -array-add -string '{"pattern":"https://example.com","filter":{"ISSUER":{"CN":"Example CA"}}}'

参考：Mac OS XのChromeでAutoSelectCertificateForUrlsを設定する

zx

TypeScriptファイル内でシェルを実行するためにzxを用意します

bun add zx

シェルの実行は以下のように行います。

await $`echo "export ENV=${env}"`;
await $`echo "export MY_ENV=${my_env}" >> ~/.zshrc`;

なお、zxは新しい子プロセスでシェルコマンドを実行するため、スクリプトを実行しているシェルセッションには影響を与えません。したがって上記のようにecho "export ENV=${env}"をzxで実行しても親のセッションでは利用できません。利用できるようにするためには、.zshrcなどに書き込んだ上で、sourceするか新しいセッションを開始する必要があります。

dprint

おまけですが、一応。

bun add dprint --dev
npx dprint init # 適当に必要なものを選択

{
  "scripts": {
    "fmt": "npx dprint fmt",
  }
}

formatを実行。

bun fmt

感想

TypeScriptでブラウザ操作もCLI操作もできると捗る！

参考まとめ

zx

bun shell

クライアント証明書

1. bun shellで使用できるコマンドはIssueにまとまっています。Implement commands in Bun shell ↩

2. 追っていないのですが、Denoにもdaxというのがあるようですね ↩

3. シェルスクリプトを書けない書きたくないのです ↩

4. 改めて調べたらSeleniumとPlaywrightで起動済みのブラウザを操作する という方法がありましたね ↩