@applitools/eyes-playwright 1.29.4 → 1.30.0

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # Changelog
 
+## [1.30.0](https://github.com/Applitools-Dev/sdk/compare/js/eyes-playwright@1.29.5...js/eyes-playwright@1.30.0) (2024-10-31)
+
+
+### Features
+
+* html report for playwright ([#2576](https://github.com/Applitools-Dev/sdk/issues/2576)) ([f93f164](https://github.com/Applitools-Dev/sdk/commit/f93f164a289f5676bcc9d650e5e3d90b8e6a6920))
+
+
+### Dependencies
+
+* @applitools/snippets bumped to 2.6.0
+  #### Features
+
+  * html report for playwright ([#2576](https://github.com/Applitools-Dev/sdk/issues/2576)) ([f93f164](https://github.com/Applitools-Dev/sdk/commit/f93f164a289f5676bcc9d650e5e3d90b8e6a6920))
+* @applitools/spec-driver-playwright bumped to 1.5.0
+  #### Features
+
+  * html report for playwright ([#2576](https://github.com/Applitools-Dev/sdk/issues/2576)) ([f93f164](https://github.com/Applitools-Dev/sdk/commit/f93f164a289f5676bcc9d650e5e3d90b8e6a6920))
+
+
+
+* @applitools/core-base bumped to 1.19.0
+  #### Features
+
+  * html report for playwright ([#2576](https://github.com/Applitools-Dev/sdk/issues/2576)) ([f93f164](https://github.com/Applitools-Dev/sdk/commit/f93f164a289f5676bcc9d650e5e3d90b8e6a6920))
+* @applitools/core bumped to 4.22.0
+  #### Features
+
+  * html report for playwright ([#2576](https://github.com/Applitools-Dev/sdk/issues/2576)) ([f93f164](https://github.com/Applitools-Dev/sdk/commit/f93f164a289f5676bcc9d650e5e3d90b8e6a6920))
+
+
+
+* @applitools/dom-snapshot bumped to 4.11.5
+
+* @applitools/driver bumped to 1.19.5
+
+* @applitools/spec-driver-webdriver bumped to 1.1.17
+
+* @applitools/spec-driver-selenium bumped to 1.5.88
+
+* @applitools/spec-driver-puppeteer bumped to 1.4.17
+
+* @applitools/screenshoter bumped to 3.9.3
+
+* @applitools/nml-client bumped to 1.8.15
+
+* @applitools/ec-client bumped to 1.9.11
+
+* @applitools/eyes bumped to 1.26.0
+  #### Features
+
+  * html report for playwright ([#2576](https://github.com/Applitools-Dev/sdk/issues/2576)) ([f93f164](https://github.com/Applitools-Dev/sdk/commit/f93f164a289f5676bcc9d650e5e3d90b8e6a6920))
+
+
+
+
+## [1.29.5](https://github.com/Applitools-Dev/sdk/compare/js/eyes-playwright@1.29.4...js/eyes-playwright@1.29.5) (2024-10-29)
+
+
+### Dependencies
+
+* @applitools/screenshoter bumped to 3.9.2
+  #### Bug Fixes
+
+  * test in screenshoter web ([f068dbe](https://github.com/Applitools-Dev/sdk/commit/f068dbe9036163fb3e316411cfd9f47a226d7c9c))
+* @applitools/core bumped to 4.21.2
+
+* @applitools/eyes bumped to 1.25.1
+
+
 ## [1.29.4](https://github.com/Applitools-Dev/sdk/compare/js/eyes-playwright@1.29.3...js/eyes-playwright@1.29.4) (2024-10-21)
 
 

package/dist/fixture/build/rollup.config.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const plugin_node_resolve_1 = __importDefault(require("@rollup/plugin-node-resolve"));
+const plugin_commonjs_1 = __importDefault(require("@rollup/plugin-commonjs"));
+const config = {
+    input: 'src/fixture/reportRenderer.js',
+    output: {
+        dir: 'dist/fixture',
+        format: 'cjs',
+    },
+    plugins: [(0, plugin_node_resolve_1.default)({ browser: true }), (0, plugin_commonjs_1.default)()],
+};
+exports.default = config;

package/dist/fixture/cli.js

@@ -0,0 +1,216 @@
+#!/usr/bin/env node
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importStar(require("fs"));
+const path_1 = __importDefault(require("path"));
+const prompts_1 = require("@inquirer/prompts");
+const yargs_1 = __importDefault(require("yargs/yargs"));
+const utils = __importStar(require("@applitools/utils"));
+const chalk_1 = __importDefault(require("chalk"));
+const { hideBin } = require('yargs/helpers');
+(0, yargs_1.default)(hideBin(process.argv))
+    .command({
+    command: 'run-example',
+    handler: handleError(runExample),
+})
+    .command({
+    command: '*',
+    builder: yargs => {
+        const args = yargs.options({
+            apiKey: {
+                describe: "Your Applitools Team's API key (here's how to obtain it: https://applitools.com/docs/topics/overview/obtain-api-key.html)",
+                type: 'string',
+            },
+            serverUrl: { describe: 'Your Eyes dedicated cloud server URL', type: 'string' },
+        });
+        return args;
+    },
+    handler: handleError(init),
+})
+    .help()
+    .parse();
+function handleError(asyncFunc) {
+    return async (...args) => asyncFunc(...args).catch((err) => {
+        if (err.name === 'ExitPromptError') {
+            log('See you next time!');
+        }
+        else {
+            error(`Error while setting up Eyes: ${err.message}`);
+        }
+        process.exit(1);
+    });
+}
+async function init(args) {
+    log(chalk_1.default.yellow('Setting up Eyes-Playwright fixture and reporter for your project:'));
+    let wroteGray = false;
+    const playwrightConfig = await fs_1.promises.readFile('playwright.config.ts', 'utf-8');
+    await updatePlaywrightConfig();
+    await createExampleTest();
+    await updateTestFiles();
+    printPostlude();
+    async function updatePlaywrightConfig() {
+        var _a, _b;
+        if (!/EyesFixture/.test(playwrightConfig)) {
+            const apiKey = (_a = args.apiKey) !== null && _a !== void 0 ? _a : (await (0, prompts_1.input)({
+                message: 'Enter your API key (https://applitools.com/docs/topics/overview/obtain-api-key.html):',
+            }));
+            const serverUrl = (_b = args.serverUrl) !== null && _b !== void 0 ? _b : (await (0, prompts_1.input)({ message: 'Enter your Eyes server URL (the default is https://eyes.applitools.com):' }));
+            const apiKeyStr = apiKey ? `apiKey: '${apiKey}'` : `// apiKey: ''`;
+            const serverUrlStr = serverUrl ? `serverUrl: '${serverUrl}'` : `// serverUrl: 'https://eyes.applitools.com'`;
+            const newPlaywrightConfig = "import { EyesFixture } from '@applitools/eyes-playwright/fixture';\n" +
+                playwrightConfig
+                    .replace(/export default defineConfig\({/, 'export default defineConfig<EyesFixture>({')
+                    .replace(/(use: {)/, `$1
+    /* Configuration for Eyes VisualAI */
+    eyesConfig: {
+      /* The following and other configuration parameters are documented at: <url> */
+      ${apiKeyStr}, // alternatively, set this via environment variable APPLITOOLS_API_KEY
+      ${serverUrlStr},
+
+      // failTestsOnDiff: false,
+      // appName: 'My App',
+      // matchLevel: 'Strict',
+      // batch: { name: 'My Batch' },
+      // proxy: {url: 'http://127.0.0.1:8888'},
+      // stitchMode: 'CSS',
+      // matchTimeout: 0,
+      // waitBeforeScreenshots: 50,
+      // saveNewTests: true,
+    },
+`)
+                    .replace(/reporter: 'html'/, "reporter: '@applitools/eyes-playwright/reporter'");
+            await fs_1.promises.writeFile('playwright.config.ts', newPlaywrightConfig);
+            log('');
+            log(chalk_1.default.gray('Updating playwright.config.ts with Eyes configuration'));
+            log(chalk_1.default.gray('Updating playwright.config.ts with Eyes HTML reporter'));
+            wroteGray = true;
+        }
+    }
+    async function createExampleTest() {
+        if (!fs_1.default.existsSync('./eyes-examples')) {
+            if (!wroteGray) {
+                log('');
+                wroteGray = true;
+            }
+            log(chalk_1.default.gray('Creating eyes-examples folder'));
+            await fs_1.promises.mkdir('./eyes-examples');
+            await fs_1.promises.copyFile(path_1.default.join(__dirname, 'example', 'playwright-website.spec.ts'), './eyes-examples/playwright-website.spec.ts');
+        }
+    }
+    async function updateTestFiles() {
+        const testDirMatch = playwrightConfig.match(/testDir\s*:\s*['"]([^'"]+)['"]/);
+        if (testDirMatch) {
+            const testDir = testDirMatch[1];
+            await forEachFile(path_1.default.resolve(testDir), async (filePath) => {
+                const testContent = await fs_1.promises.readFile(filePath, 'utf-8');
+                await fs_1.promises.writeFile(filePath, testContent.replace(/import { test, expect } from '@playwright\/test'/, `import { test, expect } from '@applitools/eyes-playwright/fixture'`));
+            });
+        }
+        else {
+            log(chalk_1.default.yellow('Cannot automatically set up "import {test, expect} from \'@applitools/eyes-playwright/fixture\'" - Could not find testDir from configruation.'));
+        }
+    }
+    function printPostlude() {
+        log('');
+        if (wroteGray) {
+            log(chalk_1.default.green('✔ Success!'), chalk_1.default.bold('Eyes-Playwright fixture and reporter are now set up!'));
+        }
+        else {
+            log(chalk_1.default.cyan('✔ Good news!'), chalk_1.default.bold('Eyes-Playwright is already properly configured!'));
+        }
+        log('');
+        log('Try out the example test by running the following:');
+        log('');
+        log(chalk_1.default.cyan('  npx eyes-setup run-example'));
+        log('');
+        log('👀 Tests that are already performing visual tests with expect(page).toHaveScreenshot() now automatically use Eyes');
+        log('');
+        log("👀 The Eyes HTML reporter extends Playwright's HTML reporter with improved side by side visual comparison");
+        log('');
+        log('Visit <Eyes docs> for more information.');
+    }
+}
+async function runExample() {
+    const playwrightTmpConfigPath = './eyes-examples/playwright.tmp.config.ts';
+    const playwrightTmpExists = fs_1.default.existsSync(playwrightTmpConfigPath);
+    await writeTmpPlaywrightConfig();
+    await runPlaywrightCommand();
+    await cleanupTmpPlaywrightConfig();
+    async function writeTmpPlaywrightConfig() {
+        if (!playwrightTmpExists) {
+            const playwrighConfig = await fs_1.promises.readFile('./playwright.config.ts', 'utf-8');
+            const apikeyMatch = playwrighConfig.match(/apiKey: (.+)/);
+            const apiKey = apikeyMatch ? apikeyMatch[1] : undefined;
+            const serverUrlMatch = playwrighConfig.match(/serverUrl: (.+)/);
+            const serverUrl = serverUrlMatch ? serverUrlMatch[1] : undefined;
+            const playwrightTmpConfig = `import { defineConfig, devices } from '@playwright/test';
+  import { EyesFixture } from '@applitools/eyes-playwright/fixture';
+  export default defineConfig<EyesFixture>({
+    testDir: '.',
+    outputDir: './test-results',
+    reporter: [['@applitools/eyes-playwright/reporter', {open: 'always', outputFolder: './eyes-playwright-report'}]],
+    use: {
+      eyesConfig: {
+        apiKey: ${apiKey !== null && apiKey !== void 0 ? apiKey : ''},
+        serverUrl: ${serverUrl !== null && serverUrl !== void 0 ? serverUrl : ''}
+      }
+    }
+  })`;
+            await fs_1.promises.writeFile(playwrightTmpConfigPath, playwrightTmpConfig);
+        }
+    }
+    async function cleanupTmpPlaywrightConfig() {
+        if (!playwrightTmpExists) {
+            await fs_1.promises.unlink(playwrightTmpConfigPath);
+        }
+    }
+    async function runPlaywrightCommand() {
+        await utils.process.sh(`npx playwright test --config ${playwrightTmpConfigPath}`, {
+            spawnOptions: { stdio: 'inherit' },
+        });
+    }
+}
+function log(...args) {
+    console.log(...args); // eslint-disable-line no-console
+}
+function error(...args) {
+    console.error(...args); // eslint-disable-line no-console
+}
+async function forEachFile(folderPath, func) {
+    const files = await fs_1.promises.readdir(folderPath);
+    for (const file of files) {
+        const filePath = path_1.default.join(folderPath, file);
+        if ((await fs_1.promises.stat(filePath)).isDirectory()) {
+            await forEachFile(filePath, func);
+        }
+        else {
+            await func(filePath);
+        }
+    }
+}

package/dist/fixture/defaults/batch/name.js

@@ -0,0 +1,75 @@
+"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.getBatchName = void 0;
+const child_process_1 = require("child_process");
+const fs = __importStar(require("fs"));
+const os = __importStar(require("os"));
+const utils = __importStar(require("@applitools/utils"));
+const path = __importStar(require("path"));
+function getBatchName({ appName }) {
+    // Function to execute Git command fallback
+    function getGitInfo(command) {
+        const tmpFilepath = path.join(os.tmpdir(), utils.general.guid());
+        try {
+            const stream = fs.openSync(tmpFilepath, 'a');
+            (0, child_process_1.execSync)(command, { stdio: ['ignore', stream, stream] });
+            return fs.readFileSync(tmpFilepath, 'utf-8').trim();
+        }
+        catch (error) {
+            return null;
+        }
+        finally {
+            if (fs.existsSync(tmpFilepath)) {
+                fs.unlinkSync(tmpFilepath);
+            }
+        }
+    }
+    const branchName = process.env.BRANCH ||
+        process.env.CI_COMMIT_BRANCH ||
+        process.env.CI_BRANCH_NAME ||
+        process.env.CI_COMMIT_REF_NAME ||
+        process.env.CI_BRANCH ||
+        process.env.REF_NAME ||
+        process.env.BUILD_SOURCEBRANCHNAME || // Azure DevOps
+        (process.env.GITHUB_REF ? process.env.GITHUB_REF.replace(/^refs\/heads\//, '') : null) || // GitHub Actions
+        process.env.CIRCLE_BRANCH || // CircleCI
+        process.env.BITBUCKET_BRANCH || // Bitbucket
+        process.env.BUILD_BRANCH || // Jenkins
+        getGitInfo('git rev-parse --abbrev-ref HEAD'); // Fallback to Git command
+    const commitSHA = process.env.SHA ||
+        process.env.GIT_SHA ||
+        process.env.CI_COMMIT_SHA ||
+        process.env.COMMIT_HASH ||
+        process.env.CI_COMMIT_ID ||
+        process.env.BUILD_SOURCEVERSION || // Azure DevOps
+        process.env.GITHUB_SHA || // GitHub Actions
+        process.env.CIRCLE_SHA1 || // CircleCI
+        process.env.BITBUCKET_COMMIT || // Bitbucket
+        process.env.GIT_COMMIT || // Jenkins
+        getGitInfo('git rev-parse HEAD'); // Fallback to Git command
+    return [appName, commitSHA, branchName].filter(Boolean).join(' - ');
+}
+exports.getBatchName = getBatchName;

package/dist/fixture/defaults/eyesConfiguration.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFinalEyesConfiguration = void 0;
+const name_1 = require("./batch/name");
+const path_1 = __importDefault(require("path"));
+function addConfigurationProperties({ properties = [], testInfo, }) {
+    const result = [
+        ...properties,
+        {
+            name: 'Playwright title path',
+            value: `${path_1.default.relative(process.cwd(), testInfo.file)}:${testInfo.line} > ${testInfo.titlePath
+                .slice(1)
+                .join(' > ')}`,
+        },
+        { name: 'Playwright worker index', value: String(testInfo.workerIndex) },
+        { name: 'Playwright parallel index', value: String(testInfo.parallelIndex) },
+        ...testInfo.tags.map(tag => ({ name: tag, value: tag })),
+        ...testInfo.annotations.map(annotation => ({ name: annotation.type, value: String(annotation.description) })),
+    ];
+    if (testInfo.config.projects.length > 1) {
+        result.push({ name: 'Playwright project name', value: testInfo.project.name });
+    }
+    if (testInfo.retry > 0) {
+        properties.push({ name: 'Playwright retry', value: String(testInfo.retry) });
+    }
+    if (testInfo.expectedStatus !== 'passed') {
+        properties.push({ name: 'Playwright expected status', value: testInfo.expectedStatus });
+    }
+    return result;
+}
+function addBatchDefaults({ configuration }) {
+    var _a, _b, _c, _d;
+    const batch = (_a = configuration.batch) !== null && _a !== void 0 ? _a : {};
+    (_b = batch.id) !== null && _b !== void 0 ? _b : (batch.id = `generated-${process.ppid}`);
+    (_c = batch.name) !== null && _c !== void 0 ? _c : (batch.name = (0, name_1.getBatchName)({ appName: configuration.appName }));
+    (_d = batch.properties) !== null && _d !== void 0 ? _d : (batch.properties = []);
+    batch.properties.push({ name: 'CI', value: process.env.CI ? 'true' : 'false' });
+    batch.properties.push({ name: 'Playwright version', value: require('playwright-core/package.json').version });
+    return batch;
+}
+function getFinalEyesConfiguration({ playwrightConfig = {}, projectConfig = {}, eyesConfig = {}, testInfo, }) {
+    var _a, _b, _c, _d;
+    const configuration = {
+        ...playwrightConfig,
+        ...projectConfig,
+        ...eyesConfig,
+    };
+    (_a = configuration.appName) !== null && _a !== void 0 ? _a : (configuration.appName = 'My App');
+    (_b = configuration.displayName) !== null && _b !== void 0 ? _b : (configuration.displayName = testInfo.title); // by default, the display name won't include the full path
+    (_c = configuration.testName) !== null && _c !== void 0 ? _c : (configuration.testName = testInfo.titlePath.join(' > '));
+    configuration.properties = addConfigurationProperties({ properties: configuration.properties, testInfo });
+    configuration.batch = addBatchDefaults({ configuration });
+    (_d = configuration.stitchMode) !== null && _d !== void 0 ? _d : (configuration.stitchMode = 'CSS');
+    configuration.forceFullPageScreenshot = true;
+    const displayName = typeof configuration.displayName === 'function' ? configuration.displayName(testInfo) : configuration.displayName;
+    const testName = typeof configuration.testName === 'function' ? configuration.testName(testInfo) : configuration.testName;
+    return {
+        ...configuration,
+        displayName,
+        testName,
+    };
+}
+exports.getFinalEyesConfiguration = getFinalEyesConfiguration;

package/dist/fixture/example/playwright-website.spec.ts

@@ -0,0 +1,18 @@
+import { test } from '@applitools/eyes-playwright/fixture'
+
+test('Playwright website', async ({ page, eyes }) => {
+  await page.goto('https://playwright.dev/');
+
+  /* Full page visual check */
+  await eyes.check('Home page')
+
+  const searchBox = page.getByLabel('Search')
+  
+  /* Region visual check - "Search" component in light theme */
+  await eyes.check('Search box in light theme', {region: searchBox})
+
+  await page.getByLabel('Switch between dark and light').click();
+  
+  /* Region visual check - "Search" component in dark theme */
+  await eyes.check('Search box in dark theme', {region: searchBox})
+});

package/dist/fixture/getEyes.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEyes = void 0;
+const test_1 = require("@playwright/test");
+const index_1 = require("../index");
+const eyesConfiguration_1 = require("./defaults/eyesConfiguration");
+async function getEyes({ testInfo, eyesConfig, eyesRunner, page, }) {
+    var _a, _b, _c, _d, _e;
+    if (page.__eyes) {
+        return page.__eyes;
+    }
+    const playwrightConfig = (_c = (_b = ((testInfo.config.configFile
+        ? (_a = require(testInfo.config.configFile)) === null || _a === void 0 ? void 0 : _a.default
+        : {}))) === null || _b === void 0 ? void 0 : _b.use) === null || _c === void 0 ? void 0 : _c.eyesConfig;
+    const projectConfig = testInfo.project.use.eyesConfig;
+    const configuration = (0, eyesConfiguration_1.getFinalEyesConfiguration)({
+        playwrightConfig,
+        projectConfig,
+        eyesConfig,
+        testInfo,
+    });
+    const eyes = new index_1.Eyes(eyesRunner, {
+        // batches are closed automatically after some time, and closing batch from one process might make another process to open a new batch when it's not neccessary.
+        // therefore, we decides to set dontCloseBatches to true. If the user wants to see a notification after the batch is closed, we expect them to use our
+        // custom playwright reporter, or to sent the notification manually in their CI pipeline
+        dontCloseBatches: true,
+        ...configuration,
+    });
+    addLogHandlers(eyes, (_e = (_d = eyesConfig.logConfig) !== null && _d !== void 0 ? _d : projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.logConfig) !== null && _e !== void 0 ? _e : playwrightConfig === null || playwrightConfig === void 0 ? void 0 : playwrightConfig.logConfig, testInfo);
+    eyes.open = makeStep('eyes.open', eyes.open.bind(eyes));
+    eyes.check = makeStep('eyes.check', eyes.check.bind(eyes));
+    eyes.close = makeStep('eyes.close', eyes.close.bind(eyes));
+    eyes.closeAsync = makeStep('eyes.closeAsync (without exception)', eyes.closeAsync.bind(eyes));
+    await eyes.open(page, configuration.appName, configuration.testName);
+    page.__eyes = eyes;
+    return eyes;
+}
+exports.getEyes = getEyes;
+function makeStep(title, f, { box } = { box: true }) {
+    return (async (...args) => {
+        return test_1.test.step(title, async () => {
+            return await f(...args);
+        }, { box });
+    });
+}
+function addLogHandlers(eyes, logsConfig, testInfo) {
+    if (typeof logsConfig === 'function') {
+        addLogHandlers(eyes, logsConfig(testInfo), testInfo);
+    }
+    else if (Array.isArray(logsConfig)) {
+        logsConfig.forEach(logSetting => addLogHandlers(eyes, logSetting, testInfo));
+    }
+    else if (logsConfig) {
+        eyes.setLogHandler(logsConfig);
+    }
+}

package/dist/fixture/images/link.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox='0 0 16 16' width='16' height='16'>
+    <title>link</title>
+    <path fillRule='evenodd' d='M10.604 1h4.146a.25.25 0 01.25.25v4.146a.25.25 0 01-.427.177L13.03 4.03 9.28 7.78a.75.75 0 01-1.06-1.06l3.75-3.75-1.543-1.543A.25.25 0 0110.604 1zM3.75 2A1.75 1.75 0 002 3.75v8.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 12.25v-3.5a.75.75 0 00-1.5 0v3.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-8.5a.25.25 0 01.25-.25h3.5a.75.75 0 000-1.5h-3.5z'></path>
+</svg>

package/dist/fixture/images/visual-text.svg

@@ -0,0 +1,3 @@
+<svg className='octicon' viewBox='0 0 48 48' version='1.1' width='20' height='20' aria-hidden='true'>
+  <path xmlns='http://www.w3.org/2000/svg' d='M11.85 32H36.2l-7.35-9.95-6.55 8.7-4.6-6.45ZM7 40q-1.2 0-2.1-.9Q4 38.2 4 37V11q0-1.2.9-2.1Q5.8 8 7 8h34q1.2 0 2.1.9.9.9.9 2.1v26q0 1.2-.9 2.1-.9.9-2.1.9Zm0-29v26-26Zm34 26V11H7v26Z'/>
+</svg>