chore(player): reset logs on resume

ruifigueira · Dec 9, 2024 · d1e0895 · d1e0895
1 parent bfeeead
commit d1e0895
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 10 deletions.
diff --git a/examples/recorder-crx/src/crxRecorder.tsx b/examples/recorder-crx/src/crxRecorder.tsx
@@ -64,6 +64,7 @@ export const CrxRecorder: React.FC = ({
         case 'setPaused': setPaused(msg.paused); break;
         case 'setMode': setMode(msg.mode); break;
         case 'setSources': setSources(msg.sources); break;
+        case 'resetCallLogs': setLog(new Map()); break;
         case 'updateCallLogs': setLog(log => {
           const newLog = new Map<string, CallLog>(log);
           for (const callLog of msg.callLogs) {

diff --git a/src/server/recorder/crxRecorderApp.ts b/src/server/recorder/crxRecorderApp.ts
@@ -29,6 +29,7 @@ import { languageSet } from 'playwright-core/lib/server/codegen/languages';
 import type { Crx } from '../crx';
 
 export type RecorderMessage = { type: 'recorder' } & (
+  | { method: 'resetCallLogs' }
   | { method: 'updateCallLogs', callLogs: CallLog[] }
   | { method: 'setPaused', paused: boolean }
   | { method: 'setMode', mode: Mode }
@@ -37,7 +38,7 @@ export type RecorderMessage = { type: 'recorder' } & (
   | { method: 'elementPicked', elementInfo: ElementInfo, userGesture?: boolean }
 );
 
-export type RecorderEventData =  (EventData | { event: 'codeChanged' | 'cursorActivity', params: any }) & { type: string };
+export type RecorderEventData =  (EventData | { event: 'resetCallLogs' | 'codeChanged' | 'cursorActivity', params: any }) & { type: string };
 
 export interface RecorderWindow {
   isClosed(): boolean;
@@ -68,7 +69,10 @@ export class CrxRecorderApp extends EventEmitter implements IRecorderApp {
     this._crx = crx;
     this._recorder = recorder;
     this._player = player;
-    this._player.on('start', () => this._recorder.clearErrors());
+    this._player.on('start', () => {
+      this._recorder.clearErrors();
+      this.resetCallLogs().catch(() => {});
+    });
   }
 
   setPlayInIncognito(playInIncognito: boolean) {
@@ -160,6 +164,10 @@ export class CrxRecorderApp extends EventEmitter implements IRecorderApp {
     this._sendMessage({ type: 'recorder', method: 'elementPicked', elementInfo, userGesture });
   }
 
+  async resetCallLogs() {
+    this._sendMessage({ type: 'recorder', method: 'resetCallLogs' });
+  }
+
   async updateCallLogs(callLogs: CallLog[]) {
     this._sendMessage({ type: 'recorder', method: 'updateCallLogs', callLogs });
   }

diff --git a/tests/crx/player.spec.ts b/tests/crx/player.spec.ts
@@ -81,8 +81,6 @@ test('should clear errors when resuming after errors', async ({ basePath, page,
   await recorderPage.getByTitle('Resume (F8)').click();
 
   await expect.poll(dumpLogHeaders(recorderPage)).toEqual([
-    `► page.goto( ${baseURL}/input/textarea.html ) ✅ — XXms`,
-    `▼ page.locator('textarea') .click() ❌ — XXms`,
     `► page.goto( ${baseURL}/input/textarea.html ) ✅ — XXms`,
     `► page.locator('textarea') .click() ✅ — XXms`,
     `► page.locator('textarea') .fill() ✅ — XXms`,
@@ -152,9 +150,6 @@ test('should resume then step', async ({ recorderPage, baseURL }) => {
 
   await recorderPage.getByTitle('Step Over (F10)').click();
   await expect.poll(dumpLogHeaders(recorderPage)).toEqual([
-    `► page.goto( ${baseURL}/input/textarea.html ) ✅ — XXms`,
-    `► page.locator('textarea') .click() ✅ — XXms`,
-    `► page.locator('textarea') .fill() ✅ — XXms`,
     `▼ page.goto( ${baseURL}/input/textarea.html ) ⏸️`,
   ]);
 });
@@ -178,9 +173,6 @@ test('should resume then record then resume', async ({ recorderPage, recordActio
 
   await recorderPage.getByTitle('Resume (F8)').click();
   await expect.poll(dumpLogHeaders(recorderPage)).toEqual([
-    `► page.goto( ${baseURL}/input/textarea.html ) ✅ — XXms`,
-    `► page.locator('textarea') .click() ✅ — XXms`,
-    `► page.locator('textarea') .fill() ✅ — XXms`,
     `► page.goto( ${baseURL}/input/textarea.html ) ✅ — XXms`,
     `► page.locator('textarea') .click() ✅ — XXms`,
     `► page.locator('textarea') .fill() ✅ — XXms`,
@@ -219,3 +211,27 @@ test('should resume with multiple pages', async ({ context, attachRecorder, reco
 
   await page1.close();
 });
+
+
+test('should reset call logs on resume', async ({ context, attachRecorder, recorderPage, recordAction, baseURL, page }) => {
+  await recorderPage.getByTitle('Record').click();
+  await recorderPage.getByTitle('Resume (F8)').click();
+
+  await expect.poll(dumpLogHeaders(recorderPage)).toEqual([
+    `► page.goto( ${baseURL}/input/textarea.html ) ✅ — XXms`,
+    `► page.locator('textarea') .click() ✅ — XXms`,
+    `► page.locator('textarea') .fill() ✅ — XXms`,
+  ]);
+
+  await recorderPage.getByTitle('Step Over (F10)').click();
+  await expect.poll(dumpLogHeaders(recorderPage)).toEqual([
+    `▼ page.goto( ${baseURL}/input/textarea.html ) ⏸️`,
+  ]);
+
+  await recorderPage.getByTitle('Resume (F8)').click();
+  await expect.poll(dumpLogHeaders(recorderPage)).toEqual([
+    `► page.goto( ${baseURL}/input/textarea.html ) ✅ — XXms`,
+    `► page.locator('textarea') .click() ✅ — XXms`,
+    `► page.locator('textarea') .fill() ✅ — XXms`,
+  ]);
+});