0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ブラウザでJavaScript (ESM)を実行するCLI

0
Posted at

20世紀でも Web ブラウザ上で JavaScript は実行できましたが、それを CLI から起動するのは手間でした。今回、Node.js 向けの既存の ESM のスクリプトファイルを、そのまま Web ブラウザで実行できる CLI ツールのライブラリ webdriver-js-cli および playwright-js-cli をリリースしました。

webdriver-js は、WebDriver 経由でブラウザ上で JS を実行し、その結果を返します。

Mac の Safari で JS を実行する例:

npm i -D webdriver-js-cli

safaridriver --enable

safaridriver -p 4444 &

webdriver-js -e 'console.log("#", navigator.userAgent)'
# Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.6 Safari/605.1.15

インライン -e をそのまま実行できることと、console.log の出力が開発者ツールに留まらずに、CLI 側に返ってきている点がポイントです。

Mac の Firefox で JS を実行する例

Firefox を使う場合は、geckodriver を起動します。

brew install geckodriver

geckodriver -p 4444 &

webdriver-js -e 'console.log("#", navigator.userAgent)'
# Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:155.0) Gecko/20100101 Firefox/155.0

Safari 向けと全く同じコードが、Firefox でも動きます。

Mac の Chrome で JS を実行する例

Chrome 向けに chromedriver もありますが、現在は home brew では手軽にはインストールできません。

$ brew install chromedriver
Error: chromedriver: Cask 'chromedriver' has been disabled because it does not pass the macOS Gatekeeper check! It was disabled on 2026-09-01.

そこで playwright-js-cli を使います。設定ファイル connect-over-cdp.json をオプションで指定すると、9222 番ポートで CDP (Chrome DevTools Protocol) 接続を許可した Chrome に接続できます。

npm i -D playwright-js-cli

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
    --remote-debugging-port=9222 \
    --user-data-dir=/tmp/chrome-profile-stable \
    --no-first-run &

cp node_modules/playwright-js-cli/playwright-config/connect-over-cdp.json .

chromium-js --playwright-config connect-over-cdp.json \
    -e 'console.log("#", navigator.userAgent)'
# Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/155.0.0.0 Safari/537.36

connect-over-cdp.json は、CDP のポート番号を指定する設定ファイルです。

既存ブラウザを使わずに headless Chrome を使う

ローカルの実ブラウザを JS を実行したい用途ではなくて、CI でブラウザ向け JS のテストを行いたい場合は、playwright 標準の healesss ブラウザを利用できます。

npx playwright install chromium firefox webkit

chromium-js -e 'console.log("#", navigator.userAgent)'
# Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36

firefox-js -e 'console.log("#", navigator.userAgent)'
# Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:157.0) Gecko/20100101 Firefox/157.0

webkit-js -e 'console.log("#", navigator.userAgent)'
# Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/27.2 Safari/605.1.15

上記のように、Chromium・Firefox・Webkit が利用できます。

既存のテストファイルをそのまま実行

本ツールは、これまで紹介したインライン実行 -e に限らず、任意の ESM JavaScript ファイルを実行できます。とくに、--test オプションをつければ、node --test と同様のテストをブラウザ上で実行できます。(そもそもこれがやりたかった)

下記では、int64-buffer モジュール用の ESM 版のテストをそのまま Forefox で実行してみます。

webdriver-js --test ../int64-buffer/test/test.mjs \
    --alias int64-buffer=../int64-buffer/int64-buffer.mjs

▶ Uint64BE
  ▶ Uint64BE
    ✔ Uint64BE() (0.000ms)
    ✔ Uint64BE(number) (0.000ms)
  (中略)
▶ Misc
  ✔ Uint64BE.isUint64BE(Uint64BE()) (0.000ms)
  ✔ Int64BE.isInt64BE(Int64BE()) (0.000ms)
  ✔ Uint64LE.isUint64LE(Uint64LE()) (0.000ms)
  ✔ Int64LE.isInt64LE(Int64LE()) (0.000ms)
✔ Misc (0.000ms)
ℹ tests 322
ℹ suites 39
ℹ pass 292
ℹ fail 0
ℹ cancelled 0
ℹ skipped 30
ℹ todo 0
ℹ duration_ms 20
ℹ test-assert-lite 0.1.0
ℹ user-agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:155.0) Gecko/20100101 Firefox/155.0

標準の node --test とは異なり、spec 出力の末尾に user-agent の出力があります。これで、このテストが Firefox で実行されていたことを確認できます。

bare モジュールの読み替え機能

本ツールの実行時、node:assert および node:test の2つの標準モジュールについては特別対応がされていて、別記事で紹介している test-assert-lite モジュールに自動的に切り替わります。

上記のテスト実行例の int64-buffer などの外部依存モジュール(bare module)については、Web ブラウザは自動では resolve しないため、各々 ESM ファイルのパスを個別に --alias オプションで指定する必要があります。

なお、大量の外部モジュールを利用する場合は、--import-map オプションで一括に指定できます。

あるいは、そのほかの node:xxx 標準モジュールを使いたい場合は、事前に rollup で node-stdlib-browser などを組み込む手順が考えられます。

まとめ

webdriver-js-cli および playwright-js-cli は、Safari / Firefox / Chrome などのウェブブラウザで任意の JavaScript (ESM) を実行し、また、既存のテストスクリプトファイルをそのままブラウザで実行できる CLI ツールです。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?