GAS Web アプリ（HtmlService）の画面を、ブラウザ操作なしで検証する — google.script.run の偽装とサーバー差し込み値の置換

何が困るか

Apps Script の Web アプリは Google ログイン必須で、curl で開いてもサインイン画面しか返らない。画面の修正（プルダウンの候補、ボタンの開閉、初期ページの振り分け）を「本番で user に見てもらう」以外に確かめる手段が無いと思われがちだが、HTML は手元にあるので Chromium で実描画して DOM を assert できる。

手順（Node + Playwright）

1. clasp pull した index.html を読み込む。
2. サーバー差し込み（<?= name ?> / <?!= name ?>）を、doGet が入れるのと同じ JSON 文字列で置換する。JSON.parse('<?= list ?>') の形なら JSON.stringify(値) を \ と ' だけエスケープして入れる。置換漏れは /<\?[=!]?[\s\S]*?\?>/ で検出して例外にする。
3. google.script.run の偽物を <head> 直下に <script> として埋め込む。page.addInitScript は page.setContent では走らないので使わない（実測）。偽物は withSuccessHandler / withFailureHandler / withUserObject を受けて、任意の関数名の呼び出しを setTimeout(…, 0) で success handler に返す Proxy にする。関数名ごとの戻り値は handlers オブジェクトで差し替える。
4. 外部 CDN（バーコード・QR ライブラリ等）は page.route(/^https?:\/\//, r => r.abort()) で止める。描画の assert には不要で、ネットワーク差で結果がぶれない。
5. page.setContent(html) で開き、locator('#select option').allTextContents() や querySelector('.page.active').id で期待値を assert する。隠れているページの <select> を操作する時は selectOption(..., { force: true })。
6. iframe 内で localStorage を使うページ（埋め込みフォーム等）は setContent だと不透明オリジンで SecurityError になる。HTML を一時ファイルに書いて page.goto(file://…) で開く。
7. pageerror を集め、「対象機能に関するエラーが 0 件」も assert に入れる。旧 DOM を消したのに getElementById(...).addEventListener が残っていると読込時に script 全体が止まり、画面が真っ白になる事故をここで拾える。

const STUB = `<script>
  window.__calls = [];
  var __handlers = { getList: function () { return ["A","B"]; } };
  function __b(s, f) { return new Proxy({}, { get: function (_, name) {
    if (name === 'withSuccessHandler') return function (fn) { return __b(fn, f); };
    if (name === 'withFailureHandler') return function (fn) { return __b(s, fn); };
    if (name === 'withUserObject') return function () { return __b(s, f); };
    return function () { var a = [].slice.call(arguments); window.__calls.push(name);
      setTimeout(function () { try { var h = __handlers[name]; var r = h ? h.apply(null, a) : {}; if (s) s(r); } catch (e) { if (f) f(e); } }, 0); };
  } }); }
  window.google = { script: { run: __b(null, null), host: { close: function () {} } } };
</script>`;
html = html.replace('<head>', '<head>' + STUB);

サーバー側は vm で同じ .js を実行する

vm.runInContext に SpreadsheetApp / CacheService / HtmlService / PropertiesService の偽物を入れて本番 .js をそのまま読み込み、getRange().getValues() が返す 2 次元配列を実データ（下記で取った CSV）にすると、「シートの E 列 30 件が画面の候補 30 件になる」まで Node だけで通せる。

シートの実データは Sheets API が無効でも読める

clasp login の OAuth トークン（~/.clasprc.json の tokens.default.access_token）は spreadsheets スコープを持たないが、次の 2 つは Bearer を付けるだけで通る:

• タブ名指定: https://docs.google.com/spreadsheets/d/<ID>/gviz/tq?tqx=out:csv&sheet=<タブ名>
• gid 指定: https://docs.google.com/spreadsheets/d/<ID>/export?format=csv&gid=<gid>

Drive API の export は先頭タブしか返さないので、複数タブの時はこちらを使う。CSV は引用符内の改行があるので正規のパーサで読む。

書き込みはコマンドキューで

読み取りが上記で済んでも、書き込み経路が無いときはスクリプト側に Drive コマンドキュー（cmd_*.json → 1 分トリガー → result_*.txt）を置き、書き込み後に同じセルを read-back して結果に含める。トリガーは最新の保存版（HEAD）で動くので、デプロイ前でも push 直後から使える。push 直後の 1 回目は旧版で走ることがあるので、Unknown command が返ったら 1 分待って再投入する。

落とし穴

• clasp pull したファイルは CRLF。文字列置換の前に \r\n → \n に正規化し、書き戻し時に 1 回だけ戻す。\r\r\n が混入していないか書き戻し後に数える。
• 偽物の handler で未定義の関数名は {} を返す。画面側が result.items.map のように深い参照をするなら、その関数だけ handlers に実装する。
• page.setContent の origin は毎回不透明なので、localStorage に状態を持つ画面は file:// で開く（手順 6）。