[Bug]: Recorder/codegen and page bindings break when the page defines Array.prototype.toJSON

クローズ
  • 何か問題がありますか？
#41,359 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

  • #41621 @Git-Raini による — マージされずにクローズ
  • #41955 @SebTardif による — マージされずにクローズ

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
68/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
静か
技術スタック
javascript, typescript
領域
testing, tooling

調査の方向性

bindingsController.ts と、レポートで説明されている PageBinding.dispatch パスから始め、Chromium をインストールした後、リンクされた repro.spec.ts の再現コードを実行します。ページの Array.prototype.toJSON が binding payload をどのように変更するかを追跡し、recorder のクリックが serializedArgs エラーなしで記録されることを確認します。

索引モデルが issue の本文から書いたものです。

説明

P3-collecting-feedback
Version

1.61.0

Steps to reproduce

Recorder:

  1. Run npx playwright codegen and navigate to any page (even about:blank).
  2. In the browser's DevTools Console, paste the kind of serializer Prototype.js installs: 
    Array.prototype.toJSON = function () {
  var results = [];
  this.forEach(function (value) {
    results.push(typeof value === 'object' ? JSON.stringify(value) : String(value));
  });
  return '[' + results.join(', ') + ']';
};
  3. Click any element. Recording stops with the error below.

Deterministic (no UI): minimal repo https://github.com/whgksqls9999/pw-tojson-recorder-repro

git clone https://github.com/whgksqls9999/pw-tojson-recorder-repro
cd pw-tojson-recorder-repro
npm install
npx playwright install chromium
npx playwright test repro.spec.ts
Expected behavior

When an element is clicked, codegen tracks it and records the corresponding action.

Actual behavior
Error: serializedArgs is not an array. This can happen when Array.prototype.toJSON is defined incorrectly
    at _PageBinding.dispatch
    at _Page.onBindingCalled
    at _FrameSession._onBindingCalled

The recorder is unusable on such a page.

Additional context

Root cause: the injected binding controller serializes its payload with the page's JSON.stringify, so a page-defined Array.prototype.toJSON turns the internal serializedArgs array into a string and PageBinding.dispatch rejects it.

I completely understand the decision in #32508 to surface a clear log rather than handle the error. The one thing I'd gently raise is the user experience: a developer whose app has such an incorrect Array.prototype.toJSON override might try codegen, see that clicks do nothing, and — without opening DevTools — assume "maybe this just doesn't fit our app" and move on. That's partly on the developer for not checking, of course, but it can be an easy silent dead end. Would you be open to revisiting this case, or do you feel the current approach is the one to keep?

As a heavily simplified illustration, something like the patch below worked in my testing. If you feel this direction is worth pursuing, I'd be glad to refine it as needed and take the work forward.

[bindingsController.ts]

private _stringifyPayload(payload: BindingPayload): string {
  const arrayToJSON = Array.prototype.toJSON;
  const objectToJSON = Object.prototype.toJSON;
  try {
    delete Array.prototype.toJSON;
    delete Object.prototype.toJSON;
    return JSON.stringify(payload);
  } finally {
    if (arrayToJSON !== undefined) Array.prototype.toJSON = arrayToJSON;
    if (objectToJSON !== undefined) Object.prototype.toJSON = objectToJSON;
  }
}

(this._global as any)[this._globalBindingName](
  this._stringifyPayload(payload),
);
Environment
System:
  OS: Windows 10 Home 10.0.19045
  CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12500H
  Memory: 1.54 GB / 15.71 GB
Binaries:
  Node: 22.20.0
  npm: 10.9.3
npmPackages:
  @playwright/test: 1.61.0 => 1.61.0
主要言語
TypeScript
スター
99.1k
フォーク
6.8k
平均マージ
16時間 3分
マージ済み PR（30日）
315

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

microsoft/playwright のほかの issue

microsoft/playwright の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。