@applitools/eyes-cypress 3.26.5 → 3.27.1

package/CHANGELOG.md

@@ -9,6 +9,28 @@
 
 
 
+
+## 3.27.1 - 2022/8/1
+
+### Features
+### Bug fixes
+- Fix `Maximum call stack size exceeded` error in `eyesCheck`
+
+## 3.27.0 - 2022/7/25
+
+### Features
+- Add support for padded coded regions
+- Add support for dynamic coded regions
+### Bug fixes
+- Fix `npx eyes-setup` for Cypress version with a caret, support `e2e.ts` as support file
+- Better support in DOM slot element
+
+## 3.26.6 - 2022/7/15
+
+### Features
+- Internal architecture fixes
+### Bug fixes
+
 ## 3.26.5 - 2022/7/12
 
 ### Features

package/README.md

@@ -1,4 +1,4 @@
-# Eyes-Cypress
+ # Eyes-Cypress
 
 Applitools Eyes SDK for [Cypress](https://www.cypress.io/).
 
@@ -213,6 +213,7 @@ Applitools will take screenshots and perform the visual comparisons in the backg
         - [`layout`](#layout)
         - [`strict`](#strict)
         - [`content`](#content)
+        - [`padded coded regions`](#padded-coded-regions)
         - [`accessibility`](#accessibility)
         - [`region in shadow DOM`](#region-in-shadow-dom)
         - [`scriptHooks`](#scripthooks)
@@ -224,6 +225,8 @@ Applitools will take screenshots and perform the visual comparisons in the backg
         - [`enablePatterns`](#enablepatterns)
         - [`matchLevel`](#matchlevel)
         - [`visualGridOptions`](#visualgridoptions)
+        - [`coded regions-regionId`](#regionId)
+        - [`lazy loading`](#lazy-loading)
       - [Close](#close)
       - [GetAllTestResults](#getalltestresults)
       - [deleteTestResults](#deletetestresults)
@@ -492,6 +495,22 @@ cy.get('.some-div-to-float').then($el => {
   })
   ```
 
+##### `padded coded regions`
+
+```js
+cy.get('some-region').then(el => {
+  cy.eyesCheckWindow({
+    // will add pedding to a region by a css selector at the left and top of the region
+    layout: {region: 'layout-region', padding: {left:20, top: 10}} 
+     // will add padding of 20px to all JQuery elements at the top, button, right and left of the region
+    ignore: {element: el, padding: 20},
+    // will add padding for a DOM element on the top of the region
+    content: {element: el[0], padding: {top:10}}
+  })
+
+})
+```
+
 ##### `accessibility`
 
 (optional): A single or an array of regions to perform accessibility checks, For example:
@@ -634,6 +653,38 @@ cy.eyesCheckWindow({
   }
 })
 ```
+#### regionId
+
+The regionId can be automaticaly set from the region that is passed or can be explicitly sent using `regionId` property
+
+```js
+cy.get('.region.two:nth-child(2)').then(el => {
+      cy.eyesCheckWindow({
+        fully: false,
+        ignore: [
+          {type: 'css', selector: '.region.three:nth-child(3n)'},
+          {type: 'xpath', selector: '//div[@class="region one"][3]'},
+          {element: el, regionId: 'my-region-id'},
+        ],
+      });
+})
+```
+#### lazy loading
+
+It's possible to have the SDK scroll the entire page (or a specific length of the page) to make sure all lazyily loaded assets are on the page before performing a check.
+
+```js
+// lazy loads with sensible defaults
+cy.eyesCheckWindow(lazyload:{})
+
+// lazy loads with options specified
+cy.eyesCheckWindow({lazyLoad: {
+  maxAmountToScroll: 1000,   // total pixels of the page to be scrolled
+  scrollLength: 250,  // amount of pixels to use for each scroll attempt
+  waitingTime: 500,   // milliseconds to wait in-between each scroll attempt
+}})
+```
+
 
 #### Close
 

package/bin/eyes-setup.js

@@ -8,6 +8,7 @@ const {handleTypeScript, handlerTypeScriptCypress10} = require('../src/setup/han
 const {version} = require('../package');
 const fs = require('fs');
 const cwd = process.cwd();
+const semver = require('semver');
 
 console.log(chalk.cyan('Setup eyes-cypress', version));
 const packageJson = JSON.parse(fs.readFileSync('package.json'));
@@ -18,17 +19,18 @@ if (packageJson.dependencies && packageJson.dependencies.cypress) {
 } else if (packageJson.devDependencies && packageJson.devDependencies.cypress) {
   cypressVersion = packageJson.devDependencies.cypress;
 }
-console.log(chalk.cyan('Cypress version that was found', cypressVersion));
-const isCypress10 = parseFloat(cypressVersion, 10) >= 10 ? true : false;
+const logStr = `Cypress version that was found ${cypressVersion}`;
 try {
-  if (!isCypress10) {
-    handlePlugin(cwd, isCypress10);
-    handleCommands(cwd);
-    handleTypeScript(cwd);
-  } else {
-    handlePlugin(cwd, isCypress10);
+  if (semver.satisfies(semver.coerce(String(cypressVersion)), '>=10.0.0')) {
+    console.log(chalk.cyan(logStr, ' (above v10 handler)'));
+    handlePlugin(cwd, true);
     const supportFilePath = handlerCommandsCypress10(cwd);
     handlerTypeScriptCypress10(supportFilePath);
+  } else {
+    console.log(chalk.cyan(logStr));
+    handlePlugin(cwd, false);
+    handleCommands(cwd);
+    handleTypeScript(cwd);
   }
 } catch (e) {
   console.log(chalk.red('Setup error:\n', e));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-cypress",
-  "version": "3.26.5",
+  "version": "3.27.1",
   "repository": {
     "type": "git",
     "url": "git://github.com/applitools/eyes.sdk.javascript1.git",
@@ -55,11 +55,11 @@
     }
   },
   "dependencies": {
-    "@applitools/eyes-api": "1.7.4",
-    "@applitools/eyes-universal": "2.9.6",
+    "@applitools/eyes-api": "1.7.5",
+    "@applitools/eyes-universal": "2.10.3",
     "@applitools/functional-commons": "1.6.0",
     "@applitools/logger": "1.1.15",
-    "@applitools/visual-grid-client": "15.13.6",
+    "@applitools/visual-grid-client": "15.13.13",
     "chalk": "3.0.0",
     "uuid": "8.3.2",
     "ws": "8.5.0"
@@ -67,11 +67,11 @@
   "devDependencies": {
     "@applitools/bongo": "^2.1.6",
     "@applitools/scripts": "1.1.0",
-    "@applitools/sdk-coverage-tests": "^2.3.19",
+    "@applitools/sdk-coverage-tests": "^2.3.20",
     "@applitools/snaptdout": "1.0.1",
     "@applitools/test-server": "1.1.4",
-    "@applitools/test-utils": "1.4.2",
-    "@applitools/types": "^1.5.5",
+    "@applitools/test-utils": "1.4.3",
+    "@applitools/types": "^1.5.8",
     "@applitools/utils": "1.3.10",
     "@types/node": "12",
     "@types/ws": "^8.2.2",
@@ -92,6 +92,7 @@
     "ncp": "2.0.0",
     "node-fetch": "2.6.0",
     "prettier": "1.19.1",
+    "semver": "^7.3.7",
     "typescript": "4.6.4"
   },
   "engines": {

package/src/browser/commands.js

@@ -7,11 +7,7 @@ const {socketCommands} = require('./socketCommands');
 const {eyesOpenMapValues} = require('./eyesOpenMapping');
 const {eyesCheckMapValues} = require('./eyesCheckMapping');
 const {TestResultsSummary} = require('@applitools/eyes-api');
-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 refer = new Refer();
 const socket = new Socket();
 const throwErr = Cypress.config('failCypressOnDiff');
 socketCommands(socket, refer);

package/src/browser/eyesCheckMapping.js

@@ -23,11 +23,11 @@ function eyesCheckMapValues({args, refer}) {
   const checkSettings = {
     name: config.tag,
     hooks: config.scriptHooks,
-    ignoreRegions: refElements(config.ignore),
+    ignoreRegions: convertPaddedRegion(config.ignore),
     floatingRegions: convertFloatingRegion(config.floating),
-    strictRegions: refElements(config.strict),
-    layoutRegions: refElements(config.layout),
-    contentRegions: refElements(config.content),
+    strictRegions: convertPaddedRegion(config.strict),
+    layoutRegions: convertPaddedRegion(config.layout),
+    contentRegions: convertPaddedRegion(config.content),
     accessibilityRegions: convertAccessabilityRegions(config.accessibility),
   };
 
@@ -82,6 +82,34 @@ function eyesCheckMapValues({args, refer}) {
 
   // #region helper functions
 
+  function convertPaddedRegion(regions) {
+    if (!regions) return;
+    if (!Array.isArray(regions)) regions = [regions];
+    let resRegions = [];
+    for (const region of regions) {
+      if (region.element || isHTMLElement(region) || region.jquery) {
+        if (region.padding || region.regionId) {
+          let currRefElements = refElements(region.element);
+          for (const refElement of currRefElements) {
+            let curr = {region: refElement};
+            if (region.padding) {
+              curr.padding = region.padding;
+            }
+            if (region.regionId) {
+              curr.regionId = region.regionId;
+            }
+            resRegions.push(curr);
+          }
+        } else {
+          resRegions = [...resRegions, ...refElements(region)];
+        }
+      } else {
+        resRegions.push(region);
+      }
+    }
+    return resRegions;
+  }
+
   function convertAccessabilityRegions(accessibilityRegions) {
     if (!accessibilityRegions) return accessibilityRegions;
     const accessibility = [];

package/src/browser/refer.js

@@ -1,17 +1,27 @@
-const uuid = require('uuid');
+/* global Node */
 
+const uuid = require('uuid');
 const REF_ID = 'applitools-ref-id';
+
 class Refer {
-  constructor(check) {
+  constructor() {
     this.store = new Map();
     this.relation = new Map();
-    this.check = check;
   }
 
   isRef(ref) {
     return Boolean(ref && ref[REF_ID]);
   }
 
+  check(value) {
+    return (
+      value &&
+      (value.nodeType === Node.ELEMENT_NODE ||
+        value.nodeType === Node.DOCUMENT_NODE ||
+        value.ownerDocument ||
+        (value.constructor && value.constructor.name === 'Window'))
+    );
+  }
   ref(value, parentRef) {
     if (this.check(value)) {
       const ref = uuid.v4();

package/src/browser/spec-driver.ts

@@ -61,7 +61,7 @@ export function setViewportSize(vs: any): void {
 export function transformSelector(selector: Selector): Selector {
   if (selector.hasOwnProperty('selector') && (!selector.hasOwnProperty('type') || (selector as EyesSelector).type === 'css')) {
     return (selector as EyesSelector).selector
-  }
+  } 
   return selector
 }
 

package/src/plugin/server.js

@@ -34,6 +34,8 @@ function makeStartServer({logger}) {
     const {port: universalPort, close: closeUniversalServer} = await makeServerProcess({
       key: path.resolve(__dirname, '../pem/server.key'),
       cert: path.resolve(__dirname, '../pem/server.cert'),
+      detached: false,
+      idleTimeout: 0,
     });
 
     const managers = [];

package/src/setup/handleCommands.js

@@ -33,6 +33,8 @@ function handlerCommandsCypress10(cwd) {
   } else {
     if (fs.existsSync(path.resolve(cwd, 'cypress/support/e2e.js'))) {
       supportFilePath = path.resolve(cwd, 'cypress/support/e2e.js');
+    } else if (fs.existsSync(path.resolve(cwd, 'cypress/support/e2e.ts'))) {
+      supportFilePath = path.resolve(cwd, 'cypress/support/e2e.ts');
     } else if (fs.existsSync(path.resolve(cwd, 'cypress/support/component.js'))) {
       supportFilePath = path.resolve(cwd, 'cypress/support/component.js');
     }