fix(ui): collapse multiline log entries (#37854)

Author: agg23

packages/playwright-core/src/utils/isomorphic/protocolFormatter.ts

@@ -17,6 +17,10 @@
 import { methodMetainfo } from './protocolMetainfo';
 
 export function formatProtocolParam(params: Record<string, string> | undefined, alternatives: string): string | undefined {
+  return _formatProtocolParam(params, alternatives)?.replaceAll('\n', '\\n');
+}
+
+function _formatProtocolParam(params: Record<string, string> | undefined, alternatives: string): string | undefined {
   if (!params)
     return undefined;
 

tests/library/inspector/pause.spec.ts

@@ -48,6 +48,20 @@ it('should not reset timeouts', async ({ page, recorderPageGetter, closeRecorder
   expect(error.message).toContain('page.goto: Timeout 1000ms exceeded.');
 });
 
+it('should collapse log entries to a single line', async ({ page, recorderPageGetter }) => {
+  const scriptPromise = (async () => {
+    // @ts-ignore
+    await page.pause({ __testHookKeepTestTimeout: true });
+    await page.keyboard.type(`Hello
+world`);
+  })();
+
+  const recorderPage = await recorderPageGetter();
+  await recorderPage.click('[title="Resume (F8)"]');
+  await expect(recorderPage.locator('.call-log-call').nth(1)).toContainText('Type "Hello\\nworld"');
+  await scriptPromise;
+});
+
 it.describe('pause', () => {
   it.skip(({ mode }) => mode !== 'default');
 

tests/playwright-test/ui-mode-trace.spec.ts

@@ -480,6 +480,28 @@ test('should show custom fixture titles in actions tree', async ({ runUITest })
   ]);
 });
 
+test('should collapse log entries to a single line', async ({ runUITest }) => {
+  const { page } = await runUITest({
+    'a.test.ts': `
+      import { test, expect } from '@playwright/test';
+
+      test('multiline test', async ({ page }) => {
+        await page.keyboard.type(\`line1
+line2\`);
+      });
+    `,
+  });
+
+  await page.getByText('multiline test').dblclick();
+  const listItem = page.getByTestId('actions-tree').getByRole('treeitem');
+  await expect(listItem, 'action list').toHaveText([
+    /Before Hooks[\d.]+m?s/,
+    /Type "line1\\nline2"[\d.]+m?s/,
+    /After Hooks[\d.]+m?s/,
+  ]);
+});
+
+
 test('should hide boxed fixtures and contents, reveal upon show all actions setting', async ({ runUITest }) => {
   const { page } = await runUITest({
     'a.test.ts': `