From fac5da9517b39d9d96567637b751b106515739d7 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Tue, 26 Oct 2021 14:40:28 -0700
Subject: [PATCH] docs: update console event snippet (#9800)

This avoids the confusion where arguments are printed
asynchronously, interleaved with other console messages.
---
 docs/src/api/class-page.md                | 10 +++++++---
 packages/playwright-core/types/types.d.ts | 18 ++++++++++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/docs/src/api/class-page.md b/docs/src/api/class-page.md
index ba018552b6..1136c2d349 100644
--- a/docs/src/api/class-page.md
+++ b/docs/src/api/class-page.md
@@ -169,8 +169,10 @@ An example of handling `console` event:
 
 ```js
 page.on('console', async msg => {
-  for (let i = 0; i < msg.args().length; ++i)
-    console.log(`${i}: ${await msg.args()[i].jsonValue()}`);
+  const values = [];
+  for (const arg of msg.args())
+    values.push(await arg.jsonValue());
+  console.log(...values);
 });
 await page.evaluate(() => console.log('hello', 5, {foo: 'bar'}));
 ```
@@ -185,8 +187,10 @@ page.evaluate("() => console.log('hello', 5, {foo: 'bar'})");
 
 ```python async
 async def print_args(msg):
+    values = []
     for arg in msg.args:
-        print(await arg.json_value())
+        values.append(await arg.json_value())
+    print(values)
 
 page.on("console", print_args)
 await page.evaluate("console.log('hello', 5, {foo: 'bar'})")
diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts
index 068d4ee6d9..2926997f21 100644
--- a/packages/playwright-core/types/types.d.ts
+++ b/packages/playwright-core/types/types.d.ts
@@ -794,8 +794,10 @@ export interface Page {
    *
    * ```js
    * page.on('console', async msg => {
-   *   for (let i = 0; i < msg.args().length; ++i)
-   *     console.log(`${i}: ${await msg.args()[i].jsonValue()}`);
+   *   const values = [];
+   *   for (const arg of msg.args())
+   *     values.push(await arg.jsonValue());
+   *   console.log(...values);
    * });
    * await page.evaluate(() => console.log('hello', 5, {foo: 'bar'}));
    * ```
@@ -1065,8 +1067,10 @@ export interface Page {
    *
    * ```js
    * page.on('console', async msg => {
-   *   for (let i = 0; i < msg.args().length; ++i)
-   *     console.log(`${i}: ${await msg.args()[i].jsonValue()}`);
+   *   const values = [];
+   *   for (const arg of msg.args())
+   *     values.push(await arg.jsonValue());
+   *   console.log(...values);
    * });
    * await page.evaluate(() => console.log('hello', 5, {foo: 'bar'}));
    * ```
@@ -3394,8 +3398,10 @@ export interface Page {
    *
    * ```js
    * page.on('console', async msg => {
-   *   for (let i = 0; i < msg.args().length; ++i)
-   *     console.log(`${i}: ${await msg.args()[i].jsonValue()}`);
+   *   const values = [];
+   *   for (const arg of msg.args())
+   *     values.push(await arg.jsonValue());
+   *   console.log(...values);
    * });
    * await page.evaluate(() => console.log('hello', 5, {foo: 'bar'}));
    * ```