fix(inspector): fix the wait for event error rendering (#5517)

src/server/supplements/inspectorController.ts

@@ -75,6 +75,7 @@ export class InspectorController implements InstrumentationListener {
         case 'after':
           const originalMetadata = this._waitOperations.get(info.waitId)!;
           originalMetadata.endTime = metadata.endTime;
+          originalMetadata.error = info.error;
           this._waitOperations.delete(info.waitId);
           metadata = originalMetadata;
           break;

src/server/supplements/recorderSupplement.ts

@@ -447,8 +447,10 @@ export class RecorderSupplement {
         selector: metadata.params?.selector,
       };
       let duration = metadata.endTime ? metadata.endTime - metadata.startTime : undefined;
-      if (duration && metadata.pauseStartTime && metadata.pauseEndTime)
+      if (typeof duration === 'number' && metadata.pauseStartTime && metadata.pauseEndTime) {
         duration -= (metadata.pauseEndTime - metadata.pauseStartTime);
+        duration = Math.max(duration, 0);
+      }
       logs.push({
         id: metadata.id,
         messages: metadata.log,

test/pause.spec.ts

@@ -163,6 +163,23 @@ describe('pause', (suite, { mode }) => {
     await scriptPromise;
   });
 
+  it('should highlight waitForEvent', async ({page, recorderPageGetter}) => {
+    await page.setContent('<button onclick="console.log(1)">Submit</button>');
+    const scriptPromise = (async () => {
+      await page.pause();
+      await Promise.all([
+        page.waitForEvent('console'),
+        page.click('button'),
+      ]);
+    })();
+    const recorderPage = await recorderPageGetter();
+    await recorderPage.click('[title="Step over"]');
+    await recorderPage.waitForSelector('.source-line-paused:has-text("page.click")');
+    await recorderPage.waitForSelector('.source-line-running:has-text("page.waitForEvent")');
+    await recorderPage.click('[title="Resume"]');
+    await scriptPromise;
+  });
+
   it('should populate log with waitForEvent', async ({page, recorderPageGetter}) => {
     await page.setContent('<button onclick="console.log(1)">Submit</button>');
     const scriptPromise = (async () => {
@@ -178,7 +195,7 @@ describe('pause', (suite, { mode }) => {
     await recorderPage.waitForSelector('.source-line-paused:has-text("page.pause();  // 2")');
     expect(await sanitizeLog(recorderPage)).toEqual([
       'page.pause- XXms',
-      'page.waitForEvent(console)- XXms',
+      'page.waitForEvent(console)',
       'page.click(button)- XXms',
       'page.pause',
     ]);
@@ -200,12 +217,36 @@ describe('pause', (suite, { mode }) => {
       'page.isChecked(button)- XXms',
       'checking \"checked\" state of \"button\"',
       'selector resolved to <button onclick=\"console.log(1)\">Submit</button>',
-      'Not a checkbox or radio button',
+      'error: Not a checkbox or radio button',
     ]);
     const error = await scriptPromise;
     expect(error.message).toContain('Not a checkbox or radio button');
   });
 
+  it('should populate log with error in waitForEvent', async ({page, recorderPageGetter}) => {
+    await page.setContent('<button>Submit</button>');
+    const scriptPromise = (async () => {
+      await page.pause();
+      await Promise.all([
+        page.waitForEvent('console', { timeout: 1 }),
+        page.click('button'),
+      ]);
+    })().catch(() => {});
+    const recorderPage = await recorderPageGetter();
+    await recorderPage.click('[title="Step over"]');
+    await recorderPage.waitForSelector('.source-line-paused:has-text("page.click")');
+    await recorderPage.waitForSelector('.source-line-error:has-text("page.waitForEvent")');
+    await recorderPage.click('[title="Resume"]');
+    expect(await sanitizeLog(recorderPage)).toEqual([
+      'page.pause- XXms',
+      'page.waitForEvent(console)',
+      'waiting for event \"console\"',
+      'error: Timeout while waiting for event \"console\"',
+      'page.click(button)- XXms',
+    ]);
+    await scriptPromise;
+  });
+
   it('should pause on page close', async ({ page, recorderPageGetter }) => {
     const scriptPromise = (async () => {
       await page.pause();
@@ -234,13 +275,11 @@ describe('pause', (suite, { mode }) => {
 async function sanitizeLog(recorderPage: Page): Promise<string[]> {
   const results = [];
   for (const entry of await recorderPage.$$('.call-log-call')) {
-    const header = await (await (await entry.$('.call-log-call-header')).textContent()).replace(/— \d+(\.\d+)?(ms|s)/, '- XXms');
+    const header =  (await (await entry.$('.call-log-call-header')).textContent()).replace(/— [\d.]+(ms|s)/, '- XXms');
-    results.push(header);
+    results.push(header.replace(/page\.waitForEvent\(console\).*/, 'page.waitForEvent(console)'));
-    results.push(...await entry.$$eval('.call-log-message', ee => ee.map(e => e.textContent)));
+    results.push(...await entry.$$eval('.call-log-message', ee => ee.map(e => {
-    const errorElement = await entry.$('.call-log-error');
+      return (e.classList.contains('error') ? 'error: ' : '') + e.textContent;
-    const error = errorElement ? await errorElement.textContent() : undefined;
+    })));
-    if (error)
-      results.push(error);
   }
   return results;
 }