added new command

percy · Feb 4, 2025 · 95b90d2 · 95b90d2
1 parent 2a78443
commit 95b90d2
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 33 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -81,6 +81,7 @@ jobs:
           name: dist
           path: packages
       - run: yarn
+      - run: sudo apt update
       - name: Install browser dependencies
         run: sudo apt-get install -y libgbm-dev
         if: ${{ matrix.os == 'ubuntu-latest' }}

diff --git a/packages/core/src/page.js b/packages/core/src/page.js
@@ -208,23 +208,17 @@ export class Page {
     this.log.debug('Serialize DOM', this.meta);
 
     /* istanbul ignore next: no instrumenting injected code */
-    await this.eval(async () => {
-      console.log('Executing pre-serialization command...');
-      try {
-        /* eslint-disable-next-line no-undef */
-        if (PercyDOM.checkForLoader()) {
-          const waitTime = 2000;
-          await new Promise(resolve => {
-            setTimeout(() => {
-              resolve();
-            }, waitTime);
-          });
-        }
-      } catch (err) {
-        const errorMessage = `Error while checking for loader: ${err.message}`;
-        console.error(errorMessage);
-      }
+    const waitTime = parseInt(process.env.LOADER_WAIT_TIMEOUT) || 2000;
+
+    const shouldWait = await this.eval(async () => {
+      /* eslint-disable-next-line no-undef */ /* istanbul ignore next */
+      return PercyDOM.checkForLoader();
     });
+    if (shouldWait) {
+      await new Promise(resolve => {
+        setTimeout(resolve, waitTime);
+      });
+    }
 
     let capture = await this.eval((_, options) => ({
       /* eslint-disable-next-line no-undef */

diff --git a/packages/core/test/percy.test.js b/packages/core/test/percy.test.js
@@ -105,8 +105,9 @@ describe('Percy', () => {
     });
 
     // expect required arguments are passed to PercyDOM.serialize
-    expect(evalSpy.calls.allArgs()[3]).toEqual(jasmine.arrayContaining([jasmine.anything(), { enableJavaScript: undefined, disableShadowDOM: true, domTransformation: undefined, reshuffleInvalidTags: undefined }]));
-
+    expect(evalSpy.calls.allArgs()[3][0]).toEqual(jasmine.any(Function));
+    expect(evalSpy.calls.allArgs()[3][0].constructor.name).toBe('AsyncFunction');
+    expect(evalSpy.calls.allArgs()[4]).toEqual(jasmine.arrayContaining([jasmine.anything(), { enableJavaScript: undefined, disableShadowDOM: true, domTransformation: undefined, reshuffleInvalidTags: undefined }]));
     expect(snapshot.url).toEqual('http://localhost:8000/');
     expect(snapshot.domSnapshot).toEqual(jasmine.objectContaining({
       html: '<!DOCTYPE html><html><head></head><body>' + (
@@ -115,6 +116,47 @@ describe('Percy', () => {
     }));
   });
 
+  it('should wait for n seconds if a loader is detected and env variable is present', async () => {
+    server.reply('/', () => [
+      200,
+      'text/html',
+      `<!DOCTYPE html><html><head></head><body><div style="width: 800px; height: 600px; display: block; visibility: visible; opacity: 1;" class="parent">
+        <div style="width: 600px; height: 500px; display: block; visibility: visible; opacity: 1;" class="loader">
+          <div></div>
+        </div>
+      </div></body></html>`
+    ]);
+    process.env.LOADER_WAIT_TIMEOUT = 4000;
+    await percy.browser.launch();
+    let page = await percy.browser.page();
+    await page.goto('http://localhost:8000');
+
+    let startTime = Date.now();
+    await page.snapshot({ disableShadowDOM: true });
+    let endTime = Date.now();
+    expect(endTime - startTime).toBeGreaterThanOrEqual(4000);
+  });
+
+  it('should wait for 2 seconds if loader is present but no env variable', async () => {
+    server.reply('/', () => [
+      200,
+      'text/html',
+      `<!DOCTYPE html><html><head></head><body><div style="width: 800px; height: 600px; display: block; visibility: visible; opacity: 1;" class="parent">
+        <div style="width: 600px; height: 500px; display: block; visibility: visible; opacity: 1;" class="loader">
+          <div></div>
+        </div>
+      </div></body></html>`
+    ]);
+    await percy.browser.launch();
+    let page = await percy.browser.page();
+    await page.goto('http://localhost:8000');
+
+    let startTime = Date.now();
+    await page.snapshot({ disableShadowDOM: true });
+    let endTime = Date.now();
+    expect(endTime - startTime).toBeGreaterThanOrEqual(2000);
+  });
+
   describe('.start()', () => {
     // rather than stub prototypes, extend and mock
     class TestPercy extends Percy {

diff --git a/packages/dom/src/check-dom-loader.js b/packages/dom/src/check-dom-loader.js
@@ -1,6 +1,5 @@
 // Determines if an element is visible
 export function isElementVisible(el) {
-  if (!el) return false;
   const style = window.getComputedStyle(el);
   return (
     style.display !== 'none' &&

diff --git a/packages/dom/test/check-dom-loader.test.js b/packages/dom/test/check-dom-loader.test.js
@@ -8,18 +8,55 @@ describe('checkForLoader', () => {
     withExample('<div id="content"></div>', { showLoader: true });
 
     loaderElement = document.querySelector('.loader');
-    div = document.querySelector('.parent');
-  });
-
-  it('should return true if a loader element is visible and covers sufficient area of the viewport', () => {
     loaderElement.style.display = 'block';
     loaderElement.style.visibility = 'visible';
     loaderElement.style.opacity = '1';
+    div = document.querySelector('.parent');
+    div.style.display = 'block';
+    div.style.visibility = 'visible';
+    div.style.opacity = '1';
+  });
+
+  afterEach(() => {
+    loaderElement = null;
+    div = null;
+  });
+
+  it('should return true if the loader is visible and meets the size percentage criteria', () => {
+    loaderElement.style.width = '800px';
+    loaderElement.style.height = '600px';
+    const result = checkForLoader();
+    expect(result).toBe(true);
+  });
+
+  it('should return true if parent meets the size percentage criteria', () => {
+    div.style.width = '800px';
+    div.style.height = '3000px';
+    loaderElement.style.width = '600px';
+    loaderElement.style.height = '500px';
 
     const result = checkForLoader();
     expect(result).toBe(true);
   });
 
+  it('should return false if one of percentage criteria fails', () => {
+    div.style.width = '800px';
+    div.style.height = '200px';
+    loaderElement.style.width = '600px';
+    loaderElement.style.height = '500px';
+
+    const result = checkForLoader();
+    expect(result).toBe(false);
+  });
+
+  it('should return true if loader has upto depth 1 children', () => {
+    const child1 = document.createElement('div');
+    div.style.height = '6000px';
+    loaderElement.appendChild(child1);
+    const result = checkForLoader();
+    expect(result).toBe(true);
+  });
+
   it('should return false if the loader element is not visible', () => {
     loaderElement.style.visibility = 'hidden';
 
@@ -44,16 +81,6 @@ describe('checkForLoader', () => {
     expect(result).toBe(false);
   });
 
-  it('should return true if the loader meets the size percentage criteria', () => {
-    div.style.width = '200px';
-    div.style.height = '200px';
-    loaderElement.style.width = '800px';
-    loaderElement.style.height = '600px';
-
-    const result = checkForLoader();
-    expect(result).toBe(true);
-  });
-
   it('should return false if no loader element is found', () => {
     div.removeChild(loaderElement);