@applitools/eyes-cypress 3.23.9 → 3.24.0-beta.0

package/src/browser/commands.js

@@ -1,147 +1,167 @@
-/* global Cypress,cy,window,before,after,navigator */
-'use strict';
-const poll = require('./poll');
-const processPage = require('@applitools/dom-snapshot/dist/processPageCjs');
-const domSnapshotOptions = {dontFetchResources: Cypress.config('eyesDisableBrowserFetching')};
-const makeEyesCheckWindow = require('./eyesCheckWindow');
-const makeHandleCypressViewport = require('./makeHandleCypressViewport');
-const handleCypressViewport = makeHandleCypressViewport({cy});
-const makeSend = require('./makeSend');
-const send = makeSend(Cypress.config('eyesPort'), window.fetch);
-const makeSendRequest = require('./sendRequest');
-const sendRequest = makeSendRequest(send);
-
-const eyesCheckWindow = makeEyesCheckWindow({sendRequest, processPage, domSnapshotOptions});
-
-function getGlobalConfigProperty(prop) {
-  const property = Cypress.config(prop);
-  const shouldParse = ['eyesBrowser', 'eyesLayoutBreakpoints'];
-  return property ? (shouldParse.includes(prop) ? JSON.parse(property) : property) : undefined;
-}
-
-const shouldUseBrowserHooks =
-  !getGlobalConfigProperty('eyesIsDisabled') &&
-  (getGlobalConfigProperty('isInteractive') ||
-    !getGlobalConfigProperty('eyesIsGlobalHooksSupported'));
-
-if (shouldUseBrowserHooks) {
-  const batchEnd = poll(() => {
-    return sendRequest({command: 'batchEnd'});
-  });
-
-  before(() => {
-    sendRequest({
-      command: 'batchStart',
-      data: {isInteractive: getGlobalConfigProperty('isInteractive')},
-    });
-  });
-
-  after(() => {
-    cy.then({timeout: 86400000}, () => {
-      return batchEnd().catch(e => {
-        if (!!getGlobalConfigProperty('eyesFailCypressOnDiff')) {
-          throw e;
-        }
-      });
-    });
-  });
-}
-
-let isCurrentTestDisabled;
-
-Cypress.Commands.add('eyesOpen', function(args = {}) {
-  Cypress.config('eyesOpenArgs', args);
-  Cypress.log({name: 'Eyes: open'});
-  const userAgent = navigator.userAgent;
-  const {title: testName} = this.currentTest || this.test || Cypress.currentTest;
-  const {browser: eyesOpenBrowser, isDisabled} = args;
-  const globalBrowser = getGlobalConfigProperty('eyesBrowser');
-  const defaultBrowser = {
-    width: getGlobalConfigProperty('viewportWidth'),
-    height: getGlobalConfigProperty('viewportHeight'),
-    name: 'chrome',
-  };
-
-  const browser =
-    validateBrowser(eyesOpenBrowser) || validateBrowser(globalBrowser) || defaultBrowser;
-
-  if (Cypress.config('eyesIsDisabled') && isDisabled === false) {
-    throw new Error(
-      `Eyes-Cypress is disabled by an env variable or in the applitools.config.js file, but the "${testName}" test was passed isDisabled:false. A single test cannot be enabled when Eyes.Cypress is disabled through the global configuration. Please remove "isDisabled:false" from cy.eyesOpen() for this test, or enable Eyes.Cypress in the global configuration, either by unsetting the APPLITOOLS_IS_DISABLED env var, or by deleting 'isDisabled' from the applitools.config.js file.`,
-    );
-  }
-  isCurrentTestDisabled = getGlobalConfigProperty('eyesIsDisabled') || isDisabled;
-  if (isCurrentTestDisabled) return;
-
-  if (browser) {
-    if (Array.isArray(browser)) {
-      browser.forEach(fillDefaultBrowserName);
-    } else {
-      fillDefaultBrowserName(browser);
-    }
-  }
-
-  return handleCypressViewport(browser).then({timeout: 15000}, () =>
-    sendRequest({
-      command: 'open',
-      data: Object.assign({testName}, args, {browser, userAgent}),
-    }),
-  );
-});
-
-Cypress.Commands.add('eyesCheckWindow', args => {
-  Cypress.log({name: 'Eyes: check window'});
-  if (isCurrentTestDisabled) return;
-  const eyesOpenArgs = getGlobalConfigProperty('eyesOpenArgs');
-  const defaultBrowser = {
-    width: getGlobalConfigProperty('viewportWidth'),
-    height: getGlobalConfigProperty('viewportHeight'),
-  };
-  const globalArgs = {
-    browser: getGlobalConfigProperty('eyesBrowser'),
-    layoutBreakpoints: getGlobalConfigProperty('eyesLayoutBreakpoints'),
-    waitBeforeCapture: getGlobalConfigProperty('eyesWaitBeforeCapture'),
-  };
-
-  const browser = eyesOpenArgs.browser || globalArgs.browser || defaultBrowser;
-  const layoutBreakpoints =
-    (args && args.layoutBreakpoints) ||
-    (eyesOpenArgs && eyesOpenArgs.layoutBreakpoints) ||
-    globalArgs.layoutBreakpoints;
-
-  const waitBeforeCapture =
-    (args && args.waitBeforeCapture) ||
-    (eyesOpenArgs && eyesOpenArgs.waitBeforeCapture) ||
-    globalArgs.waitBeforeCapture;
-
-  const checkArgs = {layoutBreakpoints, browser, waitBeforeCapture};
-  if (typeof args === 'object') {
-    Object.assign(checkArgs, args);
-  } else {
-    Object.assign(checkArgs, {tag: args});
-  }
-
-  return cy.document({log: false}).then({timeout: 60000}, doc => eyesCheckWindow(doc, checkArgs));
-});
-
-Cypress.Commands.add('eyesClose', () => {
-  Cypress.log({name: 'Eyes: close'});
-  if (isCurrentTestDisabled) {
-    isCurrentTestDisabled = false;
-    return;
-  }
-  return sendRequest({command: 'close'});
-});
-
-function fillDefaultBrowserName(browser) {
-  if (!browser.name && !browser.iosDeviceInfo && !browser.chromeEmulationInfo) {
-    browser.name = 'chrome';
-  }
-}
-
-function validateBrowser(browser) {
-  if (!browser) return false;
-  if (Array.isArray(browser)) return browser.length ? browser : false;
-  if (Object.keys(browser).length === 0) return false;
-  return browser;
-}
+/* global Cypress,cy,after,navigator */
+'use strict';
+const spec = require('../../dist/browser/spec-driver');
+const Refer = require('./refer');
+const Socket = require('./socket');
+const {socketCommands} = require('./socketCommands');
+const {eyesOpenMapValues} = require('./eyesOpenMapping');
+const {eyesCheckMapValues} = require('./eyesCheckMapping');
+
+const refer = new Refer(value => {
+  if (!value || !value.constructor || !value.constructor.name) return false;
+  const name = value.constructor.name;
+  return name === 'HTMLDocument' || name === 'Window' || value.ownerDocument;
+});
+const socket = new Socket();
+const throwErr = Cypress.config('failCypressOnDiff');
+socketCommands(socket, refer);
+let connectedToUniversal = false;
+
+let manager,
+  eyes,
+  closePromiseArr = [];
+
+function getGlobalConfigProperty(prop) {
+  const property = Cypress.config(prop);
+  const shouldParse = ['eyesBrowser', 'eyesLayoutBreakpoints'];
+  return property ? (shouldParse.includes(prop) ? JSON.parse(property) : property) : undefined;
+}
+
+const shouldUseBrowserHooks =
+  !getGlobalConfigProperty('eyesIsDisabled') &&
+  (getGlobalConfigProperty('isInteractive') ||
+    !getGlobalConfigProperty('eyesIsGlobalHooksSupported'));
+
+Cypress.Commands.add('eyesGetAllTestResults', async () => {
+  if (isCurrentTestDisabled) {
+    isCurrentTestDisabled = false;
+    return;
+  }
+  await Promise.all(closePromiseArr);
+  return socket.request('EyesManager.closeAllEyes', {manager, throwErr});
+});
+
+if (shouldUseBrowserHooks) {
+  after(() => {
+    if (!manager) return;
+    return cy.then({timeout: 86400000}, async () => {
+      if (isCurrentTestDisabled) {
+        isCurrentTestDisabled = false;
+        return;
+      }
+      const resultConfig = {
+        showLogs: Cypress.config('appliConfFile').showLogs,
+        eyesFailCypressOnDiff: Cypress.config('eyesFailCypressOnDiff'),
+        isTextTerminal: Cypress.config('isTextTerminal'),
+        tapDirPath: Cypress.config('appliConfFile').tapDirPath,
+        tapFileName: Cypress.config('appliConfFile').tapFileName,
+      };
+      await Promise.all(closePromiseArr);
+      const testResults = await socket.request('EyesManager.closeAllEyes', {manager, throwErr});
+      const message = await socket.request('Test.printTestResults', {testResults, resultConfig});
+      if (
+        !!getGlobalConfigProperty('eyesFailCypressOnDiff') &&
+        message &&
+        message.includes('Eyes-Cypress detected diffs or errors')
+      ) {
+        throw new Error(message);
+      }
+    });
+  });
+}
+
+let isCurrentTestDisabled;
+
+Cypress.Commands.add('eyesOpen', function(args = {}) {
+  Cypress.log({name: 'Eyes: open'});
+  Cypress.config('eyesOpenArgs', args);
+  const {title: testName} = this.currentTest || this.test || Cypress.currentTest;
+
+  if (Cypress.config('eyesIsDisabled') && args.isDisabled === false) {
+    throw new Error(
+      `Eyes-Cypress is disabled by an env variable or in the applitools.config.js file, but the "${testName}" test was passed isDisabled:false. A single test cannot be enabled when Eyes.Cypress is disabled through the global configuration. Please remove "isDisabled:false" from cy.eyesOpen() for this test, or enable Eyes.Cypress in the global configuration, either by unsetting the APPLITOOLS_IS_DISABLED env var, or by deleting 'isDisabled' from the applitools.config.js file.`,
+    );
+  }
+  isCurrentTestDisabled = getGlobalConfigProperty('eyesIsDisabled') || args.isDisabled;
+  if (isCurrentTestDisabled) return;
+
+  return cy.then({timeout: 86400000}, async () => {
+    setRootContext();
+    const driver = refer.ref(cy.state('window').document);
+
+    if (!connectedToUniversal) {
+      socket.connect(`ws://localhost:${Cypress.config('eyesPort')}/eyes`);
+      connectedToUniversal = true;
+      socket.emit('Core.makeSDK', {
+        name: 'eyes.cypress',
+        version: require('../../package.json').version,
+        commands: Object.keys(spec).concat(['isSelector', 'isDriver', 'isElement']), // TODO fix spec.isSelector and spec.isDriver and spec.isElement in driver utils
+        cwd: process.cwd(),
+      });
+
+      manager =
+        manager ||
+        (await socket.request(
+          'Core.makeManager',
+          Object.assign(
+            {},
+            {concurrency: Cypress.config('eyesTestConcurrency')},
+            {legacy: false, type: 'vg'},
+          ),
+        ));
+    }
+
+    const appliConfFile = Cypress.config('appliConfFile');
+    const config = eyesOpenMapValues({
+      args,
+      appliConfFile,
+      testName,
+      shouldUseBrowserHooks,
+      defaultBrowser: {
+        width: Cypress.config('viewportWidth'),
+        height: Cypress.config('viewportHeight'),
+        name: 'chrome',
+      },
+    });
+    eyes = await socket.request('EyesManager.openEyes', {manager, driver, config});
+  });
+});
+
+Cypress.Commands.add('eyesCheckWindow', args =>
+  cy.then({timeout: 86400000}, () => {
+    if (isCurrentTestDisabled) return;
+
+    setRootContext();
+
+    Cypress.log({name: 'Eyes: check window'});
+
+    const checkSettings = eyesCheckMapValues({args});
+
+    return socket.request('Eyes.check', {
+      eyes,
+      settings: checkSettings,
+    });
+  }),
+);
+
+Cypress.Commands.add('eyesClose', () => {
+  return cy.then({timeout: 86400000}, () => {
+    if (isCurrentTestDisabled) return;
+
+    Cypress.log({name: 'Eyes: close'});
+    if (isCurrentTestDisabled) {
+      isCurrentTestDisabled = false;
+      return;
+    }
+
+    // intentionally not returning the result in order to not wait on the close promise
+    const p = socket.request('Eyes.close', {eyes, throwErr: false}).catch(err => {
+      console.log('Error in cy.eyesClose', err);
+    });
+    closePromiseArr.push(p);
+  });
+});
+
+function setRootContext() {
+  cy.state('window').document['applitools-marker'] = 'root-context';
+}

package/src/browser/eyesCheckMapping.js

@@ -0,0 +1,71 @@
+function eyesCheckMapValues({args}) {
+  return toCheckWindowConfiguration(args);
+}
+
+function toCheckWindowConfiguration(config = {}) {
+  const mappedValues = [
+    'tag',
+    'hooks',
+    'ignore',
+    'floating',
+    'strict',
+    'layout',
+    'content',
+    'accessibility',
+    'region',
+    'selector',
+  ];
+
+  let regionSettings = {};
+  let shadowDomSettings = {};
+  const checkSettings = {
+    name: config.tag,
+    scriptHooks: config.hooks,
+    ignoreRegions: config.ignore,
+    floatingRegions: config.floating,
+    strictRegions: config.strict,
+    layoutRegions: config.layout,
+    contentRegions: config.content,
+    accessibilityRegions: config.accessibility,
+  };
+
+  if (config.target === 'region') {
+    if (!Array.isArray(config.selector)) {
+      if (!config.hasOwnProperty('selector')) {
+        regionSettings = {
+          region: config.region,
+        };
+      } else {
+        regionSettings = {
+          region: config.selector,
+        };
+      }
+    } else {
+      const selectors = config.selector;
+      for (let i = selectors.length - 1; i > -1; i--) {
+        if (i === selectors.length - 1) {
+          shadowDomSettings['shadow'] = selectors[i].selector;
+        } else {
+          const prevSettings = Object.assign({}, shadowDomSettings);
+          shadowDomSettings['selector'] = selectors[i].selector;
+          if (!prevSettings.hasOwnProperty('selector')) {
+            shadowDomSettings['shadow'] = prevSettings.shadow;
+          } else {
+            shadowDomSettings['shadow'] = prevSettings;
+          }
+        }
+      }
+      regionSettings = {region: shadowDomSettings};
+    }
+  }
+
+  for (const val of mappedValues) {
+    if (config.hasOwnProperty(val)) {
+      delete config[val];
+    }
+  }
+
+  return Object.assign({}, checkSettings, regionSettings, config);
+}
+
+module.exports = {eyesCheckMapValues};

package/src/browser/eyesOpenMapping.js

@@ -0,0 +1,34 @@
+function eyesOpenMapValues({args, appliConfFile, testName, shouldUseBrowserHooks}) {
+  let browsersInfo = args.browser || appliConfFile.browser;
+
+  if (browsersInfo) {
+    if (Array.isArray(browsersInfo)) {
+      browsersInfo.forEach(fillDefaultBrowserName);
+    } else {
+      fillDefaultBrowserName(browsersInfo);
+      browsersInfo = [browsersInfo];
+    }
+  }
+
+  const mappedArgs = {
+    ...args,
+    browsersInfo,
+  };
+
+  delete mappedArgs.browser;
+  delete appliConfFile.browser;
+
+  return Object.assign(
+    {testName, dontCloseBatches: !shouldUseBrowserHooks},
+    appliConfFile,
+    mappedArgs,
+  );
+}
+
+function fillDefaultBrowserName(browser) {
+  if (!browser.name && !browser.iosDeviceInfo && !browser.chromeEmulationInfo) {
+    browser.name = 'chrome';
+  }
+}
+
+module.exports = {eyesOpenMapValues};

package/src/browser/makeSend.js

@@ -1,22 +1,18 @@
-'use strict';
-const throat = require('throat');
-const CONCURRENCY_LIMITATION = 100;
-
-function makeSend(port, fetch) {
-  const send = function send({
-    command,
-    data,
-    method = 'POST',
-    headers = {'Content-Type': 'application/json'},
-  }) {
-    return fetch(`https://localhost:${port}/eyes/${command}`, {
-      method,
-      body: headers['Content-Type'] === 'application/json' ? JSON.stringify(data) : data,
-      headers,
-    });
-  };
-
-  return throat(CONCURRENCY_LIMITATION, send);
-}
-
-module.exports = makeSend;
+'use strict';
+
+function makeSend(port, fetch) {
+  return function send({
+    command,
+    data,
+    method = 'POST',
+    headers = {'Content-Type': 'application/json'},
+  }) {
+    return fetch(`https://localhost:${port}/eyes/${command}`, {
+      method,
+      body: headers['Content-Type'] === 'application/json' ? JSON.stringify(data) : data,
+      headers,
+    });
+  };
+}
+
+module.exports = makeSend;

package/src/browser/refer.js

@@ -0,0 +1,57 @@
+const uuid = require('uuid');
+
+const REF_ID = 'applitools-ref-id';
+class Refer {
+  constructor(check) {
+    this.store = new Map();
+    this.relation = new Map();
+    this.check = check;
+  }
+
+  isRef(ref) {
+    return Boolean(ref && ref[REF_ID]);
+  }
+
+  ref(value, parentRef) {
+    if (this.check(value)) {
+      const ref = uuid.v4();
+      this.store.set(ref, value);
+      if (parentRef) {
+        let childRefs = this.relation.get(parentRef[REF_ID]);
+        if (!childRefs) {
+          childRefs = new Set();
+          this.relation.set(parentRef[REF_ID], childRefs);
+        }
+        childRefs.add({[REF_ID]: ref});
+      }
+      return {[REF_ID]: ref};
+    } else if (Array.isArray(value)) {
+      return value.map(value => this.ref(value, parentRef));
+    } else if (typeof value === 'object' && value !== null) {
+      return Object.entries(value).reduce((obj, [key, value]) => {
+        return Object.assign(obj, {[key]: this.ref(value, parentRef)});
+      }, {});
+    } else {
+      return value;
+    }
+  }
+
+  deref(ref) {
+    if (this.isRef(ref)) {
+      return this.store.get(ref[REF_ID]);
+    } else {
+      return ref;
+    }
+  }
+
+  destroy(ref) {
+    if (!this.isRef(ref)) return;
+    const childRefs = this.relation.get(ref[REF_ID]);
+    if (childRefs) {
+      childRefs.forEach(childRef => this.destroy(childRef));
+    }
+    this.store.delete(ref[REF_ID]);
+  }
+}
+
+module.exports = Refer;

package/src/browser/sendRequest.js

@@ -1,16 +1,16 @@
-'use strict';
-
-function makeSendRequest(send) {
-  return function sendRequest(args) {
-    return send(args)
-      .then(resp => resp.json())
-      .then(body => {
-        if (!body.success) {
-          throw new Error(body.error);
-        }
-        return body.result;
-      });
-  };
-}
-
-module.exports = makeSendRequest;
+'use strict';
+
+function makeSendRequest(send) {
+  return function sendRequest(args) {
+    return send(args)
+      .then(resp => resp.json())
+      .then(body => {
+        if (!body.success) {
+          throw new Error(body.error);
+        }
+        return body.result;
+      });
+  };
+}
+
+module.exports = makeSendRequest;