🐛 Wait for network idle for responsive asset discovery (#512)

percy · Aug 19, 2021 · c9b8edc · c9b8edc
1 parent 4218676
commit c9b8edc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/packages/core/src/percy.js b/packages/core/src/percy.js
@@ -288,9 +288,6 @@ export default class Percy {
           root = createRootResource(url, domSnapshot);
         }
 
-        // copy widths to prevent mutation later
-        let widths = conf.widths.slice();
-
         // open a new browser page
         page = await this.browser.page({
           networkIdleTimeout: this.config.discovery.networkIdleTimeout,
@@ -315,6 +312,13 @@ export default class Percy {
           }
         });
 
+        // copy widths to prevent mutation
+        let widths = conf.widths.slice();
+        // resolves when the network is idle for discoverable assets
+        let discoveryIdle = () => page.network.idle(({ url }) => (
+          hostnameMatches(discovery.allowedHostnames, url)
+        ));
+
         // set the initial page size
         await page.resize({
           width: widths.shift(),
@@ -326,6 +330,7 @@ export default class Percy {
 
         // trigger resize events for other widths
         for (let width of widths) {
+          await discoveryIdle(); // ensure discovery idles before resizing
           await page.resize({ width, height: conf.minHeight });
         }
 
@@ -334,11 +339,8 @@ export default class Percy {
         if (percyCSS) resources.set(percyCSS.url, percyCSS);
 
         if (root) {
-          // ensure asset discovery has finished before uploading
-          await page.network.idle(({ url }) => (
-            hostnameMatches(discovery.allowedHostnames, url)
-          ));
-
+          // ensure discovery finishes before uploading
+          await discoveryIdle();
           root = injectPercyCSS(root, percyCSS);
           this.log.info(`Snapshot taken: ${name}`, meta);
           this._scheduleUpload(name, conf, [root, ...resources.values()]);

diff --git a/packages/core/test/discovery.test.js b/packages/core/test/discovery.test.js
@@ -530,8 +530,8 @@ describe('Discovery', () => {
       <head><link href="style.css" rel="stylesheet"/></head>
       <body>
         <p>Hello Percy!<p>
-        <img srcset="/img-400w.gif 400w, /img-800w.gif 800w"
-             sizes="(max-width: 600px) 400px, 800px"
+        <img srcset="/img-400w.gif 400w, /img-600w.gif 600w, /img-800w.gif 800w"
+             sizes="(max-width: 600px) 400px, (max-width: 800px) 600px, 800px"
              src="/img-800w.gif">
       </body>
       </html>
@@ -547,6 +547,8 @@ describe('Discovery', () => {
     server.reply('/', () => [200, 'text/html', responsiveDOM]);
     server.reply('/style.css', () => [200, 'text/css', responsiveCSS]);
     server.reply('/img-400w.gif', () => [200, 'image/gif', pixel]);
+    server.reply('/img-600w.gif', () => new Promise(r => (
+      setTimeout(r, 200, [200, 'image/gif', pixel]))));
     server.reply('/img-800w.gif', () => [200, 'image/gif', pixel]);
     server.reply('/img-bg-1.gif', () => [200, 'image/gif', pixel]);
     server.reply('/img-bg-2.gif', () => [200, 'image/gif', pixel]);
@@ -555,7 +557,7 @@ describe('Discovery', () => {
       name: 'test responsive',
       url: 'http://localhost:8000',
       domSnapshot: responsiveDOM,
-      widths: [400, 1200]
+      widths: [400, 800, 1200]
     });
 
     await percy.idle();
@@ -568,6 +570,7 @@ describe('Discovery', () => {
 
     expect(captured[0]).toEqual(jasmine.arrayContaining([
       resource('/img-400w.gif'),
+      resource('/img-600w.gif'),
       resource('/img-800w.gif'),
       resource('/img-bg-1.gif'),
       resource('/img-bg-2.gif')