Propagate logs from browser when running puppeteer.

When running the tests, the logs from the components are in the browser
console whereas the test is running outside the browser. The `console`
hook is added before the page loads so we can pull all the logs when
running the test.

Change-Id: I5081686b2ffe69a43a085dcef6ef3c36638b195b
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/904222
Reviewed-by: Wenbin Zhang <wenbinzhang@google.com>
Commit-Queue: Hao Wu <haowoo@google.com>
Reviewed-by: Vidit Chitkara <viditchitkara@google.com>

puppeteer-tests/util.ts

diff --git a/puppeteer-tests/util.ts b/puppeteer-tests/util.ts
index 5964081..8003ad1 100644
--- a/puppeteer-tests/util.ts
+++ b/puppeteer-tests/util.ts
@@ -41,7 +41,7 @@
   eventNames: EventName[]
 ) => {
   // Maps event names to FIFO queues of promise resolver functions.
-  const resolverFnQueues = new Map<EventName, Function[]>();
+  const resolverFnQueues = new Map<EventName, ((evt: any) => void)[]>();
   eventNames.forEach((eventName) => resolverFnQueues.set(eventName, []));
 
   // Use an unlikely prefix to reduce chances of name collision.
@@ -247,6 +247,21 @@
   beforeEach(async () => {
     testBed.page = await browser.newPage(); // Make page available to tests.
 
+    testBed.page.on('console', (msg) =>
+      console.log(`PAGE LOG[${msg.type()}]: ${msg.text()}`)
+    );
+    testBed.page.on('pageerror', (message) =>
+      console.log('PAGE ERROR: ', message)
+    );
+    testBed.page.on('response', (response) =>
+      console.log(`RESPONSE LOG[${response.status()}]: ${response.url()}`)
+    );
+    testBed.page.on('requestfailed', (request) =>
+      console.log(
+        `REQUEST FAILED: [${request.url()}] ${request.failure()?.errorText}`
+      )
+    );
+
     // Tell demo pages this is a Puppeteer test. Demo pages should not fake RPC
     // latency, render animations or exhibit any other non-deterministic
     // behavior that could result in differences in the screenshots uploaded to