perf(screencast): clean cdp frame listeners on stop (#671)

Author: Kikobeats

packages/screencast/src/index.js

@@ -3,16 +3,35 @@
 module.exports = (page, opts) => {
   const cdp = page._client()
   let onFrame
+  let hasFrameListener = false
 
-  cdp.on('Page.screencastFrame', ({ data, metadata, sessionId }) => {
+  const onScreencastFrame = ({ data, metadata, sessionId }) => {
     cdp.send('Page.screencastFrameAck', { sessionId }).catch(() => {})
-    if (metadata.timestamp) onFrame(data, metadata)
-  })
+    if (metadata.timestamp && onFrame) onFrame(data, metadata)
+  }
+
+  const attachFrameListener = () => {
+    if (hasFrameListener) return
+    cdp.on('Page.screencastFrame', onScreencastFrame)
+    hasFrameListener = true
+  }
+
+  const detachFrameListener = () => {
+    if (!hasFrameListener) return
+    cdp.off('Page.screencastFrame', onScreencastFrame)
+    hasFrameListener = false
+  }
 
   return {
     // https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-startScreencast
-    start: () => cdp.send('Page.startScreencast', opts),
+    start: () => {
+      attachFrameListener()
+      return cdp.send('Page.startScreencast', opts)
+    },
     onFrame: fn => (onFrame = fn),
-    stop: () => cdp.send('Page.stopScreencast').catch(() => {})
+    stop: () => {
+      detachFrameListener()
+      return cdp.send('Page.stopScreencast').catch(() => {})
+    }
   }
 }

packages/screencast/test/index.js

@@ -31,3 +31,35 @@ test('capture frames', async t => {
     t.truthy(metadata.timestamp)
   })
 })
+
+test('clean up cdp frame listeners across screencast sessions', async t => {
+  const browserless = await getBrowserContext(t)
+  const page = await browserless.page()
+  const cdp = page._client()
+
+  const countListeners = () => cdp.listenerCount('Page.screencastFrame')
+
+  const screencastA = createScreencast(page, {
+    quality: 0,
+    format: 'png',
+    everyNthFrame: 1
+  })
+
+  t.is(countListeners(), 0)
+
+  await screencastA.start()
+  t.is(countListeners(), 1)
+  await screencastA.stop()
+  t.is(countListeners(), 0)
+
+  const screencastB = createScreencast(page, {
+    quality: 0,
+    format: 'png',
+    everyNthFrame: 1
+  })
+
+  await screencastB.start()
+  t.is(countListeners(), 1)
+  await screencastB.stop()
+  t.is(countListeners(), 0)
+})