@applitools/eyes-playwright 1.29.5 → 1.30.0

package/dist/fixture/reporter.js

@@ -0,0 +1,108 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalData = void 0;
+const os = __importStar(require("os"));
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const playwrightPath = require.resolve('playwright');
+const HtmlReporter = require(path.join(path.dirname(playwrightPath), '/lib/reporters/html')).default;
+const pluginsFile = require.resolve('../../dist/fixture/reportRenderer.js');
+const styleFile = require.resolve('./reporterStyle.css');
+const createInjectedScript = (testResultsMap) => `
+<script>window.__icons = {
+  visualTest: \`${fs.readFileSync(require.resolve('./images/visual-text.svg'), 'utf-8')}\`,
+  link: \`${fs.readFileSync(require.resolve('./images/link.svg'), 'utf-8')}\`,
+}</script>
+<script>
+  ${fs.readFileSync(pluginsFile, 'utf-8')}
+  window.__testResultsMap = ${JSON.stringify(testResultsMap)};
+  window.__initEyesReport();
+</script>
+<style type="text/css">${fs.readFileSync(styleFile, 'utf-8')}</style>
+`;
+class EyesReporter extends HtmlReporter {
+    constructor(options) {
+        super(options);
+        this.internalIds = [];
+    }
+    onTestEnd(test, result) {
+        var _a;
+        (_a = super.onTestEnd) === null || _a === void 0 ? void 0 : _a.call(this, test, result);
+        const index = result.attachments.findIndex(a => a.name === 'internalId');
+        if (index > -1) {
+            const internalId = result.attachments[index].body.toString();
+            this.internalIds.push(internalId);
+            result.attachments.splice(index, 1);
+        }
+    }
+    async onEnd(result) {
+        await super.onEnd(result);
+        const testResultsMap = {};
+        for (const internalId of this.internalIds) {
+            const content = await exports.InternalData.consume(internalId);
+            if (content) {
+                testResultsMap[content.key] = content.data;
+            }
+        }
+        try {
+            const filePath = path.join(this._outputFolder, 'index.html');
+            fs.appendFileSync(filePath, createInjectedScript(testResultsMap));
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.error('Error modifying index.html:', e);
+        }
+    }
+}
+exports.default = EyesReporter;
+exports.InternalData = {
+    async write({ testInfo, data }) {
+        const internalId = testInfo.attachments.find(a => a.name === 'internalId').body.toString();
+        const key = `${testInfo.testId}--${testInfo.retry}`;
+        this.ensureFolder();
+        await fs.promises.writeFile(this.getPathForInternalId(internalId), JSON.stringify({ key, data }));
+    },
+    async consume(internalId) {
+        const filepath = this.getPathForInternalId(internalId);
+        try {
+            const content = await fs.promises.readFile(filepath, 'utf-8').then(JSON.parse);
+            await fs.promises.unlink(filepath);
+            return content;
+        }
+        catch (err) {
+            // TODO no eyes results for test - this is ok, could be that no visual tests occurred for this playwright test
+        }
+    },
+    ensureFolder() {
+        const folderPath = path.join(os.tmpdir(), 'eyes-report-files');
+        if (!fs.existsSync(folderPath)) {
+            fs.mkdirSync(folderPath);
+        }
+    },
+    getPathForInternalId(internalId) {
+        return path.join(os.tmpdir(), 'eyes-report-files', internalId);
+    },
+};

package/dist/fixture/reporterStyle.css

@@ -0,0 +1,88 @@
+.hidden {
+  display: none;
+}
+
+.eyes-test-results>.chip-body {
+  padding: 0;
+  height: 850px;
+}
+
+.eyes-test-results>.chip-body>iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.eyes-filter .test-file-test:not(.eyes-test){
+  display: none;
+}
+
+.eyes-batch-link {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.eyes-info {
+  display: flex;
+}
+.eyes-info-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.test-header-info {
+  font-weight: normal;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+}
+.test-header-info>a {
+  display: inline-flex;
+}
+.test-header-info>a>span {
+  display: inline-flex;
+}
+
+.visual-test-icon {
+  text-align: center;
+  align-content: center;
+  font-size: 24px;
+  height: 26px;
+  width: 26px;
+  margin-right: 5px;
+}
+.eyes-info>.status-text {
+  font-size: 14px;
+  text-align: center;
+  vertical-align: middle;
+  margin: auto;
+  color: rgba(0, 0, 0, 0.35);
+  text-transform: capitalize;
+  padding: 0 5px;
+}
+.eyes-info>.status-bar {
+  align-self: stretch;
+  border-radius: 0.25rem;
+  flex-shrink: 0;
+  width: 5px;
+}
+.eyes-info>.status-bar.aborted {
+  background: #ff8f00;
+}
+.eyes-info>.status-bar.unresolved {
+  background: #ff8f00;
+}
+.eyes-info>.status-bar.failed {
+  background: #e80600;
+}
+.eyes-info>.status-bar.passed {
+  background: #24b24b;
+}
+.eyes-info>.status-bar.new {
+  background: #24b24b;
+}
+.eyes-info>.status-bar.running {
+  background: #0067c6;
+}

package/dist/fixture/toHaveScreenshot.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.expectTypes = exports.expect = void 0;
+const test_1 = require("@playwright/test");
+const index_1 = require("./index");
+const getEyes_1 = require("./getEyes");
+exports.expect = test_1.expect.extend({
+    async toHaveScreenshot(pageOrLocator, nameOrOptions = {}, optOptions = {}) {
+        var _a, _b, _c, _d, _e;
+        const testInfo = index_1.test.info();
+        if (!testInfo) {
+            throw new Error(`toHaveScreenshot() must be called during the test`);
+        }
+        if ((_a = testInfo._projectInternal) === null || _a === void 0 ? void 0 : _a.ignoreSnapshots)
+            return { pass: !this.isNot, message: () => '', name: 'toHaveScreenshot', expected: nameOrOptions };
+        if (this.isNot) {
+            // eslint-disable-next-line no-console
+            console.warn("Applitools visual tests don't support negating visual assertions - the `.not` will be ignored");
+            // uncomment if we'll decide to fallback to the Playwright default not.toHaveScreenshot mechanism
+            // if (typeof nameOrOptions === 'string' || Array.isArray(nameOrOptions)) {
+            //   await baseExpect(pageOrLocator).not.toHaveScreenshot(nameOrOptions, optOptions)
+            // } else {
+            //   await baseExpect(pageOrLocator).not.toHaveScreenshot({...nameOrOptions, ...optOptions})
+            // }
+        }
+        expectTypes(pageOrLocator, ['Page', 'Locator'], 'toHaveScreenshot');
+        const [page, locator] = pageOrLocator.constructor.name === 'Page'
+            ? [pageOrLocator, undefined]
+            : [pageOrLocator.page(), pageOrLocator];
+        const options = {
+            ...optOptions,
+            ...(typeof nameOrOptions === 'object' ? nameOrOptions : {}),
+        };
+        const unsupportedOptions = [
+            {
+                flag: options.animations === 'disabled',
+                message: 'animations option is not supported by Applitools',
+            },
+            {
+                flag: options.caret === 'initial',
+                message: '`caret: initial` is not supported by Applitools',
+            },
+            {
+                flag: locator && options.clip,
+                message: 'using both locator and clip options at the same time is not supported by Applitools',
+            },
+            {
+                flag: options.omitBackground,
+                message: 'the omitBackground option is not supported by Applitools',
+            },
+            {
+                flag: options.scale === 'css',
+                message: 'the CSS scale option is not supported by Applitools',
+            },
+            {
+                flag: options.style,
+                message: 'style option is not supported by Applitools',
+            },
+            {
+                flag: options.stylePath,
+                message: 'stylePath option is not supported by Applitools',
+            },
+        ];
+        for (const { flag, message } of unsupportedOptions) {
+            if (flag) {
+                // eslint-disable-next-line no-console
+                console.warn(`Warning - ${message}. This option will be ignored.`);
+            }
+        }
+        const redundantOptions = [
+            {
+                flag: options.maskColor,
+                message: 'maskColor option is not used by Applitools',
+            },
+            {
+                flag: options.quality,
+                message: 'quality option is not used by Applitools',
+            },
+            {
+                flag: options.maxDiffPixelRatio,
+                message: 'maxDiffPixelRatio option is not used by Applitools',
+            },
+            {
+                flag: options.maxDiffPixels,
+                message: 'maxDiffPixels option is not used by Applitools',
+            },
+            {
+                flag: options.threshold,
+                message: 'threshold option is not used by Applitools',
+            },
+        ];
+        for (const { flag, message } of redundantOptions) {
+            if (flag) {
+                // eslint-disable-next-line no-console
+                console.warn(`${message}, because Applitools utilizes smarter comparison algorithms that mimic the humn eyesight, and therefore do not require using that option. Feel free to remove that hard-coded configuration as it's not used and no longer needed.`);
+            }
+        }
+        const configuration = (_b = page.__eyesConfig) !== null && _b !== void 0 ? _b : {};
+        configuration.properties = [
+            ...((_c = configuration.properties) !== null && _c !== void 0 ? _c : []),
+            {
+                name: 'playwright: expect.toHaveScreenshot options',
+                value: JSON.stringify(options),
+            },
+            {
+                name: 'playwright: syntax used',
+                value: 'toHaveScreenshot',
+            },
+        ];
+        if (this.isNot) {
+            configuration.properties.push({
+                name: 'negated',
+                value: 'true',
+            });
+        }
+        await (await (0, getEyes_1.getEyes)({
+            testInfo,
+            eyesConfig: (_d = page.__eyesConfig) !== null && _d !== void 0 ? _d : {},
+            eyesRunner: (_e = page.__eyesRunner) !== null && _e !== void 0 ? _e : {},
+            page,
+        })).check({
+            name: typeof nameOrOptions === 'string'
+                ? nameOrOptions
+                : Array.isArray(nameOrOptions)
+                    ? nameOrOptions.join('-')
+                    : typeof (nameOrOptions === null || nameOrOptions === void 0 ? void 0 : nameOrOptions.name) === 'string'
+                        ? nameOrOptions.name
+                        : undefined,
+            region: locator !== null && locator !== void 0 ? locator : options.clip,
+            fully: options.fullPage,
+            ignoreRegions: options.mask,
+        });
+        return {
+            pass: true,
+            message: () => 'screenshot taken, comparison is in progress. The results will be reported after the test ends (soft assertion).',
+        };
+    },
+});
+function expectTypes(receiver, types, matcherName) {
+    if (typeof receiver !== 'object' || !types.includes(receiver.constructor.name)) {
+        const commaSeparated = types.slice();
+        const lastType = commaSeparated.pop();
+        const typesString = commaSeparated.length ? commaSeparated.join(', ') + ' or ' + lastType : lastType;
+        throw new Error(`${matcherName} can be only used with ${typesString} object${types.length > 1 ? 's' : ''}`);
+    }
+}
+exports.expectTypes = expectTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-playwright",
-  "version": "1.29.5",
+  "version": "1.30.0",
   "description": "Applitools Eyes SDK for Playwright",
   "keywords": [
     "eyes-playwright",
@@ -25,31 +25,73 @@
     "dist",
     "types"
   ],
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./reporter": {
+      "types": "./types/fixture/fixture/reporter.d.ts",
+      "default": "./dist/fixture/reporter.js"
+    },
+    "./fixture": {
+      "types": "./types/fixture.d.ts",
+      "default": "./dist/fixture/index.js"
+    }
+  },
+  "bin": {
+    "eyes-setup": "./dist/fixture/cli.js"
+  },
   "scripts": {
     "lint": "run --top-level eslint '**/*.ts'",
-    "build": "run --top-level tspc --project ./tsconfig.build.json",
+    "build": "run build:ts && run build:report && run build:cli",
+    "build:ts": "run build:ts:sdk && run build:ts:fixture",
+    "build:ts:sdk": "run --top-level tspc --project ./tsconfig.build.json",
+    "build:ts:fixture": "run --top-level tspc --project ./tsconfig.fixture.json",
+    "build:report": "rollup --config src/fixture/build/rollup.config.ts --configPlugin typescript && cp src/fixture/reporterStyle.css dist/fixture && cp -R src/fixture/images dist/fixture",
+    "build:cli": "cp -R src/fixture/example dist/fixture",
     "generate:tests": "NODE_OPTIONS='--experimental-import-meta-resolve --experimental-loader=@applitools/generic/dist/code-loader.js' generic ./test/generic/config.mjs",
     "test": "APPLITOOLS_SHOW_LOGS=true APPLITOOLS_LOG_FILE=\"./logs/$(uuidgen).log\" APPLITOOLS_BATCH_NAME='JS Tests: eyes-playwright' APPLITOOLS_BATCH_ID=$(uuidgen) run --top-level mocha './**/*.spec.{js,ts}' --parallel --jobs ${MOCHA_JOBS:-15} --exit",
     "test:coverage": "APPLITOOLS_SHOW_LOGS=true APPLITOOLS_LOG_FILE=\"./logs/$(uuidgen).log\" APPLITOOLS_BATCH_NAME='JS Coverage Tests: eyes-playwright' APPLITOOLS_BATCH_ID=$(uuidgen) MOCHA_GROUP=coverage run --top-level mocha './test/generated-coverage/*.spec.js' --parallel --jobs ${MOCHA_JOBS:-15} --exit",
+    "test:fixture": "APPLITOOLS_SHOW_LOGS=true APPLITOOLS_LOG_FILE=\"./logs/$(uuidgen).log\" APPLITOOLS_BATCH_NAME='JS Coverage Tests: eyes-playwright-fixture' APPLITOOLS_BATCH_ID=$(uuidgen) run playwright test",
     "setup": "run playwright:setup",
     "playwright:setup": "yarn playwright install --with-deps chromium firefox webkit",
     "up:framework": "echo \"$(jq '.devDependencies.playwright = $ENV.APPLITOOLS_FRAMEWORK_VERSION' ./package.json)\" > ./package.json"
   },
   "dependencies": {
-    "@applitools/eyes": "1.25.1",
-    "@applitools/spec-driver-playwright": "1.4.3"
+    "@applitools/eyes": "1.26.0",
+    "@applitools/spec-driver-playwright": "1.5.0",
+    "@applitools/utils": "1.7.4",
+    "@inquirer/prompts": "7.0.1",
+    "chalk": "4.1.2",
+    "yargs": "17.7.2"
   },
   "devDependencies": {
     "@applitools/api-extractor": "^1.2.22",
     "@applitools/bongo": "^5.10.0",
     "@applitools/generic": "^3.9.1",
     "@applitools/test-utils": "^1.5.17",
+    "@playwright/test": "1.47.0",
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.0",
     "@types/node": "^12.20.55",
-    "playwright": "1.39.0"
+    "jszip": "^3.10.1",
+    "playwright": "1.47.0",
+    "rollup": "^4.1.4"
   },
   "peerDependencies": {
+    "@playwright/test": ">=1.0.0",
     "playwright": ">=1.0.0"
   },
+  "peerDependenciesMeta": {
+    "@playwright/test": {
+      "optional": true
+    },
+    "playwright": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=12.13.0"
   },

package/types/fixture.d.ts

@@ -0,0 +1,48 @@
+import type {
+  ConfigurationPlain,
+  RunnerOptionsPlain,
+  TestResultContainer,
+  LogHandlerPlain,
+  Eyes as BaseEyes,
+  CheckSettingsAutomationPlain,
+  MatchResult,
+} from "./index"
+import {test as base, type TestInfo} from '@playwright/test'
+
+export type EyesFixture = {
+  eyesConfig: EyesConfig
+}
+
+export type EyesConfig = Omit<
+  ConfigurationPlain,
+  'concurrentSessions' | 'dontCloseBatches' | 'displayName' | 'testName'
+> & {
+  displayName?: string | ((testInfo: TestInfo) => string)
+  testName?: string | ((testInfo: TestInfo) => string)
+  logConfig?:
+    | LogHandlerPlain
+    | ((testInfo: TestInfo) => LogHandlerPlain)
+    | LogHandlerPlain[]
+    | ((testInfo: TestInfo) => LogHandlerPlain[])
+} & RunnerOptionsPlain & {
+  type?: 'ufg' | 'classic'
+  /**
+   * * If set to "afterEach", visual differences will be thrown after each test.
+   * * If set to "afterAll", visual differences will be thrown after all tests (more performant, but less granular).
+   * * If set to false, visual differences will not be thrown - best used with Eyes' CSM integration.
+   */
+  failTestsOnDiff?: 'afterEach' | 'afterAll' | false
+  afterAll?: (results: Array<TestResultContainer>) => Promise<void>
+}
+
+type Eyes = Pick<BaseEyes, 'locate' | 'extractText' | 'extractTextRegions'> & {
+  check(name?: string, checkSettings?: CheckSettingsAutomationPlain): Promise<MatchResult>
+}
+
+type EyesTestFixture = EyesFixture & {
+  eyes: Eyes
+}
+
+type EyesWorkerFixture = EyesFixture
+
+export const test: ReturnType<typeof base.extend<EyesTestFixture, EyesWorkerFixture>>