@applitools/eyes-cypress 3.27.5 → 3.27.7

package/CHANGELOG.md

@@ -10,6 +10,24 @@
 
 
 
+
+## 3.27.7 - 2022/11/17
+
+### Features
+- Added new selector extensions `child` and `fallback`
+- Use user agent metadata to improve browser environment detection logic
+- Use APPLITOOLS_CONCURRENCY env variable to specify concurrency
+### Bug fixes
+- Support parallel run of multiple `Cypress` instances
+- Add support for regionId and padding for accessibility and floating regions
+
+## 3.27.6 - 2022/10/28
+
+### Features
+- Add support for componenet testing and cypress config ts file
+### Bug fixes
+- Fixed issue with universal not working in cypress@6
+
 ## 3.27.5 - 2022/10/20
 
 ### Features

package/README.md

@@ -70,13 +70,13 @@ Add this file to your project with either:
 1. Adding the path to your [tsconfig](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) file:
     ```
     {
-      "files": ["./node_modules/@applitools/eyes-cypress/eyes-index.d.ts"],
+      "files": ["./node_modules/@applitools/eyes-cypress/index.d.ts"],
       ...
     }
     ```
   2. Copying the file to to your [cypress/support/](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Folder-Structure) dir:
       ```
-      cp node_modules/@applitools/eyes-cypress/eyes-index.d.ts ./cypress/support/    
+      cp node_modules/@applitools/eyes-cypress/index.d.ts ./cypress/support/    
       ```
 ### Applitools API key
 
@@ -505,7 +505,24 @@ cy.get('some-region').then(el => {
      // 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}}
+    content: {element: el[0], padding: {top:10}},
+    accessibility: {
+          region: {
+            accessibilityType: 'LargeText',
+            selector: 'accessibilityRegion',
+          },
+          padding: {left: 5},
+    },
+  floating:{
+          region: {
+            selector: 'floatingRegion',
+          },
+          maxDownOffset: 3,
+          maxLeftOffset: 20,
+          maxRightOffset: 30,
+          maxUpOffset: 3,
+          padding: {top: 20},
+        },
   })
 
 })
@@ -662,10 +679,27 @@ cy.get('.region.two:nth-child(2)').then(el => {
       cy.eyesCheckWindow({
         fully: false,
         ignore: [
-          {region: {type: 'css', selector: '.region.three:nth-child(3n)'}, regionId: 'region3'},
-          {type: 'xpath', selector: '//div[@class="region one"][3]'},
+          {region: {type: 'css', selector: 'ignore1'}, regionId: 'region3'},
+          {type: 'xpath', selector: 'ignore2'},
           {element: el, regionId: 'my-region-id'},
         ],
+        accessibility: [{
+            region: {
+              accessibilityType: 'LargeText',
+              selector: 'accessibilityRegion',
+            },
+            regionId: 'accesibility-regionId',
+        },],
+        floating: [{
+          region: {
+            selector: 'floatingRegion',
+          },
+          maxDownOffset: 3,
+          maxLeftOffset: 20,
+          maxRightOffset: 30,
+          maxUpOffset: 3,
+          regionId: 'floating-regionId',
+        }]
       });
 })
 ```

package/index.d.ts

@@ -7,7 +7,7 @@ type LegacyRegion = {left: number; top: number; width: number; height: number}
 type Selector = {selector: string; type?: 'css' | 'xpath', nodeType?: 'element' | 'shadow-root'} | 'string'
 type Element = HTMLElement | JQuery<HTMLElement>
 
-interface CypressCheckSettings extends api.CheckSettingsPlain<Element, Selector>{
+interface CypressCheckSettings extends api.CheckSettingsAutomationPlain<Element, Selector>{
   tag?: CypressCheckSettings['name']
 
   target?: 'window' | 'region'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-cypress",
-  "version": "3.27.5",
+  "version": "3.27.7",
   "repository": {
     "type": "git",
     "url": "git://github.com/applitools/eyes.sdk.javascript1.git",
@@ -28,7 +28,7 @@
     "lint": "eslint \"**/*.js\"",
     "build": "tsc",
     "generate:tests": "coverage-tests generate",
-    "test": "yarn test:unit && yarn test:it && yarn test:e2e && yarn test:ts && yarn test:coverage",
+    "test": "yarn test:unit && yarn test:it && yarn test:e2e && yarn test:ts && yarn test:components && yarn test:coverage",
     "test:sanity": "yarn test:unit && yarn test:it && yarn test:ts",
     "test:unit": "mocha --no-timeouts 'test/unit/**/*.test.js'",
     "test:it": "yarn build && mocha --no-timeouts 'test/it/**/*.test.js'",
@@ -37,6 +37,7 @@
     "test:ts:run": "cypress run --config-file test/e2e/ts/cypress-ts.json",
     "test:coverage": "yarn generate:tests && cd test/coverage/generic && yarn && unset APPLITOOLS_API_KEY && APPLITOOLS_BATCH_NAME='JS Coverage Tests: eyes-cypress' APPLITOOLS_BATCH_ID=$(uuidgen) npx cypress run",
     "test:e2e": "mkdir -p test/fixtures/testAppCopies && mocha --no-timeouts 'test/e2e/**/*.test.js'",
+    "test:components": "cd test/components && yarn && npx cypress run --component",
     "cypress": "cypress open --config-file test/fixtures/cypress-play.json",
     "cypress:new": "cd test/play && yarn && npx cypress open",
     "cypress:run": "cypress run --config-file test/fixtures/cypress-play.json --spec=test/fixtures/testApp/cypress/integration-play/play.js",
@@ -55,25 +56,27 @@
     }
   },
   "dependencies": {
-    "@applitools/core": "1.2.1",
-    "@applitools/eyes-api": "1.9.0",
-    "@applitools/eyes-universal": "2.16.6",
+    "@applitools/core": "1.2.12",
+    "@applitools/eyes-api": "1.10.4",
+    "@applitools/eyes-universal": "2.17.2",
     "@applitools/functional-commons": "1.6.0",
-    "@applitools/logger": "1.1.27",
+    "@applitools/logger": "1.1.30",
     "chalk": "3.0.0",
-    "semver": "7.3.7",
+    "semver": "7.3.8",
     "uuid": "8.3.2",
+    "which": "2.0.2",
     "ws": "8.5.0"
   },
   "devDependencies": {
     "@applitools/bongo": "^2.2.0",
     "@applitools/scripts": "1.2.0",
-    "@applitools/sdk-coverage-tests": "^2.3.20",
+    "@applitools/sdk-coverage-tests": "^2.7.8",
     "@applitools/snaptdout": "1.0.1",
-    "@applitools/test-server": "1.1.6",
+    "@applitools/test-server": "1.1.10",
     "@applitools/test-utils": "1.5.2",
-    "@applitools/utils": "1.3.13",
+    "@applitools/utils": "1.3.16",
     "@types/node": "12",
+    "@types/which": "^2.0.1",
     "@types/ws": "^8.2.2",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",

package/src/browser/eyesCheckMapping.js

@@ -119,6 +119,10 @@ function eyesCheckMapValues({args, refer}) {
           resRegions = [...resRegions, ...refElements(region)];
         }
       } else {
+        if (region.selector && !region.type) {
+          region.region = region.selector;
+          delete region.selector;
+        }
         resRegions.push(region);
       }
     }
@@ -141,6 +145,10 @@ function eyesCheckMapValues({args, refer}) {
         for (const element of elements) {
           accessibility.push(Object.assign({}, accessabilityRegion, {region: element}));
         }
+      } else if (region.hasOwnProperty('region')) {
+        region.type = region.region.accessibilityType;
+        delete region.region.accessibilityType;
+        accessibility.push(region);
       } else {
         accessabilityRegion.region = {
           y: region.top,
@@ -174,6 +182,8 @@ function eyesCheckMapValues({args, refer}) {
         for (const element of elements) {
           floating.push(Object.assign({}, floatingRegion, {region: element}));
         }
+      } else if (region.hasOwnProperty('region')) {
+        floating.push(region);
       } else {
         floatingRegion.region = {
           y: region.top,

package/src/plugin/pluginExport.js

@@ -5,10 +5,22 @@ const makeGlobalRunHooks = require('./hooks');
 
 function makePluginExport({startServer, eyesConfig}) {
   return function pluginExport(pluginModule) {
-    let eyesServer;
-    const pluginModuleExports = pluginModule.exports.e2e
-      ? pluginModule.exports.e2e.setupNodeEvents
-      : pluginModule.exports;
+    let eyesServer, pluginModuleExports, pluginExportsE2E, pluginExportsComponent;
+    const pluginExports =
+      pluginModule.exports && pluginModule.exports.default
+        ? pluginModule.exports.default
+        : pluginModule.exports;
+
+    if (pluginExports.component) {
+      pluginExportsComponent = pluginExports.component.setupNodeEvents;
+    }
+    if (pluginExports.e2e) {
+      pluginExportsE2E = pluginExports.e2e.setupNodeEvents;
+    }
+    if (!pluginExports.e2e && !pluginExports.component) {
+      pluginModuleExports = pluginExports;
+    }
+
     const setupNodeEvents = async function(...args) {
       const {server, port, closeManager, closeBatches, closeUniversalServer} = await startServer();
       eyesServer = server;
@@ -16,9 +28,19 @@ function makePluginExport({startServer, eyesConfig}) {
       const globalHooks = makeGlobalRunHooks({closeManager, closeBatches, closeUniversalServer});
 
       const [origOn, config] = args;
+
+      if (!pluginModuleExports) {
+        pluginModuleExports =
+          config.testingType === 'e2e' ? pluginExportsE2E : pluginExportsComponent;
+      }
+
       const isGlobalHookCalledFromUserHandlerMap = new Map();
       eyesConfig.eyesIsGlobalHooksSupported = isGlobalHooksSupported(config);
-      const moduleExportsResult = await pluginModuleExports(onThatCallsUserDefinedHandler, config);
+      let moduleExportsResult = {};
+      // in case setupNodeEvents is not defined in cypress.config file
+      if (typeof pluginModuleExports === 'function') {
+        moduleExportsResult = await pluginModuleExports(onThatCallsUserDefinedHandler, config);
+      }
       if (eyesConfig.eyesIsGlobalHooksSupported) {
         for (const [eventName, eventHandler] of Object.entries(globalHooks)) {
           if (!isGlobalHookCalledFromUserHandlerMap.get(eventName)) {
@@ -53,11 +75,21 @@ function makePluginExport({startServer, eyesConfig}) {
         }
       }
     };
-    if (pluginModule.exports.e2e) {
-      pluginModule.exports.e2e.setupNodeEvents = setupNodeEvents;
-    } else {
-      pluginModule.exports = setupNodeEvents;
+
+    if (pluginExports.component) {
+      pluginExports.component.setupNodeEvents = setupNodeEvents;
+    }
+    if (pluginExports.e2e) {
+      pluginExports.e2e.setupNodeEvents = setupNodeEvents;
     }
+    if (!pluginExports.component && !pluginExports.e2e) {
+      if (pluginModule.exports.default) {
+        pluginModule.exports.default = setupNodeEvents;
+      } else {
+        pluginModule.exports = setupNodeEvents;
+      }
+    }
+
     return function getCloseServer() {
       return eyesServer.close();
     };

package/src/plugin/server.js

@@ -4,8 +4,10 @@ const {makeServerProcess} = require('@applitools/eyes-universal');
 const handleTestResults = require('./handleTestResults');
 const path = require('path');
 const fs = require('fs');
+const semverLt = require('semver/functions/lt');
 const {Server: HttpsServer} = require('https');
 const {Server: WSServer} = require('ws');
+const which = require('which');
 
 function makeStartServer({logger}) {
   return async function startServer() {
@@ -30,19 +32,32 @@ function makeStartServer({logger}) {
 
     wss.on('close', () => https.close());
 
+    const forkOptions = {
+      detached: true,
+    };
+
+    const cypressVersion = require('cypress/package.json').version;
+
+    // `cypress` version below `7.0.0` has an old Electron version which not support async shell process.
+    // By passing `execPath` with the node process cwd it will switch the `node` process to be the like the OS have
+    // and will not use the unsupported `Cypress Helper.app` with the not supported shell process Electron
+    if (semverLt(cypressVersion, '7.0.0')) {
+      forkOptions.execPath = await which('node');
+    }
+
     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,
       shutdownMode: 'stdin',
+      forkOptions,
+      singleton: false,
+      portResolutionMode: 'random',
     });
 
     const managers = [];
     let socketWithUniversal;
 
     wss.on('connection', socketWithClient => {
-      socketWithUniversal = connectSocket(`wss://localhost:${universalPort}/eyes`);
+      socketWithUniversal = connectSocket(`ws://localhost:${universalPort}/eyes`);
 
       socketWithUniversal.setPassthroughListener(message => {
         logger.log('<== ', message.toString().slice(0, 1000));

package/src/setup/getCypressPaths.js

@@ -12,8 +12,13 @@ function getCypressPaths({cwd, isCypress10}) {
 }
 
 function getCypressPaths10AndAbove(cwd) {
-  const cypressConfigPath = path.resolve(cwd, 'cypress.config.js');
-  if (fs.existsSync(cypressConfigPath)) {
+  const cypressConfigPath = fs.existsSync(path.resolve(cwd, 'cypress.config.js'))
+    ? path.resolve(cwd, 'cypress.config.js')
+    : fs.existsSync(path.resolve(cwd, 'cypress.config.ts'))
+    ? path.resolve(cwd, 'cypress.config.ts')
+    : undefined;
+
+  if (cypressConfigPath) {
     const configContent = fs.readFileSync(cypressConfigPath, 'utf-8');
     const supportFilePath = getSupportFilePathFromCypress10Config({cwd, configContent});
     const typeScriptFilePath = supportFilePath
@@ -27,7 +32,7 @@ function getCypressPaths10AndAbove(cwd) {
     };
   } else {
     throw new Error(
-      `No configuration file found at ${cypressConfigPath}. This is usually caused by setting up Eyes before setting up Cypress. Please run "npx cypress open" first.`,
+      `No configuration file found at ${cwd}. This is usually caused by setting up Eyes before setting up Cypress. Please run "npx cypress open" first.`,
     );
   }
 }
@@ -45,6 +50,8 @@ function getSupportFilePathFromCypress10Config({cwd, configContent}) {
       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');
+    } else if (fs.existsSync(path.resolve(cwd, 'cypress/support/component.ts'))) {
+      supportFilePath = path.resolve(cwd, 'cypress/support/component.ts');
     }
   }
   return supportFilePath;