@applitools/eyes-cypress 3.22.7 → 3.23.2

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 ## Unreleased
 
 
+## 3.23.2 - 2021/11/17
+
+- updated to @applitools/visual-grid-client@15.8.46 (from 15.8.45)
+
+ ## 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

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.7",
+  "version": "3.23.2",
   "main": "index.js",
   "license": "SEE LICENSE IN LICENSE",
   "bin": {
@@ -42,7 +42,7 @@
     "@applitools/dom-snapshot": "4.5.10",
     "@applitools/functional-commons": "1.6.0",
     "@applitools/logger": "1.0.5",
-    "@applitools/visual-grid-client": "15.8.43",
+    "@applitools/visual-grid-client": "15.8.46",
     "body-parser": "1.19.0",
     "chalk": "3.0.0",
     "cors": "2.8.5",
@@ -52,9 +52,9 @@
   "devDependencies": {
     "@applitools/scripts": "^1.0.1",
     "@applitools/sdk-release-kit": "0.13.4",
-    "@applitools/sdk-shared": "0.9.7",
+    "@applitools/sdk-shared": "0.9.9",
     "@applitools/snaptdout": "1.0.1",
-    "@applitools/test-server": "1.0.6",
+    "@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('isInteractive')) {
+
+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

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

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,16 +1,23 @@
 'use strict';
-const shouldSetGlobalHooks = require('./shouldSetGlobalHooks');
+const isGlobalHooksSupported = require('./isGlobalHooksSupported');
 const {presult} = require('@applitools/functional-commons');
 
 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 [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:
@@ -19,8 +26,11 @@ function makePluginExport({startServer, eyesConfig, globalHooks}) {
       // in addition to the user's handler
       function onThatCallsUserDefinedHandler(eventName, handler) {
         const isRunEvent = eventName === 'before:run' || eventName === 'after:run';
-        const handlerToCall =
-          shouldSetGlobalHooks(config) && isRunEvent ? handlerThatCallsUserDefinedHandler : handler;
+        let handlerToCall = handler;
+        if (eyesConfig.eyesIsGlobalHooksSupported && isRunEvent) {
+          handlerToCall = handlerThatCallsUserDefinedHandler;
+          isGlobalHookCalledFromUserHandler = true;
+        }
         return origOn.call(this, eventName, handlerToCall);
 
         async function handlerThatCallsUserDefinedHandler() {