refactor: clear issue aggregator on page navigation

Author: OrKoN

src/PageCollector.ts

@@ -220,23 +220,37 @@ export class ConsoleCollector extends PageCollector<
 
   async subscribeForIssues(page: Page) {
     const seenKeys = new Set<string>();
-    const mockManager = new FakeIssuesManager();
-    const aggregator = new IssueAggregator(mockManager);
-    aggregator.addEventListener(
-      IssueAggregatorEvents.AGGREGATED_ISSUE_UPDATED,
-      event => {
-        const withId = event.data as WithSymbolId<AggregatedIssue>;
-        // Emit aggregated issue only if it's a new one
-        if (withId[stableIdSymbol]) {
-          return;
-        }
-        page.emit('issue', event.data);
-      },
-    );
+    let mockManager = new FakeIssuesManager();
+    setupIssueAggregator();
+
+    function setupIssueAggregator() {
+      mockManager = new FakeIssuesManager();
+      const aggregator = new IssueAggregator(mockManager);
+      aggregator.addEventListener(
+        IssueAggregatorEvents.AGGREGATED_ISSUE_UPDATED,
+        event => {
+          const withId = event.data as WithSymbolId<AggregatedIssue>;
+          // Emit aggregated issue only if it's a new one
+          if (withId[stableIdSymbol]) {
+            return;
+          }
+          page.emit('issue', event.data);
+        },
+      );
+    }
 
     try {
       // @ts-expect-error use existing CDP client (internal Puppeteer API).
       const session = page._client() as CDPSession;
+      page.on('framenavigated', (frame: Frame) => {
+        // Only split the storage on main frame navigation
+        if (frame !== page.mainFrame()) {
+          return;
+        }
+        seenKeys.clear();
+        setupIssueAggregator();
+      });
+
       session.on('Audits.issueAdded', data => {
         try {
           const inspectorIssue = data.issue;

tests/tools/console.test.ts

@@ -41,7 +41,7 @@ describe('console', () => {
       });
     });
 
-    it('lists issues messages', async () => {
+    it('lists issues', async () => {
       await withBrowser(async (response, context) => {
         const page = await context.newPage();
         const issuePromise = new Promise<void>(resolve => {
@@ -63,6 +63,48 @@ describe('console', () => {
       });
     });
 
+    it('lists issues after a page reload', async () => {
+      await withBrowser(async (response, context) => {
+        const page = await context.newPage();
+        const issuePromise = new Promise<void>(resolve => {
+          page.once('issue', () => {
+            resolve();
+          });
+        });
+
+        await page.setContent('<input type="text" name="username" />');
+        await issuePromise;
+        await listConsoleMessages.handler({params: {}}, response, context);
+        {
+          const formattedResponse = await response.handle('test', context);
+          const textContent = formattedResponse[0] as {text: string};
+          assert.ok(
+            textContent.text.includes(
+              `msgid=1 [issue] An element doesn't have an autocomplete attribute (count: 1)`,
+            ),
+          );
+        }
+
+        const anotherIssuePromise = new Promise<void>(resolve => {
+          page.once('issue', () => {
+            resolve();
+          });
+        });
+        await page.reload();
+        await page.setContent('<input type="text" name="username" />');
+        await anotherIssuePromise;
+        {
+          const formattedResponse = await response.handle('test', context);
+          const textContent = formattedResponse[0] as {text: string};
+          assert.ok(
+            textContent.text.includes(
+              `msgid=2 [issue] An element doesn't have an autocomplete attribute (count: 1)`,
+            ),
+          );
+        }
+      });
+    });
+
     it('work with primitive unhandled errors', async () => {
       await withBrowser(async (response, context) => {
         const page = await context.newPage();