feat: Capture Canvas elements

src/percy-agent-client/dom.ts

@@ -95,9 +95,10 @@ class DOM {
     this.serializeInputElements(clonedDOM)
     this.serializeFrameElements(clonedDOM)
 
-    // We only want to serialize the CSSOM if JS isn't enabled.
+    // We only want to serialize the CSSOM or canvas if JS isn't enabled.
     if (!this.options.enableJavaScript) {
       this.serializeCSSOM(clonedDOM)
+      this.serializeCanvasElements(clonedDOM)
     }
 
     return clonedDOM.documentElement
@@ -225,6 +226,36 @@ class DOM {
     })
   }
 
+  /**
+   * Capture in-memory canvas elements & serialize them to images into the
+   * cloned DOM.
+   *
+   * Without this, applications that have canvas elements will be missing and
+   * appear broken. The Canvas DOM API allows you to covert them to images, which
+   * is what we're doing here to capture that in-memory state & serialize it
+   * into the DOM Percy captures.
+   *
+   * It's important to note the `.toDataURL` API requires WebGL canvas elements
+   * to use `preserveDrawingBuffer: true`. This is because `.toDataURL` captures
+   * from the drawing buffer, which is cleared after each render by default for
+   * performance.
+   *
+   */
+  private serializeCanvasElements(clonedDOM: HTMLDocument): void {
+    for (const $canvas of this.originalDOM.querySelectorAll('canvas')) {
+      const $image = clonedDOM.createElement('img')
+      const canvasId = $canvas.getAttribute('data-percy-element-id')
+      const $clonedCanvas = clonedDOM.querySelector(`[data-percy-element-id=${canvasId}]`) as any
+
+      $image.setAttribute('style', 'max-width: 100%')
+      $image.classList.add('percy-canvas-image')
+
+      $image.src = $canvas.toDataURL()
+      $image.setAttribute('data-percy-canvas-serialized', 'true')
+      $clonedCanvas.parentElement.insertBefore($image, $clonedCanvas)
+      $clonedCanvas.remove()
+    }
+  }
   /**
    * A single place to mutate the original DOM. This should be the last resort!
    * This will change the customer's DOM and have a possible impact on the
@@ -235,7 +266,8 @@ class DOM {
     const createUID = () => `_${Math.random().toString(36).substr(2, 9)}`
     const formNodes = this.originalDOM.querySelectorAll(FORM_ELEMENTS_SELECTOR)
     const frameNodes = this.originalDOM.querySelectorAll('iframe')
-    const elements = [...formNodes, ...frameNodes] as HTMLElement[]
+    const canvasNodes = this.originalDOM.querySelectorAll('canvas')
+    const elements = [...formNodes, ...frameNodes, ...canvasNodes] as HTMLElement[]
 
     // loop through each element and apply an ID for serialization later
     elements.forEach((elem) => {

test/integration/agent-integration.test.ts

@@ -233,5 +233,29 @@ describe('Integration test', () => {
 
       })
     })
+
+    describe('canvas', () => {
+      it('captures canvas elements', async () => {
+        await page.goto(`http://localhost:${PORT}/serialize-canvas.html`)
+        await page.waitFor('#webgl canvas')
+        // I cannot think of a nicer way to let the canvas animations/drawing settle
+        // so sadly, use a timeout
+        await page.waitFor(1000)
+        const domSnapshot = await snapshot(page, 'Canvas elements')
+        const $ = cheerio.load(domSnapshot)
+
+        expect($('[data-percy-canvas-serialized]').length).to.equal(2)
+      })
+
+      it("doesn't serialize with JS enabled", async () => {
+        await page.goto(`http://localhost:${PORT}/serialize-canvas.html`)
+        await page.waitFor('#webgl canvas')
+        await page.waitFor(1000)
+        const domSnapshot = await snapshot(page, 'Canvas elements -- with JS', { enableJavaScript: true })
+        const $ = cheerio.load(domSnapshot)
+
+        expect($('[data-percy-canvas-serialized]').length).to.equal(0)
+      })
+    })
   })
 })

test/integration/testcases/canvas/charts.js

@@ -0,0 +1,52 @@
+// Taken from:
+// https://github.com/chartjs/Chart.js/blob/master/samples/charts/doughnut.html
+window.chartColors = {
+  red: 'rgb(255, 99, 132)',
+  orange: 'rgb(255, 159, 64)',
+  yellow: 'rgb(255, 205, 86)',
+  green: 'rgb(75, 192, 192)',
+  blue: 'rgb(54, 162, 235)',
+  purple: 'rgb(153, 102, 255)',
+  grey: 'rgb(201, 203, 207)'
+};
+
+let config = {
+  type: 'doughnut',
+  data: {
+    datasets: [
+      {
+        data: ['22', '12', '67', '18', '33'],
+        backgroundColor: [
+          window.chartColors.red,
+          window.chartColors.orange,
+          window.chartColors.yellow,
+          window.chartColors.green,
+          window.chartColors.blue
+        ],
+        label: 'Dataset 1'
+      }
+    ],
+    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue']
+  },
+  options: {
+    responsive: true,
+    legend: {
+      position: 'top'
+    },
+    title: {
+      display: true,
+      text: 'Chart.js Doughnut Chart'
+    },
+    // Helps make tests more determistic
+    animation: {
+      animateScale: false,
+      animateRotate: false
+    }
+  }
+};
+
+window.onload = function() {
+  let ctx = document.querySelector('#graphs').getContext('2d');
+
+  window.myDoughnut = new Chart(ctx, config);
+};