Don't serialize canvas elements with JS enabled

percy · Mar 13, 2020 · 503968d · 503968d
1 parent 77eb8e9
commit 503968d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/percy-agent-client/dom.ts b/src/percy-agent-client/dom.ts
@@ -94,11 +94,11 @@ class DOM {
   private stabilizeDOM(clonedDOM: HTMLDocument): HTMLElement {
     this.serializeInputElements(clonedDOM)
     this.serializeFrameElements(clonedDOM)
-    this.serializeCanvasElements(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

diff --git a/test/integration/agent-integration.test.ts b/test/integration/agent-integration.test.ts
@@ -241,7 +241,20 @@ describe('Integration test', () => {
         // I cannot think of a nicer way to let the canvas animations/drawing settle
         // so sadly, use a timeout
         await page.waitFor(1000)
-        await snapshot(page, 'Canvas elements')
+        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 -- no JS', { enableJavaScript: true })
+        const $ = cheerio.load(domSnapshot)
+
+        expect($('[data-percy-canvas-serialized]').length).to.equal(0)
       })
     })
   })