From e534fba60f1b87689a70e82f6ab41f83ce262e14 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 11 Nov 2024 16:38:02 -0800
Subject: [PATCH] chore: render recorder placeholders (#33548)

---
 packages/recorder/src/recorder.tsx               | 7 +++++--
 tests/library/inspector/cli-codegen-aria.spec.ts | 1 +
 tests/library/inspector/pause.spec.ts            | 4 ++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/recorder/src/recorder.tsx b/packages/recorder/src/recorder.tsx
index 75ac2afa01..8b3a654def 100644
--- a/packages/recorder/src/recorder.tsx
+++ b/packages/recorder/src/recorder.tsx
@@ -122,6 +122,9 @@ export const Recorder: React.FC<RecorderProps> = ({
     if (!errors.length)
       window.dispatch({ event: 'highlightRequested', params: { ariaSnapshot: fragment } });
   }, [mode]);
+  const isRecording = mode === 'recording' || mode === 'recording-inspecting';
+  const locatorPlaceholder = isRecording ? '// Unavailable while recording' : (locator ? undefined : '// Pick element or type locator');
+  const ariaPlaceholder = isRecording ? '# Unavailable while recording' : (ariaSnapshot ? undefined : '# Pick element or type snapshot');
 
   return <div className='recorder'>
     <Toolbar>
@@ -188,7 +191,7 @@ export const Recorder: React.FC<RecorderProps> = ({
           {
             id: 'locator',
             title: 'Locator',
-            render: () => <CodeMirrorWrapper text={locator} language={source.language} readOnly={false} focusOnChange={true} onChange={onEditorChange} wrapLines={true} />
+            render: () => <CodeMirrorWrapper text={locatorPlaceholder || locator} language={source.language} readOnly={isRecording} focusOnChange={true} onChange={onEditorChange} wrapLines={true} />
           },
           {
             id: 'log',
@@ -198,7 +201,7 @@ export const Recorder: React.FC<RecorderProps> = ({
           {
             id: 'aria',
             title: 'Aria snapshot',
-            render: () => <CodeMirrorWrapper text={ariaSnapshot || ''} language={'yaml'} readOnly={false} onChange={onAriaEditorChange} highlight={ariaSnapshotErrors} wrapLines={false} />
+            render: () => <CodeMirrorWrapper text={ariaPlaceholder || ariaSnapshot || ''} language={'yaml'} readOnly={isRecording} onChange={onAriaEditorChange} highlight={ariaSnapshotErrors} wrapLines={true} />
           },
         ]}
         selectedTab={selectedTab}
diff --git a/tests/library/inspector/cli-codegen-aria.spec.ts b/tests/library/inspector/cli-codegen-aria.spec.ts
index 4f438486d4..6fe75209eb 100644
--- a/tests/library/inspector/cli-codegen-aria.spec.ts
+++ b/tests/library/inspector/cli-codegen-aria.spec.ts
@@ -64,6 +64,7 @@ test.describe(() => {
   test('should inspect aria snapshot', async ({ openRecorder }) => {
     const { recorder } = await openRecorder();
     await recorder.setContentAndWait(`<main><button>Submit</button></main>`);
+    await recorder.recorderPage.getByRole('button', { name: 'Record' }).click();
     await recorder.page.click('x-pw-tool-item.pick-locator');
     await recorder.page.hover('button');
     await recorder.trustedClick();
diff --git a/tests/library/inspector/pause.spec.ts b/tests/library/inspector/pause.spec.ts
index 3dfc3ba036..745ae27d1d 100644
--- a/tests/library/inspector/pause.spec.ts
+++ b/tests/library/inspector/pause.spec.ts
@@ -418,6 +418,8 @@ it.describe('pause', () => {
     const box1Promise = waitForTestLog<BoundingBox>(page, 'Highlight box for test: ');
     await recorderPage.getByText('Locator', { exact: true }).click();
     await recorderPage.locator('.tabbed-pane .CodeMirror').click();
+    await recorderPage.keyboard.press('ControlOrMeta+A');
+    await recorderPage.keyboard.press('Backspace');
     await recorderPage.keyboard.type('getByText(\'Submit\')');
     const box1 = await box1Promise;
 
@@ -441,6 +443,8 @@ it.describe('pause', () => {
       const box1Promise = waitForTestLog<BoundingBox>(page, 'Highlight box for test: ');
       await recorderPage.getByText('Locator', { exact: true }).click();
       await recorderPage.locator('.tabbed-pane .CodeMirror').click();
+      await recorderPage.keyboard.press('ControlOrMeta+A');
+      await recorderPage.keyboard.press('Backspace');
       await recorderPage.keyboard.type('GetByText("Submit")');
       const box1 = await box1Promise;