@applitools/eyes-cypress 3.26.1 → 3.26.4

package/CHANGELOG.md

@@ -8,6 +8,36 @@
 
 
 
+
+## 3.26.4 - 2022/7/7
+
+### Features
+- Add support for cypress 10
+### Bug fixes
+- Fix use cases where we fail to serialize elements
+- Fixed bug where a failure in a single UFG environment fails all other environments in the same configuration
+
+## 3.26.3 - 2022/6/17
+
+### Features
+- Add special attribute for pseudo elements
+- Add the ability for the SDK to lazy load the page prior to performing a check window
+- Support padding for regions in the following region types - ignoreRegions, layoutRegions, strictRegions, contentRegions
+- Allow configuration file to be loaded from ancestor directories
+### Bug fixes
+- Fix rendering issues with Salesforce Lightning design system
+- Fix issue that prevented self-signed certificates from working when connecting through a proxy server
+
+## 3.26.2 - 2022/6/8
+
+### Features
+- add support for secure websocket
+- Allowed `` values in custom properties
+### Bug fixes
+- Fix incorrect test results when dealing with a page that contains CORS iframes
+- Fixed broken links to enums implementation in the README.md
+- Fix calling `waitBeforeCapture` when failed to set required viewport size
+
 ## 3.26.1 - 2022/6/2
 
 ### Features

package/README.md

@@ -27,9 +27,12 @@ The above command will add the necessary imports to your cypress `pluginsFile` a
 #### Manual configuration
 
 ##### 1. Configure Eyes-Cypress plugin
-
+<br>
+ 
 Eyes-Cypress acts as a [Cypress plugin](https://docs.cypress.io/guides/tooling/plugins-guide.html), so it should be configured as such.
-Unfortunately there's no easy way to do this automatically, so you need to manually add the following code to your `pluginsFile`:
+Unfortunately there's no easy way to do this automatically, so you need to manually:
+ #### Cypress version < 10:
+Add the following code to your `pluginsFile`:
 
 **Important**: add this code **after** the definition of `module.exports`:
 
@@ -38,7 +41,16 @@ require('@applitools/eyes-cypress')(module)
 ```
 
 Normally, this is `cypress/plugins/index.js`. You can read more about it in Cypress' docs [here](https://docs.cypress.io/guides/references/configuration.html#Folders-Files).
+<br>
+
+ #### Cypress version >= 10:
 
+ Add the following code to your `cypress.config.js` file after `module.exports`:
+
+```js
+require('@applitools/eyes-cypress')(module)
+```
+This file is normally at the root of the project
 ##### 2. Configure custom commands
 
 Eyes-Cypress exposes new commands to your tests. This means that more methods will be available on the `cy` object. To enable this, it's required to configure these custom commands.
@@ -48,7 +60,7 @@ As with the plugin, there's no automatic way to configure this in cypress, so yo
 import '@applitools/eyes-cypress/commands'
 ```
 
-Normally, this is `cypress/support/index.js`. You can read more about it in Cypress' docs [here](https://docs.cypress.io/guides/references/configuration.html#Folders-Files).
+Normally, this is `cypress/support/index.js` for cypress version < 10 and `cypress/support/e2e.js` for cypress version >= 10. You can read more about it in Cypress' docs [here](https://docs.cypress.io/guides/references/configuration.html#Folders-Files).
 
 ##### 3. (Optional) TypeScript configuration
 
@@ -66,8 +78,6 @@ Add this file to your project with either:
       ```
       cp node_modules/@applitools/eyes-cypress/eyes-index.d.ts ./cypress/support/    
       ```
-
-
 ### Applitools API key
 
 In order to authenticate via the Applitools server, you need to supply the Eyes-Cypress SDK with the API key you got from Applitools. Read more about how to obtain the API key [here](https://applitools.com/docs/topics/overview/obtain-api-key.html).
@@ -173,43 +183,66 @@ Applitools will take screenshots and perform the visual comparisons in the backg
 <br/>
 
 ### Index
-- [Commands](#Commands)
-  - [Open](#Open)
-  - [CheckWindow](#Check-window)
-    - [tag](#tag)
-    - [target](#target)
-    - [fully](#fully)
-    - [selector](#selector)
-    - [region](#region)
-    - [ignore](#ignore)
-    - [floating](#floating)
-    - [layout](#layout)
-    - [strict](#strict)
-    - [content](#content)
-    - [accessibility](#accessibility)
-    - [region in shadow DOM](#region-in-shadow-dom)
-    - [scriptHooks](#scriptHooks)
-    - [layoutBreakpoints](#layoutBreakpoints)
-    - [sendDom](#sendDom)
-    - [variationGroupId](#variationGroupId)
-    - [waitBeforeCapture](#waitBeforeCapture)
-  - [Close](#Close)
-  - [GetAllTestResults](#GetAllTestResults)
-  - [deletTestResults](#deleteTestResults)
-- [Concurrency](#Concurrency)
-- [Advanced configuration](#Advanced-configuration)
-  - [Scoped configuration](#Here-are-the-available-configuration-properties)
-  - [Global configuration](#global-configuration-properties)
-  - [Examples](#Method-1-Arguments-for-cyeyesOpen)
-    - [Arguments for `cy.eyesOpen`](#Method-1-Arguments-for-cyeyesOpen)
-    - [Environment variables](#Method-2-Environment-variables)
-    - [The `applitools.config.js` file](#Method-3-The-applitoolsconfigjs-file)
-- [Configuring the browser](#Configuring-the-browser)
-  - [Device emulation](#Device-emulation)
-- [IDE Code Completion](#Intelligent-Code-Completion)
-  - [Triple slash directives](#1-Triple-slash-directives)
-  - [Reference type declarations via `tsconfig`](#2-Reference-type-declarations-via-tsconfig)
-- [Troubleshooting](#Troubleshooting)
+- [Eyes-Cypress](#eyes-cypress)
+  - [Installation](#installation)
+    - [Install npm package](#install-npm-package)
+    - [Configure plugin and commands](#configure-plugin-and-commands)
+      - [Automatic configuration](#automatic-configuration)
+      - [Manual configuration](#manual-configuration)
+        - [1. Configure Eyes-Cypress plugin](#1-configure-eyes-cypress-plugin)
+        - [2. Configure custom commands](#2-configure-custom-commands)
+        - [3. (Optional) TypeScript configuration](#3-optional-typescript-configuration)
+    - [Applitools API key](#applitools-api-key)
+    - [Eyes server URL (optional)](#eyes-server-url-optional)
+  - [Usage](#usage)
+    - [Example](#example)
+    - [Best practice for using the SDK](#best-practice-for-using-the-sdk)
+    - [Index](#index)
+    - [Commands](#commands)
+      - [Open](#open)
+      - [Check window](#check-window)
+        - [Arguments to `cy.eyesCheckWindow`](#arguments-to-cyeyescheckwindow)
+        - [`tag`](#tag)
+        - [`target`](#target)
+        - [`fully`](#fully)
+        - [`selector`](#selector)
+        - [`region`](#region)
+        - [`element`](#element)
+        - [`ignore`](#ignore)
+        - [`floating`](#floating)
+        - [`layout`](#layout)
+        - [`strict`](#strict)
+        - [`content`](#content)
+        - [`accessibility`](#accessibility)
+        - [`region in shadow DOM`](#region-in-shadow-dom)
+        - [`scriptHooks`](#scripthooks)
+        - [`layoutBreakpoints`](#layoutbreakpoints)
+        - [`sendDom`](#senddom)
+        - [`variationGroupId`](#variationgroupid)
+        - [`waitBeforeCapture`](#waitbeforecapture)
+        - [`useDom`](#usedom)
+        - [`enablePatterns`](#enablepatterns)
+        - [`matchLevel`](#matchlevel)
+        - [`visualGridOptions`](#visualgridoptions)
+      - [Close](#close)
+      - [GetAllTestResults](#getalltestresults)
+      - [deleteTestResults](#deletetestresults)
+  - [Concurrency](#concurrency)
+  - [Advanced configuration](#advanced-configuration)
+    - [Here are the available configuration properties:](#here-are-the-available-configuration-properties)
+    - [Global configuration properties:](#global-configuration-properties)
+    - [Method 1: Arguments for `cy.eyesOpen`](#method-1-arguments-for-cyeyesopen)
+    - [Method 2: Environment variables](#method-2-environment-variables)
+    - [Method 3: The `applitools.config.js` file](#method-3-the-applitoolsconfigjs-file)
+  - [Configuring the browser](#configuring-the-browser)
+    - [Previous browser versions](#previous-browser-versions)
+    - [Getting a screenshot of multiple browsers in parallel](#getting-a-screenshot-of-multiple-browsers-in-parallel)
+    - [Device emulation](#device-emulation)
+    - [iOS device](#ios-device)
+  - [Intelligent Code Completion](#intelligent-code-completion)
+      - [There are two ways you can add Eyes-Cypress intelliSense to your tests:](#there-are-two-ways-you-can-add-eyes-cypress-intellisense-to-your-tests)
+    - [1. Triple slash directives](#1-triple-slash-directives)
+    - [2. Reference type declarations via `tsconfig`](#2-reference-type-declarations-via-tsconfig)
 
 <br/><hr/><br/>
 
@@ -827,7 +860,7 @@ cy.eyesOpen({
 
 Possible values for screen orientation are `landscape` and `portrait`, and if no value is specified, the default is `portrait`.
 
-The list of device names is available at https://github.com/applitools/eyes.sdk.javascript1/blob/master/packages/eyes-sdk-core/lib/config/DeviceName.js
+The list of device names is available at https://github.com/applitools/eyes.sdk.javascript1/blob/master/packages/eyes-api/src/enums/DeviceName.ts
 
 In addition, it's possible to use chrome's device emulation with custom viewport sizes, pixel density and mobile mode, by passing `deviceScaleFactor` and `mobile` in addition to `width` and `height`. For example:
 
@@ -859,7 +892,7 @@ cy.eyesOpen({
 })
 ```
 
-The list of devices is available at https://github.com/applitools/eyes.sdk.javascript1/blob/master/packages/eyes-sdk-core/lib/config/IosDeviceName.js
+The list of devices is available at https://github.com/applitools/eyes.sdk.javascript1/blob/master/packages/eyes-api/src/enums/IosDeviceName.ts
 
 Possible values for `iosVersion` are:
 

package/bin/eyes-setup.js

@@ -2,18 +2,34 @@
 'use strict';
 
 const chalk = require('chalk');
-const handlePlugin = require('../src/setup/handlePlugin');
-const handleCommands = require('../src/setup/handleCommands');
-const handleTypeScript = require('../src/setup/handleTypeScript');
+const {handlePlugin} = require('../src/setup/handlePlugin');
+const {handleCommands, handlerCommandsCypress10} = require('../src/setup/handleCommands');
+const {handleTypeScript, handlerTypeScriptCypress10} = require('../src/setup/handleTypeScript');
 const {version} = require('../package');
+const fs = require('fs');
 const cwd = process.cwd();
 
 console.log(chalk.cyan('Setup eyes-cypress', version));
+const packageJson = JSON.parse(fs.readFileSync('package.json'));
+let cypressVersion;
 
+if (packageJson.dependencies && packageJson.dependencies.cypress) {
+  cypressVersion = 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;
 try {
-  handlePlugin(cwd);
-  handleCommands(cwd);
-  handleTypeScript(cwd);
+  if (!isCypress10) {
+    handlePlugin(cwd, isCypress10);
+    handleCommands(cwd);
+    handleTypeScript(cwd);
+  } else {
+    handlePlugin(cwd, isCypress10);
+    const supportFilePath = handlerCommandsCypress10(cwd);
+    handlerTypeScriptCypress10(supportFilePath);
+  }
 } catch (e) {
   console.log(chalk.red('Setup error:\n', e));
 }

package/dist/browser/spec-driver.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCookies = exports.getUrl = exports.getTitle = exports.findElements = exports.findElement = exports.transformSelector = exports.setViewportSize = exports.getViewportSize = exports.childContext = exports.parentContext = exports.mainContext = exports.executeScript = void 0;
 function executeScript(context, script, arg) {
-    context = refreshContext(context);
     let scriptToExecute;
     if (script.includes('dom-snapshot') ||
         script.includes('dom-capture') ||
@@ -23,13 +22,20 @@ function mainContext() {
 }
 exports.mainContext = mainContext;
 function parentContext(context) {
-    if (!context)
-        return; // because Cypress doesn't support cross origin iframe, then childContext might return null, and then the input to parentContext might be null
+    // because Cypress doesn't support cross origin iframe, then childContext might return null, and then the input to parentContext might be null
+    if (!context) {
+        throw new Error('Context is not accessible');
+    }
+    ;
     return context === mainContext() ? context : context.defaultView.frameElement.ownerDocument;
 }
 exports.parentContext = parentContext;
 function childContext(_context, element) {
-    return element.contentDocument; // null in case of cross origin iframe
+    if (element.contentDocument)
+        return element.contentDocument;
+    else {
+        throw new Error('Context is not accessible');
+    }
 }
 exports.childContext = childContext;
 function getViewportSize() {
@@ -55,7 +61,6 @@ function transformSelector(selector) {
 }
 exports.transformSelector = transformSelector;
 function findElement(context, selector, parent) {
-    context = refreshContext(context);
     const eyesSelector = selector;
     const root = parent !== null && parent !== void 0 ? parent : context;
     const sel = typeof selector === 'string' ? selector : eyesSelector.selector;
@@ -68,7 +73,6 @@ function findElement(context, selector, parent) {
 }
 exports.findElement = findElement;
 function findElements(context, selector, parent) {
-    context = refreshContext(context);
     const eyesSelector = selector;
     const root = parent !== null && parent !== void 0 ? parent : context;
     const sel = typeof selector === 'string' ? selector : eyesSelector.selector;
@@ -86,12 +90,10 @@ function findElements(context, selector, parent) {
 }
 exports.findElements = findElements;
 function getTitle(context) {
-    context = refreshContext(context);
     return context.title;
 }
 exports.getTitle = getTitle;
 function getUrl(context) {
-    context = refreshContext(context);
     return context.location.href;
 }
 exports.getUrl = getUrl;
@@ -100,11 +102,6 @@ function getCookies() {
     return Cypress.automation('get:cookies', {});
 }
 exports.getCookies = getCookies;
-// we need to method to reset the context in case the user called open before visit
-function refreshContext(context) {
-    //@ts-ignore
-    return (context && context.defaultView) ? context : cy.state('window').document;
-}
 // export function takeScreenshot(page: Driver): Promise<Buffer>;
 // export function visit(page: Driver, url: string): Promise<void>; (??)
 // export function isStaleElementError(err: any): boolean;

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@applitools/eyes-cypress",
-  "version": "3.26.1",
+  "version": "3.26.4",
   "repository": {
     "type": "git",
     "url": "git://github.com/applitools/eyes.sdk.javascript1.git",
-    "directory": "packages/eyes-cypress"
+    "directory": "js/packages/eyes-cypress"
   },
   "license": "SEE LICENSE IN LICENSE",
+  "aliases": [
+    "cypress",
+    "cy"
+  ],
   "main": "index.js",
   "types": "./index.d.ts",
   "bin": {
@@ -25,17 +29,18 @@
     "build": "tsc",
     "generate:tests": "coverage-tests generate",
     "test": "yarn test:unit && yarn test:it && yarn test:e2e && yarn test:ts && 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": "mocha --no-timeouts 'test/it/**/*.test.js'",
-    "test:e2e": "mkdir -p test/fixtures/testAppCopies && mocha --no-timeouts 'test/e2e/**/*.test.js'",
+    "test:it": "yarn build && mocha --no-timeouts 'test/it/**/*.test.js'",
+    "test:ts": "yarn test:ts:compile && yarn test:ts:run",
     "test:ts:compile": "tsc --project test/e2e/ts/cypress",
     "test:ts:run": "cypress run --config-file test/e2e/ts/cypress-ts.json",
-    "test:ts": "yarn test:ts:compile && yarn test:ts:run",
-    "test:coverage": "yarn generate:tests && cd test/coverage/generic &&  unset APPLITOOLS_API_KEY && APPLITOOLS_BATCH_NAME='JS Coverage Tests: eyes-selenium' APPLITOOLS_BATCH_ID=$(uuidgen) cypress run",
+    "test:coverage": "yarn generate:tests && cd test/coverage/generic && yarn && unset APPLITOOLS_API_KEY && APPLITOOLS_BATCH_NAME='JS Coverage Tests: eyes-selenium' APPLITOOLS_BATCH_ID=$(uuidgen) npx cypress run",
+    "test:e2e": "mkdir -p test/fixtures/testAppCopies && mocha --no-timeouts 'test/e2e/**/*.test.js'",
     "cypress": "cypress open --config-file test/fixtures/cypress-play.json",
-    "cypress:new": "node_modules/cypress-new/bin/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",
-    "cypress:run:new": "node_modules/cypress-new/bin/cypress run --config-file test/fixtures/cypress-play.json --spec=test/fixtures/testApp/cypress/integration-play/play.js",
+    "cypress:run:new": "cd test/play && yarn && npx cypress run --spec=../fixtures/testApp/cypress/integration-play/play.js",
     "cypress:play": "cd test/fixtures/testApp && cypress run --config integrationFolder=cypress/integration-play,pluginsFile=cypress/plugins/index-play.js,supportFile=cypress/support/index-run.js --spec=cypress/integration-play/play.js",
     "render": "run(){ npx cypress run --config integrationFolder=test/fixtures/testApp/cypress/render,pluginsFile=test/fixtures/testApp/cypress/plugins/index-render.js,supportFile=test/fixtures/testApp/cypress/support/index-run.js --env url=$1; }; run",
     "prepublish:setup": "sudo apt-get install xvfb",
@@ -50,24 +55,24 @@
     }
   },
   "dependencies": {
-    "@applitools/eyes-api": "1.5.2",
-    "@applitools/eyes-universal": "2.6.1",
+    "@applitools/eyes-api": "1.7.4",
+    "@applitools/eyes-universal": "2.9.6",
     "@applitools/functional-commons": "1.6.0",
-    "@applitools/logger": "1.1.8",
-    "@applitools/visual-grid-client": "15.12.38",
+    "@applitools/logger": "1.1.15",
+    "@applitools/visual-grid-client": "15.13.6",
     "chalk": "3.0.0",
     "uuid": "8.3.2",
     "ws": "8.5.0"
   },
   "devDependencies": {
-    "@applitools/bongo": "^2.1.1",
+    "@applitools/bongo": "^2.1.6",
     "@applitools/scripts": "1.1.0",
-    "@applitools/sdk-coverage-tests": "^2.3.18",
+    "@applitools/sdk-coverage-tests": "^2.3.19",
     "@applitools/snaptdout": "1.0.1",
-    "@applitools/test-server": "1.0.10",
-    "@applitools/test-utils": "1.3.2",
-    "@applitools/types": "^1.4.5",
-    "@applitools/utils": "1.3.3",
+    "@applitools/test-server": "1.1.4",
+    "@applitools/test-utils": "1.4.2",
+    "@applitools/types": "^1.5.5",
+    "@applitools/utils": "1.3.10",
     "@types/node": "12",
     "@types/ws": "^8.2.2",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
@@ -75,8 +80,7 @@
     "chai": "4.2.0",
     "chai-spies": "1.0.0",
     "cookie-parser": "1.4.4",
-    "cypress": "6.5.0",
-    "cypress-new": "npm:cypress@9",
+    "cypress": "8.0.0",
     "eslint": "8.10.0",
     "eslint-plugin-mocha-no-only": "1.1.0",
     "eslint-plugin-node": "7.0.1",

package/src/browser/commands.js

@@ -110,7 +110,7 @@ Cypress.Commands.add('eyesOpen', function(args = {}) {
     const driver = refer.ref(cy.state('window').document);
 
     if (!connectedToUniversal) {
-      socket.connect(`ws://localhost:${Cypress.config('eyesPort')}/eyes`);
+      socket.connect(`wss://localhost:${Cypress.config('eyesPort')}/eyes`);
       connectedToUniversal = true;
       socket.emit('Core.makeSDK', {
         name: 'eyes.cypress',
@@ -152,6 +152,7 @@ Cypress.Commands.add('eyesCheckWindow', (args = {}) =>
     if (isCurrentTestDisabled) return;
 
     setRootContext();
+    const driver = refer.ref(cy.state('window').document);
 
     Cypress.log({name: 'Eyes: check window'});
 
@@ -160,6 +161,7 @@ Cypress.Commands.add('eyesCheckWindow', (args = {}) =>
     return socket.request('Eyes.check', {
       eyes,
       settings: checkSettings,
+      driver,
     });
   }),
 );

package/src/browser/eyesCheckMapping.js

@@ -12,6 +12,7 @@ function eyesCheckMapValues({args, refer}) {
     'accessibility',
     'region',
     'selector',
+    'element',
   ];
 
   let regionSettings = {};

package/src/browser/spec-driver.ts

@@ -4,7 +4,6 @@ export type Context = Document & {__applitoolsBrand?: never};
 export type Element = HTMLElement & {__applitoolsBrand?: never};
 
 export function executeScript(context: Context, script: string, arg: any): any {     
-  context = refreshContext(context)
 
       let scriptToExecute;
       if (
@@ -28,13 +27,20 @@ export function mainContext(): Context {
 }
 
 export function parentContext(context: Context): Context {
-  if (!context) return; // because Cypress doesn't support cross origin iframe, then childContext might return null, and then the input to parentContext might be null
+  // because Cypress doesn't support cross origin iframe, then childContext might return null, and then the input to parentContext might be null
+  if (!context) {
+    throw new Error('Context is not accessible')
+  }; 
   
   return context === mainContext() ? context : context.defaultView.frameElement.ownerDocument
 }
 
 export function childContext(_context: Context, element: HTMLIFrameElement): Context {
-  return element.contentDocument // null in case of cross origin iframe
+  if(element.contentDocument)
+    return element.contentDocument
+  else {
+    throw new Error('Context is not accessible')
+  }
 }
 
 export function getViewportSize(): Object {
@@ -60,7 +66,6 @@ export function transformSelector(selector: Selector): Selector {
 }
 
 export function findElement(context: Context, selector: Selector, parent?: Element) {
-  context = refreshContext(context)
   const eyesSelector = (selector as EyesSelector)
   const root = parent ?? context
   const sel = typeof selector === 'string' ? selector : eyesSelector.selector
@@ -72,7 +77,6 @@ export function findElement(context: Context, selector: Selector, parent?: Eleme
 }
 
 export function findElements(context: Context, selector: Selector, parent: Element){
-  context = refreshContext(context)
   const eyesSelector = (selector as EyesSelector)
   const root = parent ?? context
   const sel = typeof selector === 'string' ? selector : eyesSelector.selector
@@ -91,12 +95,10 @@ export function findElements(context: Context, selector: Selector, parent: Eleme
 }
 
 export function getTitle(context: Context): string {
-  context = refreshContext(context)
   return context.title
 }
 
 export function getUrl(context: Context): string {
-  context = refreshContext(context)
   return context.location.href
 }
 
@@ -105,11 +107,6 @@ export function getCookies(): Array<any> {
   return Cypress.automation('get:cookies', {})
 }
 
-// we need to method to reset the context in case the user called open before visit
-function refreshContext(context: Context) {
-  //@ts-ignore
-  return (context && context.defaultView) ? context : cy.state('window').document
-}
 
 // export function takeScreenshot(page: Driver): Promise<Buffer>;
 

package/src/plugin/isGlobalHooksSupported.js

@@ -5,8 +5,9 @@ function isGlobalHooksSupported(config) {
   const {version, experimentalRunEvents} = config;
 
   return (
-    version >= CYPRESS_NO_FLAG_VERSION ||
-    (version >= CYPRESS_SUPPORTED_VERSION && !!experimentalRunEvents)
+    parseFloat(version, 10) >= parseFloat(CYPRESS_NO_FLAG_VERSION, 10) ||
+    (parseFloat(version, 10) >= parseFloat(CYPRESS_SUPPORTED_VERSION, 10) &&
+      !!experimentalRunEvents)
   );
 }
 

package/src/plugin/pluginExport.js

@@ -6,8 +6,10 @@ const makeGlobalRunHooks = require('./hooks');
 function makePluginExport({startServer, eyesConfig}) {
   return function pluginExport(pluginModule) {
     let eyesServer;
-    const pluginModuleExports = pluginModule.exports;
-    pluginModule.exports = async function(...args) {
+    const pluginModuleExports = pluginModule.exports.e2e
+      ? pluginModule.exports.e2e.setupNodeEvents
+      : pluginModule.exports;
+    const setupNodeEvents = async function(...args) {
       const {server, port, closeManager, closeBatches, closeUniversalServer} = await startServer();
       eyesServer = server;
 
@@ -51,6 +53,11 @@ function makePluginExport({startServer, eyesConfig}) {
         }
       }
     };
+    if (pluginModule.exports.e2e) {
+      pluginModule.exports.e2e.setupNodeEvents = setupNodeEvents;
+    } else {
+      pluginModule.exports = setupNodeEvents;
+    }
     return function getCloseServer() {
       return eyesServer.close();
     };

package/src/plugin/server.js

@@ -1,21 +1,46 @@
 'use strict';
-const {makeHandler} = require('../../dist/plugin/handler');
 const connectSocket = require('./webSocket');
 const {makeServerProcess} = require('@applitools/eyes-universal');
 const {TestResults} = require('@applitools/visual-grid-client');
 const handleTestResults = require('./handleTestResults');
+const path = require('path');
+const fs = require('fs');
+const {Server: HttpsServer} = require('https');
+const {Server: WSServer} = require('ws');
 
 function makeStartServer({logger}) {
   return async function startServer() {
-    const {server, port} = await makeHandler({singleton: false});
+    const key = fs.readFileSync(path.resolve(__dirname, '../pem/server.key'));
+    const cert = fs.readFileSync(path.resolve(__dirname, '../pem/server.cert'));
+    let port;
 
-    const {port: universalPort, close: closeUniversalServer} = await makeServerProcess();
+    const https = new HttpsServer({
+      key,
+      cert,
+    });
+    await https.listen(0, err => {
+      if (err) {
+        logger.log('error starting plugin server', err);
+      } else {
+        logger.log(`plugin server running at port: ${https.address().port}`);
+        port = https.address().port;
+      }
+    });
+
+    const wss = new WSServer({server: https, path: '/eyes', maxPayload: 254 * 1024 * 1024});
+
+    wss.on('close', () => https.close());
+
+    const {port: universalPort, close: closeUniversalServer} = await makeServerProcess({
+      key: path.resolve(__dirname, '../pem/server.key'),
+      cert: path.resolve(__dirname, '../pem/server.cert'),
+    });
 
     const managers = [];
     let socketWithUniversal;
 
-    server.on('connection', socketWithClient => {
-      socketWithUniversal = connectSocket(`ws://localhost:${universalPort}/eyes`);
+    wss.on('connection', socketWithClient => {
+      socketWithUniversal = connectSocket(`wss://localhost:${universalPort}/eyes`);
 
       socketWithUniversal.setPassthroughListener(message => {
         logger.log('<== ', message.toString().slice(0, 1000));
@@ -69,7 +94,7 @@ function makeStartServer({logger}) {
     });
 
     return {
-      server,
+      server: wss,
       port,
       closeManager,
       closeBatches,

package/src/setup/addEyesCypressPlugin.js

@@ -11,5 +11,4 @@ function addEyesCypressPlugin(content) {
   }
 }
 
-module.exports = addEyesCypressPlugin;
-module.exports.pluginRequire = pluginRequire;
+module.exports = {addEyesCypressPlugin, pluginRequire};

package/src/setup/handleCommands.js

@@ -1,5 +1,8 @@
 'use strict';
 
+const fs = require('fs');
+const path = require('path');
+
 const chalk = require('chalk');
 const {readFileSync, writeFileSync} = require('fs');
 const addEyesCommands = require('./addEyesCommands');
@@ -20,4 +23,33 @@ function handleCommands(cwd) {
   }
 }
 
-module.exports = handleCommands;
+function handlerCommandsCypress10(cwd) {
+  const configContent = fs.readFileSync(path.resolve(cwd, 'cypress.config.js'), 'utf-8');
+  let supportFilePath;
+  if (configContent.includes('supportFile')) {
+    const regex = new RegExp(/(?:supportFile:)(?:\s*)(.*)/g);
+    const filePath = regex.exec(configContent)[1].replace(/['|"|,]*/g, '');
+    supportFilePath = path.resolve(cwd, filePath);
+  } 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/component.js'))) {
+      supportFilePath = path.resolve(cwd, 'cypress/support/component.js');
+    }
+  }
+
+  if (supportFilePath) {
+    const commandsFileContent = fs.readFileSync(supportFilePath, 'utf-8');
+    if (!isCommandsDefined(commandsFileContent)) {
+      writeFileSync(supportFilePath, addEyesCommands(commandsFileContent));
+      console.log(chalk.cyan('Commands defined.'));
+    } else {
+      console.log(chalk.cyan('Commands already defined.'));
+    }
+  } else {
+    throw new Error('Commands file not found!');
+  }
+  return supportFilePath;
+}
+
+module.exports = {handleCommands, handlerCommandsCypress10};

package/src/setup/handlePlugin.js

@@ -2,22 +2,30 @@
 
 const {readFileSync, writeFileSync} = require('fs');
 const chalk = require('chalk');
-const addEyesCypressPlugin = require('./addEyesCypressPlugin');
+const {addEyesCypressPlugin} = require('./addEyesCypressPlugin');
 const isPluginDefined = require('./isPluginDefined');
 const getFilePath = require('./getFilePath');
 const getCypressConfig = require('./getCypressConfig');
+const fs = require('fs');
+const path = require('path');
 
-function handlePlugin(cwd) {
-  const cypressConfig = getCypressConfig(cwd);
-  const pluginsFilePath = getFilePath('plugins', cypressConfig, cwd);
-  const pluginsFileContent = readFileSync(pluginsFilePath).toString();
+function handlePlugin(cwd, isCypress10) {
+  let fileContent, filePath;
+  if (!isCypress10) {
+    const cypressConfig = getCypressConfig(cwd);
+    filePath = getFilePath('plugins', cypressConfig, cwd);
+    fileContent = readFileSync(filePath).toString();
+  } else {
+    filePath = path.resolve(cwd, 'cypress.config.js');
+    fileContent = fs.readFileSync(filePath, 'utf-8');
+  }
 
-  if (!isPluginDefined(pluginsFileContent)) {
-    writeFileSync(pluginsFilePath, addEyesCypressPlugin(pluginsFileContent));
+  if (!isPluginDefined(fileContent)) {
+    writeFileSync(filePath, addEyesCypressPlugin(fileContent));
     console.log(chalk.cyan('Plugins defined.'));
   } else {
     console.log(chalk.cyan('Plugins already defined'));
   }
 }
 
-module.exports = handlePlugin;
+module.exports = {handlePlugin};

package/src/setup/handleTypeScript.js

@@ -4,6 +4,7 @@ const {writeFileSync, existsSync} = require('fs');
 const getFilePath = require('./getFilePath');
 const getCypressConfig = require('./getCypressConfig');
 const eyesIndexContent = `import "@applitools/eyes-cypress"`;
+const {resolve, dirname} = require('path');
 
 function handleTypeScript(cwd) {
   const cypressConfig = getCypressConfig(cwd);
@@ -17,5 +18,16 @@ function handleTypeScript(cwd) {
   }
 }
 
-module.exports = handleTypeScript;
+function handlerTypeScriptCypress10(suportFilePath) {
+  const supportDir = dirname(suportFilePath);
+  const typeScriptFilePath = resolve(supportDir, 'index.d.ts');
+  if (!existsSync(typeScriptFilePath)) {
+    writeFileSync(typeScriptFilePath, eyesIndexContent);
+    console.log(chalk.cyan('Typescript defined.'));
+  } else {
+    console.log(chalk.cyan('Typescript already defined.'));
+  }
+}
+
+module.exports = {handleTypeScript, handlerTypeScriptCypress10};
 module.exports.eyesIndexContent = eyesIndexContent;

package/dist/plugin/handler.js

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeHandler = void 0;
-const http_1 = require("http");
-const ws_1 = require("ws");
-const { name, version } = require('../../package.json'); // TODO is the handshake needed at all?
-const TOKEN_HEADER = 'x-eyes-universal-token';
-const TOKEN = `${name}@${version}`;
-// TODO make default port 0 and return actual port
-async function makeHandler({ port = 31077, singleton = true, lazy = false } = {}) {
-    const http = new http_1.Server();
-    http.on('request', (request, response) => {
-        if (request.url === '/handshake') {
-            if (request.headers[TOKEN_HEADER] === TOKEN) {
-                response.writeHead(200, { [TOKEN_HEADER]: TOKEN });
-            }
-            else {
-                response.writeHead(400);
-            }
-            response.end();
-        }
-    });
-    http.listen(port, 'localhost');
-    return new Promise((resolve, reject) => {
-        http.on('listening', () => {
-            const ws = new ws_1.Server({ server: http, path: '/eyes' });
-            ws.on('close', () => http.close());
-            resolve({ server: ws, port });
-        });
-        http.on('error', async (err) => {
-            if (!lazy && err.code === 'EADDRINUSE') {
-                if (singleton && (await isHandshakable(port))) {
-                    return resolve({ port });
-                }
-                else {
-                    return resolve(await makeHandler({ port: port + 1, singleton }));
-                }
-            }
-            reject(err);
-        });
-    });
-}
-exports.makeHandler = makeHandler;
-async function isHandshakable(port) {
-    return new Promise(resolve => {
-        const handshake = (0, http_1.request)(`http://localhost:${port}/handshake`, {
-            headers: { [TOKEN_HEADER]: TOKEN },
-        });
-        handshake.on('response', ({ statusCode, headers }) => {
-            resolve(statusCode === 200 && headers[TOKEN_HEADER] === TOKEN);
-        });
-        handshake.on('error', () => resolve(false));
-        handshake.end();
-    });
-}

package/src/plugin/handler.ts

@@ -1,58 +0,0 @@
-import {Server as HTTPServer, request} from 'http'
-import {Server as WSServer} from 'ws'
-
-const {name, version} = require('../../package.json') // TODO is the handshake needed at all?
-const TOKEN_HEADER = 'x-eyes-universal-token'
-const TOKEN = `${name}@${version}`
-
-// TODO make default port 0 and return actual port
-export async function makeHandler({port = 31077, singleton = true, lazy = false} = {}): Promise<{
-  server?: WSServer
-  port: number
-}> {
-  const http = new HTTPServer()
-  http.on('request', (request, response) => {
-    if (request.url === '/handshake') {
-      if (request.headers[TOKEN_HEADER] === TOKEN) {
-        response.writeHead(200, {[TOKEN_HEADER]: TOKEN})
-      } else {
-        response.writeHead(400)
-      }
-      response.end()
-    }
-  })
-
-  http.listen(port, 'localhost')
-
-  return new Promise((resolve, reject) => {
-    http.on('listening', () => {
-      const ws = new WSServer({server: http, path: '/eyes'})
-      ws.on('close', () => http.close())
-      resolve({server: ws, port})
-    })
-
-    http.on('error', async (err: Error & {code: string}) => {
-      if (!lazy && err.code === 'EADDRINUSE') {
-        if (singleton && (await isHandshakable(port))) {
-          return resolve({port})
-        } else {
-          return resolve(await makeHandler({port: port + 1, singleton}))
-        }
-      }
-      reject(err)
-    })
-  })
-}
-
-async function isHandshakable(port: number) {
-  return new Promise(resolve => {
-    const handshake = request(`http://localhost:${port}/handshake`, {
-      headers: {[TOKEN_HEADER]: TOKEN},
-    })
-    handshake.on('response', ({statusCode, headers}) => {
-      resolve(statusCode === 200 && headers[TOKEN_HEADER] === TOKEN)
-    })
-    handshake.on('error', () => resolve(false))
-    handshake.end()
-  })
-}