@applitools/eyes-cypress 3.22.6 → 3.23.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 ## Unreleased
 
+
+ ## 3.23.1 - 2021/11/15
+
+ - fix types for region inside shadow
+- updated to @applitools/visual-grid-client@15.8.45 (from 15.8.44)
+
+ ## 3.23.0 - 2021/11/11
+
+ - support waitBeforeCapture
+- updated to @applitools/visual-grid-client@15.8.44 (from 15.8.43)
+
+## 3.22.8 - 2021/11/9
+
+- fix not calling the global hooks before:run and after:run at all, unless the user also called them in his plugins file.
+- fix not calling the browser hooks for Cypress versions < 6.2.0 (where global hooks are not supported).
+
+## 3.22.7 - 2021/11/7
+
+- replace legacy logger construction with new
+- Support running user defined run hooks in Cypress
+- Fix cypress tests not being cleaned up
+- Fix duplicate batch start/end events in cypress
+- updated to @applitools/dom-snapshot@4.5.10 (from 4.5.9)
+- updated to @applitools/visual-grid-client@15.8.43 (from 15.8.36)
+
 ## 3.22.6 - 2021/10/18
 
 - updated to @applitools/dom-snapshot@4.5.9 (from 4.5.8)

package/README.md

@@ -192,6 +192,7 @@ Applitools will take screenshots and perform the visual comparisons in the backg
     - [layoutBreakpoints](#layoutBreakpoints)
     - [sendDom](#sendDom)
     - [variationGroupId](#variationGroupId)
+    - [waitBeforeCapture](#waitBeforeCapture)
   - [Close](#Close)
 - [Concurrency](#Concurrency)
 - [Advanced configuration](#Advanced-configuration)
@@ -449,6 +450,20 @@ cy.eyesCheckWindow({variationGroupId: 'Login screen variation #1'})
 
 For more information, visit our documentation page: https://applitools.com/docs/features/baseline-variations-groups.html
 
+##### `waitBeforeCapture`
+
+A parameter that is set to wait a certain amount of milliseconds before capturing the pages snapshot. This will also apply between page resizes when using `layoutBreakpoints`.
+
+```
+cy.eyesOpen({
+  waitBeforeCapture: 1000
+  // ...
+})
+
+cy.eyesCheckWindow({
+  waitBeforeCapture: 1000
+})
+```
 
 ##### `useDom`
 
@@ -544,6 +559,7 @@ The list above is also the order of precedence, which means that if you pass a p
 | `accessibilityValidation` | undefined | An object that specifies the accessibility level and guidelines version to use for the screenshots. Possible values for **level** are `None`, `AA` and `AAA`, and possible values for **guidelinesVersion** are `WCAG_2_0` and `WCAG_2_1`. For example: `{level: 'AA', guidelinesVersion: 'WCAG_2_0'}`|
 | `visualGridOptions` | undefined | An object that specifies options to configure renderings on the Ultrafast grid. See more information [here](#visualgridoptions) |
 |`layoutBreakpoints`| undefined | When set to `true`, a snapshot of the DOM will be taken once for each browser/device size in the `browser` configuration. For optimization purposes, an array of numbers can be passed. The DOM snapshot will be taken once for every **width** in the array. For more information, see [layoutBreakpoints](#layoutBreakpoints)|
+|`waitBeforeCapture`| 100 | A parameter that is set to wait a certain amount of milliseconds before capturing the pages snapshot. This will also apply between page resizes when using `layoutBreakpoints`.
 
 ### Global configuration properties:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-cypress",
-  "version": "3.22.6",
+  "version": "3.23.1",
   "main": "index.js",
   "license": "SEE LICENSE IN LICENSE",
   "bin": {
@@ -35,12 +35,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/applitools/eyes.sdk.javascript1.git"
+    "url": "git://github.com/applitools/eyes.sdk.javascript1.git",
+    "directory": "packages/eyes-cypress"
   },
   "dependencies": {
-    "@applitools/dom-snapshot": "4.5.9",
+    "@applitools/dom-snapshot": "4.5.10",
     "@applitools/functional-commons": "1.6.0",
-    "@applitools/visual-grid-client": "15.8.36",
+    "@applitools/logger": "1.0.5",
+    "@applitools/visual-grid-client": "15.8.45",
     "body-parser": "1.19.0",
     "chalk": "3.0.0",
     "cors": "2.8.5",
@@ -49,10 +51,10 @@
   },
   "devDependencies": {
     "@applitools/scripts": "^1.0.1",
-    "@applitools/sdk-release-kit": "0.13.3",
-    "@applitools/sdk-shared": "0.9.6",
+    "@applitools/sdk-release-kit": "0.13.4",
+    "@applitools/sdk-shared": "0.9.9",
     "@applitools/snaptdout": "1.0.1",
-    "@applitools/test-server": "1.0.5",
+    "@applitools/test-server": "1.0.7",
     "chai": "^4.2.0",
     "chai-spies": "^1.0.0",
     "cookie-parser": "^1.4.4",

package/src/browser/commands.js

@@ -18,7 +18,13 @@ function getGlobalConfigProperty(prop) {
   const shouldParse = ['eyesBrowser', 'eyesLayoutBreakpoints'];
   return property ? (shouldParse.includes(prop) ? JSON.parse(property) : property) : undefined;
 }
-if (!getGlobalConfigProperty('eyesIsDisabled') && getGlobalConfigProperty('eyesLegacyHooks')) {
+
+const shouldUseBrowserHooks =
+  !getGlobalConfigProperty('eyesIsDisabled') &&
+  (getGlobalConfigProperty('isInteractive') ||
+    !getGlobalConfigProperty('eyesIsGlobalHooksSupported'));
+
+if (shouldUseBrowserHooks) {
   const batchEnd = poll(() => {
     return sendRequest({command: 'batchEnd'});
   });
@@ -94,6 +100,7 @@ Cypress.Commands.add('eyesCheckWindow', args => {
   const globalArgs = {
     browser: getGlobalConfigProperty('eyesBrowser'),
     layoutBreakpoints: getGlobalConfigProperty('eyesLayoutBreakpoints'),
+    waitBeforeCapture: getGlobalConfigProperty('eyesWaitBeforeCapture'),
   };
 
   const browser = eyesOpenArgs.browser || globalArgs.browser || defaultBrowser;
@@ -102,7 +109,12 @@ Cypress.Commands.add('eyesCheckWindow', args => {
     (eyesOpenArgs && eyesOpenArgs.layoutBreakpoints) ||
     globalArgs.layoutBreakpoints;
 
-  const checkArgs = {layoutBreakpoints, browser};
+  const waitBeforeCapture =
+    (args && args.waitBeforeCapture) ||
+    (eyesOpenArgs && eyesOpenArgs.waitBeforeCapture) ||
+    globalArgs.waitBeforeCapture;
+
+  const checkArgs = {layoutBreakpoints, browser, waitBeforeCapture};
   if (typeof args === 'object') {
     Object.assign(checkArgs, args);
   } else {

package/src/browser/eyesCheckWindow.js

@@ -21,11 +21,17 @@ function makeEyesCheckWindow({sendRequest, processPage, domSnapshotOptions, cypr
     function takeDomSnapshots(options) {
       const browser = args.browser;
       const breakpoints = args.layoutBreakpoints;
+      const waitBeforeCapture = args.waitBeforeCapture ? args.waitBeforeCapture : 100;
       const browsers = Array.isArray(browser) ? browser : [browser];
 
       if (!breakpoints) {
         //console.log('no breakpoints, taking single dom snapshot');
-        return takeDomSnapshot(options);
+        return cypress
+          .wrap({}, {log: false})
+          .wait(waitBeforeCapture)
+          .then(() => {
+            return takeDomSnapshot(options);
+          });
       }
 
       return browsers
@@ -52,7 +58,7 @@ function makeEyesCheckWindow({sendRequest, processPage, domSnapshotOptions, cypr
             // console.log(`taking dom snapshot for width ${requiredWidth}`);
             cypress
               .viewport(Number(requiredWidth), height, {log: false})
-              .wait(300, {log: false})
+              .wait(waitBeforeCapture, {log: false})
               .then({log: false, timeout: 900000}, () => {
                 return takeDomSnapshot(options).then(snapshot => {
                   browsersInfo.forEach(({index}) => (snapshots[index] = snapshot));

package/src/plugin/config.js

@@ -42,8 +42,8 @@ function makeConfig() {
     eyesFailCypressOnDiff:
       config.failCypressOnDiff === undefined ? true : !!config.failCypressOnDiff,
     eyesDisableBrowserFetching: !!config.disableBrowserFetching,
-    eyesLegacyHooks: true,
     eyesTestConcurrency: config.testConcurrency || DEFAULT_TEST_CONCURRENCY,
+    eyesWaitBeforeCapture: config.waitBeforeCapture,
   };
 
   return {config, eyesConfig};

package/src/plugin/hooks.js

@@ -4,41 +4,39 @@ const makeHandleBatchResultsFile = require('./makeHandleBatchResultsFile');
 const getErrorsAndDiffs = require('./getErrorsAndDiffs');
 const processCloseAndAbort = require('./processCloseAndAbort');
 const errorDigest = require('./errorDigest');
-const {tests} = require('./runningTests');
+const runningTests = require('./runningTests');
 
-function setGlobalRunHooks(on, {visualGridClient, logger, eyesConfig}) {
+function makeGlobalRunHooks({visualGridClient, logger}) {
   let waitForBatch;
 
-  on('before:run', ({config}) => {
-    const {isTextTerminal, eyesTestConcurrency: testConcurrency} = config;
-    // ugly but neccessary here - as this is the only place that cypress exposes the run mode on config
-    if (!isTextTerminal) return;
-    eyesConfig.eyesLegacyHooks = false;
+  return {
+    'before:run': ({config}) => {
+      const {isTextTerminal, eyesTestConcurrency: testConcurrency} = config;
+      if (!config.isTextTerminal) return;
 
-    waitForBatch = makeWaitForBatch({
-      logger: (logger.extend && logger.extend('waitForBatch')) || console,
-      testConcurrency,
-      processCloseAndAbort,
-      getErrorsAndDiffs,
-      errorDigest,
-      isInteractive: !isTextTerminal,
-      handleBatchResultsFile: makeHandleBatchResultsFile(config),
-    });
-  });
+      waitForBatch = makeWaitForBatch({
+        logger: (logger.extend && logger.extend('waitForBatch')) || console,
+        testConcurrency,
+        processCloseAndAbort,
+        getErrorsAndDiffs,
+        errorDigest,
+        isInteractive: !isTextTerminal,
+        handleBatchResultsFile: makeHandleBatchResultsFile(config),
+      });
+    },
 
-  on('after:run', async ({config}) => {
-    if (!config.isTextTerminal) return;
+    'after:run': async ({config}) => {
+      if (!config.isTextTerminal) return;
 
-    try {
-      // we rely on the fact that `runningTests.reset()` wasn't called
-      // so that tests that were added in `open` are available here (through `tests` in `runningTests.js`)
-      await waitForBatch(tests, visualGridClient.closeBatch);
-    } catch (e) {
-      if (!!config.eyesFailCypressOnDiff) {
-        throw e;
+      try {
+        await waitForBatch(runningTests.tests, visualGridClient.closeBatch);
+      } catch (e) {
+        if (!!config.eyesFailCypressOnDiff) {
+          throw e;
+        }
       }
-    }
-  });
+    },
+  };
 }
 
-module.exports = setGlobalRunHooks;
+module.exports = makeGlobalRunHooks;

package/src/plugin/{shouldSetGlobalHooks.js → isGlobalHooksSupported.js}

@@ -1,7 +1,7 @@
 const CYPRESS_SUPPORTED_VERSION = '6.2.0';
 const CYPRESS_NO_FLAG_VERSION = '6.7.0';
 
-function shouldSetGlobalHooks(config) {
+function isGlobalHooksSupported(config) {
   const {version, experimentalRunEvents} = config;
 
   return (
@@ -10,4 +10,4 @@ function shouldSetGlobalHooks(config) {
   );
 }
 
-module.exports = shouldSetGlobalHooks;
+module.exports = isGlobalHooksSupported;

package/src/plugin/pluginExport.js

@@ -1,22 +1,48 @@
 'use strict';
-const setGlobalRunHooks = require('./hooks');
-const shouldSetGlobalHooks = require('./shouldSetGlobalHooks');
+const isGlobalHooksSupported = require('./isGlobalHooksSupported');
+const {presult} = require('@applitools/functional-commons');
 
-function makePluginExport({startServer, eyesConfig, visualGridClient, logger}) {
+function makePluginExport({startServer, eyesConfig, globalHooks}) {
   return function pluginExport(pluginModule) {
     let closeEyesServer;
     const pluginModuleExports = pluginModule.exports;
-    pluginModule.exports = async (...args) => {
+    pluginModule.exports = async function(...args) {
       const {eyesPort, closeServer} = await startServer();
       closeEyesServer = closeServer;
-      const moduleExportsResult = await pluginModuleExports(...args);
-      const [on, config] = args;
-
-      if (shouldSetGlobalHooks({...config, ...eyesConfig})) {
-        setGlobalRunHooks(on, {visualGridClient, logger, eyesConfig});
+      const [origOn, config] = args;
+      let isGlobalHookCalledFromUserHandler = false;
+      eyesConfig.eyesIsGlobalHooksSupported = isGlobalHooksSupported(config);
+      const moduleExportsResult = await pluginModuleExports(onThatCallsUserDefinedHandler, config);
+      if (eyesConfig.eyesIsGlobalHooksSupported && !isGlobalHookCalledFromUserHandler) {
+        for (const [eventName, eventHandler] of Object.entries(globalHooks)) {
+          origOn.call(this, eventName, eventHandler);
+        }
       }
-
       return Object.assign({}, eyesConfig, {eyesPort}, moduleExportsResult);
+
+      // This piece of code exists because at the point of writing, Cypress does not support multiple event handlers:
+      // https://github.com/cypress-io/cypress/issues/5240#issuecomment-948277554
+      // So we wrap Cypress' `on` function in order to wrap the user-defined handler. This way we can call our own handler
+      // in addition to the user's handler
+      function onThatCallsUserDefinedHandler(eventName, handler) {
+        const isRunEvent = eventName === 'before:run' || eventName === 'after:run';
+        let handlerToCall = handler;
+        if (eyesConfig.eyesIsGlobalHooksSupported && isRunEvent) {
+          handlerToCall = handlerThatCallsUserDefinedHandler;
+          isGlobalHookCalledFromUserHandler = true;
+        }
+        return origOn.call(this, eventName, handlerToCall);
+
+        async function handlerThatCallsUserDefinedHandler() {
+          const [err] = await presult(
+            Promise.resolve(globalHooks[eventName].apply(this, arguments)),
+          );
+          await handler.apply(this, arguments);
+          if (err) {
+            throw err;
+          }
+        }
+      }
     };
     return function getCloseServer() {
       return closeEyesServer;

package/src/plugin/runningTests.js

@@ -9,8 +9,10 @@ const runningTests = {
     this.tests = [];
   },
   async abortTests() {
+    const tests = this.tests;
+    this.reset();
     return Promise.all(
-      this.tests.map(async test => {
+      tests.map(async test => {
         if (test.closePromise) {
           // this condition doesn't really happen in the code, but it's here for purity. This is used in handlers' batchStart in order to cleanup the state in case a zombie open was called.
           await test.closePromise;

package/src/plugin/startPlugin.js

@@ -1,5 +1,6 @@
 'use strict';
-const {makeVisualGridClient, Logger} = require('@applitools/visual-grid-client');
+const {makeVisualGridClient} = require('@applitools/visual-grid-client');
+const {makeLogger} = require('@applitools/logger');
 const makeStartServer = require('./server');
 const makePluginExport = require('./pluginExport');
 const {startApp} = require('./app');
@@ -8,13 +9,12 @@ const processCloseAndAbort = require('./processCloseAndAbort');
 const errorDigest = require('./errorDigest');
 const makeHandlers = require('./handlers');
 const makeConfig = require('./config');
+const makeGlobalRunHooks = require('./hooks');
 
 const {config, eyesConfig} = makeConfig();
-const logger = new Logger(config.showLogs, 'eyes');
+const logger = makeLogger({level: config.showLogs ? 'info' : 'silent', label: 'eyes'});
 
-const visualGridClient = makeVisualGridClient(
-  Object.assign(config, {logger: (logger.extend && logger.extend('vgc')) || logger}),
-);
+const visualGridClient = makeVisualGridClient({...config, logger: logger.extend('vgc')});
 
 const handlers = makeHandlers({
   logger,
@@ -25,8 +25,10 @@ const handlers = makeHandlers({
   errorDigest,
 });
 
+const globalHooks = makeGlobalRunHooks({visualGridClient, logger});
+
 const app = startApp({handlers, logger});
 const startServer = makeStartServer({app, logger});
 logger.log('eyes-cypress plugin running with config:', config);
 
-module.exports = makePluginExport({startServer, eyesConfig, visualGridClient, logger});
+module.exports = makePluginExport({startServer, eyesConfig, globalHooks});