@applitools/eyes-cypress 3.26.4 → 3.27.0

package/CHANGELOG.md

@@ -9,6 +9,27 @@
 
 
 
+## 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
+### Bug fixes
+- Support string tag name in eyesCheck
+
 ## 3.26.4 - 2022/7/7
 
 ### 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.4",
+  "version": "3.27.0",
   "repository": {
     "type": "git",
     "url": "git://github.com/applitools/eyes.sdk.javascript1.git",
@@ -56,10 +56,10 @@
   },
   "dependencies": {
     "@applitools/eyes-api": "1.7.4",
-    "@applitools/eyes-universal": "2.9.6",
+    "@applitools/eyes-universal": "2.9.12",
     "@applitools/functional-commons": "1.6.0",
     "@applitools/logger": "1.1.15",
-    "@applitools/visual-grid-client": "15.13.6",
+    "@applitools/visual-grid-client": "15.13.11",
     "chalk": "3.0.0",
     "uuid": "8.3.2",
     "ws": "8.5.0"
@@ -70,8 +70,8 @@
     "@applitools/sdk-coverage-tests": "^2.3.19",
     "@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.7",
     "@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

@@ -116,7 +116,6 @@ Cypress.Commands.add('eyesOpen', function(args = {}) {
         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 =

package/src/browser/eyesCheckMapping.js

@@ -1,5 +1,8 @@
 /* global Node */
 function eyesCheckMapValues({args, refer}) {
+  if (typeof args === `string`) {
+    args = {tag: args};
+  }
   const config = args; // just did it for having less git changes at this moment
   const mappedValues = [
     'tag',
@@ -20,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),
   };
 
@@ -79,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/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 = [];
@@ -55,7 +57,17 @@ function makeStartServer({logger}) {
       socketWithClient.on('message', message => {
         const msg = JSON.parse(message);
         logger.log('==> ', message.toString().slice(0, 1000));
-        if (msg.name === 'Test.printTestResults') {
+        if (msg.name === 'Core.makeSDK') {
+          const newMessage = Buffer.from(
+            JSON.stringify({
+              name: msg.name,
+              key: msg.key,
+              payload: Object.assign(msg.payload, {cwd: process.cwd()}),
+            }),
+            'utf-8',
+          );
+          socketWithUniversal.send(newMessage);
+        } else if (msg.name === 'Test.printTestResults') {
           try {
             const resultArr = [];
             for (const result of msg.payload.testResults) {

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');
     }