Use proxified url for asset discovery (#387)

* Added support to fetch proxified url

* Improved tests

* Fixed lint

index.js

@@ -6,6 +6,12 @@ const testCafePkg = require('testcafe/package.json');
 const CLIENT_INFO = `${sdkPkg.name}/${sdkPkg.version}`;
 const ENV_INFO = `${testCafePkg.name}/${testCafePkg.version}`;
 
+function parseProxyBaseUrl(proxyUrl) {
+  // proxyUrl is of format http://192.168.0.104:57634/VsZiT1t2l*stFMYCMD1/https://www.example.com/
+  const parsedProxyUrl = new URL(proxyUrl);
+  return `${parsedProxyUrl.origin}/${parsedProxyUrl.pathname.split('/')[1]}`;
+}
+
 // Take a DOM snapshot and post it to the snapshot endpoint
 module.exports = async function percySnapshot(t, name, options) {
   if (!t) throw new Error("The test function's `t` argument is required.");
@@ -20,12 +26,23 @@ module.exports = async function percySnapshot(t, name, options) {
 
     // Serialize and capture the DOM
     /* istanbul ignore next: no instrumenting injected code */
-    let { domSnapshot, url } = await t.eval(() => ({
+    let { domSnapshot, url, proxyUrl } = await t.eval(() => ({
       /* eslint-disable-next-line no-undef */
       domSnapshot: PercyDOM.serialize(options),
-      url: document.URL
+      // window.location.href as well as document.URL is overriden to return correct test page url
+      // and does not include proxy url
+      url: window.location.href || document.URL,
+      // We get proxy URL from internal implementation of hammerhead, there is no API to get it
+      // otherwise in testcafe. We need this because when https sites are being tested with http
+      // proxy, we are unable to do resource discovery due to SSL errors [ testcafe replaces
+      // all urls with proxied urls and causes http calls from https page in asset discovery ]
+      proxyUrl: window['%hammerhead%']?.utils?.url?.getProxyUrl('')
     }), { boundTestRun: t, dependencies: { options } });
 
+    if (proxyUrl) {
+      url = `${parseProxyBaseUrl(proxyUrl)}/${url}`;
+    }
+
     // Post the DOM to the snapshot endpoint with snapshot options and other info
     await utils.postSnapshot({
       ...options,

tests/index.test.js

@@ -1,10 +1,12 @@
 import expect from 'expect';
 import helpers from '@percy/sdk-utils/test/helpers';
+import { waitForPercyIdle } from '@percy/sdk-utils';
 import percySnapshot from '..';
 
 fixture('percySnapshot')
   .page(helpers.testSnapshotURL)
-  .beforeEach(() => helpers.setupTest());
+  .beforeEach(() => helpers.setupTest())
+  .after(async () => await waitForPercyIdle());
 
 test('throws an error when a test is not provided', async () => {
   await expect(percySnapshot())
@@ -31,10 +33,15 @@ test('posts snapshots to the local percy server', async t => {
   await percySnapshot(t, 'Snapshot 1');
   await percySnapshot(t, 'Snapshot 2');
 
+  // format is http://192.168.0.104:57634/VsZiT1t2l*stFMYCMD1/https://www.example.com/
+  const urlRegex = new RegExp(
+    `- url: http://.*:.*/.*/${helpers.testSnapshotURL}`
+  );
+
   expect(await helpers.get('logs')).toEqual(expect.arrayContaining([
     'Snapshot found: Snapshot 1',
     'Snapshot found: Snapshot 2',
-    `- url: ${helpers.testSnapshotURL}`,
+    expect.stringMatching(urlRegex),
     expect.stringMatching(/clientInfo: @percy\/testcafe\/.+/),
     expect.stringMatching(/environmentInfo: testcafe\/.+/)
   ]));