Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#41,359 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

  • #41621 di @Git-Raini — chiusa senza merge
  • #41955 di @SebTardif — chiusa senza merge

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
javascript, typescript
Ambito
testing, tooling

Direzione di ricerca

Inizia con bindingsController.ts e con il percorso PageBinding.dispatch descritto nel report, quindi esegui la riproduzione collegata di repro.spec.ts dopo aver installato Chromium. Traccia come l'Array.prototype.toJSON della pagina modifica il payload del binding e verifica che i clic del recorder vengano registrati senza l'errore serializedArgs.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
TypeScript
Stelle
97.4k
Fork
6.6k
Merge medio
17h 1m
PR unite (30g)
311

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/playwright

Tutte le issue di microsoft/playwright

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.