From 65aa062ea11dcbca44f862c33c6ed3066a22bfb1 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Tue, 22 Aug 2023 14:29:35 -0700
Subject: [PATCH] fix(console): make format console message w/o args (#26620)

Fixes https://github.com/microsoft/playwright/issues/26600
---
 packages/trace-viewer/src/ui/consoleTab.tsx       | 2 +-
 tests/playwright-test/ui-mode-test-output.spec.ts | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/trace-viewer/src/ui/consoleTab.tsx b/packages/trace-viewer/src/ui/consoleTab.tsx
index 94a3d7ac9d..22b96d83cf 100644
--- a/packages/trace-viewer/src/ui/consoleTab.tsx
+++ b/packages/trace-viewer/src/ui/consoleTab.tsx
@@ -106,7 +106,7 @@ export const ConsoleTab: React.FunctionComponent<{
 
         const { browserMessage, browserError, nodeMessage } = entry;
         if (browserMessage) {
-          const text = browserMessage.args ? format(browserMessage.args) : browserMessage.text;
+          const text = browserMessage.args && browserMessage.args.length ? format(browserMessage.args) : browserMessage.text;
           const url = browserMessage.location.url;
           const filename = url ? url.substring(url.lastIndexOf('/') + 1) : '<anonymous>';
           locationText = `${filename}:${browserMessage.location.lineNumber}`;
diff --git a/tests/playwright-test/ui-mode-test-output.spec.ts b/tests/playwright-test/ui-mode-test-output.spec.ts
index 5590f90ae1..2ee4cf53e1 100644
--- a/tests/playwright-test/ui-mode-test-output.spec.ts
+++ b/tests/playwright-test/ui-mode-test-output.spec.ts
@@ -117,13 +117,14 @@ test('should format console messages in page', async ({ runUITest }, testInfo) =
     'a.spec.ts': `
       import { test, expect } from '@playwright/test';
       test('print', async ({ page }) => {
-        await page.evaluate(() => {
+        await page.evaluate(async () => {
           console.log('Object %O', { a: 1 });
           console.log('Date %o', new Date());
           console.log('Regex %o', /a/);
           console.log('Number %f', -0, 'one', 2);
           console.log('Download the %cReact DevTools%c for a better development experience: %chttps://fb.me/react-devtools', 'font-weight:bold;color:red;outline:blue', '', 'color: blue; text-decoration: underline');
           console.log('Array', 'of', 'values');
+          await fetch('http://localhost:9889');
         });
       });
     `,
@@ -139,6 +140,7 @@ test('should format console messages in page', async ({ runUITest }, testInfo) =
     'Number 0 one 2',
     'Download the React DevTools for a better development experience: https://fb.me/react-devtools',
     'Array of values',
+    'Failed to load resource: net::ERR_CONNECTION_REFUSED',
   ]);
 
   const label = page.getByText('React DevTools');