diff --git a/src/percy-agent-client/dom.ts b/src/percy-agent-client/dom.ts index 3566ac5b..32dd0cd3 100644 --- a/src/percy-agent-client/dom.ts +++ b/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') } } diff --git a/test/unit/percy-agent-client/dom.test.ts b/test/unit/percy-agent-client/dom.test.ts index e493ecd8..2f792f70 100644 --- a/test/unit/percy-agent-client/dom.test.ts +++ b/test/unit/percy-agent-client/dom.test.ts @@ -336,6 +336,7 @@ describe('DOM -', () => { createExample(` + @@ -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