fix: Remove loading attributes from cloned iframes (#555)

This attribute causes asset discovery to hang and eventually timeout since we
don't scroll the page. Removing the attribute is ideally what we want (to load
the iframe).

src/percy-agent-client/dom.ts

@@ -169,7 +169,6 @@ class DOM {
       // rerendered and do not effect the visuals of a page
       if (clonedDOM.head.contains(cloned)) {
         cloned!.remove()
-
       // if the frame document is accessible, we can serialize it
       } else if (frame.contentDocument) {
         // js is enabled and this frame was built with js, don't serialize it
@@ -188,6 +187,9 @@ class DOM {
       } else if (!enableJavaScript && builtWithJs) {
         cloned!.remove()
       }
+
+      // Remove any lazy loading attributes, since they hang asset discovery
+      cloned!.removeAttribute('loading')
     }
   }
 

test/unit/percy-agent-client/dom.test.ts

@@ -336,6 +336,7 @@ describe('DOM -', () => {
         createExample(`
           <iframe id="frame-external" src="https://example.com"></iframe>
           <iframe id="frame-input" srcdoc="<input/>"></iframe>
+          <iframe id="frame-lazy" srcdoc="<input/>" loading="lazy"></iframe>
           <iframe id="frame-js" src="javascript:void(
             this.document.body.innerHTML = '<p>made with js src</p>'
           )"></iframe>
@@ -386,6 +387,10 @@ describe('DOM -', () => {
         expect($dom('#frame-js-inject')).to.not.have.length
       })
 
+      it('removes loading attributes on iframes', () => {
+        expect($dom('#frame-lazy').attr('loading')).to.be.undefined
+      })
+
       it('does not serialize iframes with CORS', () => {
         expect($dom('#frame-external').attr('src')).to.equal('https://example.com')
         expect($dom('#frame-external').attr('srcdoc')).to.be.undefined