Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#41,359 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

  • #41621 de @Git-Raini — cerrado sin fusionar
  • #41955 de @SebTardif — cerrado sin fusionar

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
68/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
javascript, typescript
Área
testing, tooling

Línea de trabajo

Comienza con bindingsController.ts y la ruta de PageBinding.dispatch descrita en el informe; después, ejecuta la reproducción vinculada de repro.spec.ts tras instalar Chromium. Rastrea cómo el Array.prototype.toJSON de la página cambia la carga útil del binding y verifica que los clics del recorder se registren sin el error serializedArgs.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
TypeScript
Estrellas
97.4k
Forks
6.6k
Merge medio
18 h 15 min
PR fusionados (30 d)
318

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/playwright

Todos los issues de microsoft/playwright

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.