@coder/pixel-storybook 0.1.0

package/dist/runner.js

@@ -0,0 +1,186 @@
+import { copyFileSync } from 'node:fs';
+import { getApiToken, prepareUpload, processShots, sendInitToAPI, sendRecordLogsToAPI, } from './api.js';
+import { checkDifferences } from './checkDifferences.js';
+import { createShots } from './createShots.js';
+import { log } from './log.js';
+import { shardShotItems } from './shard.js';
+import { uploadRequiredShots } from './upload.js';
+import { createShotsFolders, exitProcess, getShardConfig, hashFile, isUpdateMode, parseHrtimeToSeconds, readDirIntoShotItems, removeFilesInFolder, } from './utils.js';
+export const runner = async (config) => {
+    const executionStart = process.hrtime();
+    try {
+        if (isUpdateMode()) {
+            log.process('info', 'general', 'Running lost-pixel in update mode. Baseline screenshots will be updated');
+        }
+        log.process('info', 'general', '📂 Creating shot folders');
+        const createShotsStart = process.hrtime();
+        createShotsFolders();
+        log.process('info', 'general', '📸 Creating shots');
+        let shotItems = await createShots();
+        const shardConfig = getShardConfig();
+        if (shardConfig) {
+            const totalBefore = shotItems.length;
+            shotItems = shardShotItems(shotItems, shardConfig);
+            log.process('info', 'general', `🔀 Shard ${shardConfig.current}/${shardConfig.total}: ${shotItems.length} of ${totalBefore} shots`);
+        }
+        const createShotsStop = process.hrtime(createShotsStart);
+        log.process('info', 'general', `Creating shots took ${parseHrtimeToSeconds(createShotsStop)} seconds`);
+        if (config.generateOnly && shotItems.length === 0) {
+            log.process('info', 'general', '👋 Exiting process with nothing to compare.');
+            exitProcess({});
+        }
+        log.process('info', 'general', '🔍 Checking differences');
+        const checkDifferenceStart = process.hrtime();
+        const { filterItemsToCheck } = config;
+        const filteredShotItems = filterItemsToCheck
+            ? shotItems.filter((item) => filterItemsToCheck(item))
+            : shotItems;
+        const { aboveThresholdDifferenceItems, noBaselinesItems } = await checkDifferences(filteredShotItems);
+        if (isUpdateMode()) {
+            // Remove only the files which are no longer present in our shot items
+            removeFilesInFolder(config.imagePathBaseline, shotItems.map((shotItem) => shotItem.filePathBaseline));
+            // Synchronize differences from both lack of baseline and over threshold difference
+            for (const noBaselineItem of noBaselinesItems) {
+                copyFileSync(noBaselineItem.filePathCurrent, noBaselineItem.filePathBaseline);
+            }
+            for (const aboveThresholdDifferenceItem of aboveThresholdDifferenceItems) {
+                copyFileSync(aboveThresholdDifferenceItem.filePathCurrent, aboveThresholdDifferenceItem.filePathBaseline);
+            }
+        }
+        if ((aboveThresholdDifferenceItems.length > 0 ||
+            noBaselinesItems.length > 0) &&
+            config.failOnDifference) {
+            log.process('info', 'general', `👋 Exiting process with ${aboveThresholdDifferenceItems.length} found differences & ${noBaselinesItems.length} baselines to update`);
+            if (config.generateOnly) {
+                exitProcess({});
+            }
+        }
+        const checkDifferenceStop = process.hrtime(checkDifferenceStart);
+        log.process('info', 'general', `⏱  Checking differences took ${parseHrtimeToSeconds(checkDifferenceStop)} seconds`);
+        const executionStop = process.hrtime(executionStart);
+        log.process('info', 'general', `⏱  Lost Pixel run took ${parseHrtimeToSeconds(executionStop)} seconds`);
+        exitProcess({
+            exitCode: 0,
+        });
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            log.process('error', 'general', error.message);
+        }
+        else {
+            log.process('error', 'general', error);
+        }
+        exitProcess({});
+    }
+};
+export const getPlatformApiToken = async (config) => {
+    if (!config.apiKey) {
+        log.process('error', 'general', `Running Lost Pixel in 'platform' mode requires an API key`);
+        process.exit(1);
+    }
+    if (isUpdateMode()) {
+        log.process('error', 'general', `Running Lost Pixel in 'update' mode requires the 'generateOnly' option to be set to true`);
+        process.exit(1);
+    }
+    try {
+        const result = await getApiToken(config);
+        return result.apiToken;
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            log.process('error', 'general', error.message);
+        }
+        else {
+            log.process('error', 'general', error);
+        }
+        process.exit(1);
+    }
+};
+export const platformRunner = async (config, apiToken) => {
+    const executionStart = process.hrtime();
+    try {
+        log.process('info', 'general', [
+            '📀 Using details:',
+            `ciBuildId = ${config.ciBuildId}`,
+            `ciBuildNumber = ${config.ciBuildNumber}`,
+            `repository = ${config.repository}`,
+            `commitRefName = ${config.commitRefName}`,
+            `commitHash = ${config.commitHash}`,
+        ].join('\n   - '));
+        if (config.setPendingStatusCheck) {
+            await sendInitToAPI(config, apiToken);
+        }
+        let shotItems;
+        if (config.uploadOnly) {
+            log.process('info', 'general', '📤 Upload-only mode — skipping screenshot creation');
+            shotItems = readDirIntoShotItems(config.imagePathCurrent);
+            log.process('info', 'general', `Found ${shotItems.length} existing shot(s) in ${config.imagePathCurrent}`);
+        }
+        else {
+            log.process('info', 'general', '📂 Creating shot folders');
+            const createShotsStart = process.hrtime();
+            createShotsFolders();
+            log.process('info', 'general', '📸 Creating shots');
+            const innerShotItems = await createShots();
+            const shotNames = innerShotItems.map((shotItem) => shotItem.shotName);
+            const uniqueShotNames = new Set(shotNames);
+            if (shotNames.length !== uniqueShotNames.size) {
+                const duplicates = shotNames.filter((shotName) => shotNames.filter((item) => item === shotName).length > 1);
+                throw new Error(`Error: Shot names must be unique (check for duplicate Story names: [ ${[
+                    ...new Set(duplicates),
+                ].join(', ')} ])`);
+            }
+            const createShotsStop = process.hrtime(createShotsStart);
+            log.process('info', 'general', `⏱  Creating shots took ${parseHrtimeToSeconds(createShotsStop)} seconds`);
+            shotItems = innerShotItems;
+        }
+        const shardConfig = getShardConfig();
+        if (shardConfig) {
+            const totalBefore = shotItems.length;
+            shotItems = shardShotItems(shotItems, shardConfig);
+            log.process('info', 'general', `🔀 Shard ${shardConfig.current}/${shardConfig.total}: ${shotItems.length} of ${totalBefore} shots`);
+        }
+        const extendedShotItems = shotItems.map((shotItem) => ({
+            ...shotItem,
+            uniqueName: `${shotItem.shotMode}/${shotItem.shotName}`,
+            hash: hashFile(shotItem.filePathCurrent),
+        }));
+        const { requiredFileHashes, uploadToken, uploadUrl } = await prepareUpload(config, apiToken, extendedShotItems.map((shotItem) => ({
+            name: shotItem.uniqueName,
+            hash: shotItem.hash,
+        })));
+        log.process('info', 'general', [
+            '🏙 ',
+            `${shotItems.length} shot(s) in total.`,
+            `${shotItems.length - requiredFileHashes.length} shot(s) already exist on platform.`,
+            `${requiredFileHashes.length} shot(s) will be uploaded at ${uploadUrl}.`,
+        ].join(' '));
+        await uploadRequiredShots({
+            config,
+            apiToken,
+            uploadToken,
+            uploadUrl,
+            requiredFileHashes,
+            extendedShotItems,
+        });
+        const shotsConfig = shotItems.map((shotItem) => ({
+            name: `${shotItem.shotMode}/${shotItem.shotName}`,
+            threshold: shotItem.threshold,
+            stabilization: shotItem.stabilization,
+        }));
+        await processShots(config, apiToken, uploadToken, shotsConfig);
+        const executionStop = process.hrtime(executionStart);
+        log.process('info', 'general', `⏱  Lost Pixel run took ${parseHrtimeToSeconds(executionStop)} seconds`);
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            log.process('error', 'general', error.message);
+        }
+        else {
+            log.process('error', 'general', error);
+        }
+        log.process('info', 'general', '🪵  Sending logs to platform.');
+        await sendRecordLogsToAPI(config, apiToken);
+        process.exit(1);
+    }
+};

package/dist/schemas.d.ts

@@ -0,0 +1,174 @@
+import type { BrowserContextOptions } from 'playwright-core';
+import * as z from 'zod';
+export declare const BrowserSchema: z.ZodEnum<["chromium", "firefox", "webkit"]>;
+export declare const ShotModeSchema: z.ZodEnum<["storybook"]>;
+/**
+ * Describes how the pre-screenshot stability wait concluded for a shot.
+ *
+ * - `stable`: the page settled within the cap (or `stabilizeBeforeScreenshot`
+ *   was disabled and we slept the full duration).
+ * - `fonts-not-ready`: the cap was hit waiting for `document.fonts.ready`.
+ * - `images-not-ready`: the cap was hit waiting for pending `<img>` elements
+ *   to load or error.
+ * - `unstable`: fonts and images were ready but the DOM kept mutating past
+ *   the cap.
+ */
+export declare const StabilizationStatusSchema: z.ZodEnum<["stable", "fonts-not-ready", "images-not-ready", "unstable"]>;
+export declare const StabilizationResultSchema: z.ZodObject<{
+    status: z.ZodEnum<["stable", "fonts-not-ready", "images-not-ready", "unstable"]>;
+    /** Wall-clock spent in the stability wait, in milliseconds. */
+    elapsedMs: z.ZodNumber;
+    /** The cap (in milliseconds) applied to the wait. */
+    capMs: z.ZodNumber;
+}, "strip", z.ZodTypeAny, {
+    status: "stable" | "fonts-not-ready" | "images-not-ready" | "unstable";
+    elapsedMs: number;
+    capMs: number;
+}, {
+    status: "stable" | "fonts-not-ready" | "images-not-ready" | "unstable";
+    elapsedMs: number;
+    capMs: number;
+}>;
+export declare const MaskSchema: z.ZodObject<{
+    /**
+     * CSS selector for the element to mask
+     * Examples:
+     * - `#my-id`: Selects the element with the id `my-id`
+     * - `.my-class`: Selects all elements with the class `my-class`
+     * - `div`: Selects all `div` elements
+     * - `div.my-class`: Selects all `div` elements with the class `my-class`
+     * - `li:nth-child(2n)`: Selects all even `li` elements
+     * - `[data-testid="hero-banner"]`: Selects all elements with the attribute `data-testid` set to `hero-banner`
+     * - `div > p`: Selects all `p` elements that are direct children of a `div` element
+     */
+    selector: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    selector: string;
+}, {
+    selector: string;
+}>;
+export declare const ShotItemSchema: z.ZodObject<{
+    shotMode: z.ZodEnum<["storybook"]>;
+    id: z.ZodString;
+    shotName: z.ZodString;
+    url: z.ZodString;
+    filePathBaseline: z.ZodString;
+    filePathCurrent: z.ZodString;
+    filePathDifference: z.ZodString;
+    browserConfig: z.ZodOptional<z.ZodType<BrowserContextOptions, z.ZodTypeDef, BrowserContextOptions>>;
+    threshold: z.ZodNumber;
+    waitBeforeScreenshot: z.ZodOptional<z.ZodNumber>;
+    stabilizeBeforeScreenshot: z.ZodOptional<z.ZodBoolean>;
+    /**
+     * Result of the pre-screenshot stability wait. Populated by
+     * `takeScreenShot` after the wait completes; not present on items that
+     * have not yet been captured or for shots that opted out via
+     * `stabilizeBeforeScreenshot: false`.
+     */
+    stabilization: z.ZodOptional<z.ZodObject<{
+        status: z.ZodEnum<["stable", "fonts-not-ready", "images-not-ready", "unstable"]>;
+        /** Wall-clock spent in the stability wait, in milliseconds. */
+        elapsedMs: z.ZodNumber;
+        /** The cap (in milliseconds) applied to the wait. */
+        capMs: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        status: "stable" | "fonts-not-ready" | "images-not-ready" | "unstable";
+        elapsedMs: number;
+        capMs: number;
+    }, {
+        status: "stable" | "fonts-not-ready" | "images-not-ready" | "unstable";
+        elapsedMs: number;
+        capMs: number;
+    }>>;
+    importPath: z.ZodOptional<z.ZodString>;
+    mask: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        /**
+         * CSS selector for the element to mask
+         * Examples:
+         * - `#my-id`: Selects the element with the id `my-id`
+         * - `.my-class`: Selects all elements with the class `my-class`
+         * - `div`: Selects all `div` elements
+         * - `div.my-class`: Selects all `div` elements with the class `my-class`
+         * - `li:nth-child(2n)`: Selects all even `li` elements
+         * - `[data-testid="hero-banner"]`: Selects all elements with the attribute `data-testid` set to `hero-banner`
+         * - `div > p`: Selects all `p` elements that are direct children of a `div` element
+         */
+        selector: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        selector: string;
+    }, {
+        selector: string;
+    }>, "many">>;
+    viewport: z.ZodOptional<z.ZodObject<{
+        width: z.ZodNumber;
+        height: z.ZodOptional<z.ZodNumber>;
+    }, "strip", z.ZodTypeAny, {
+        width: number;
+        height?: number | undefined;
+    }, {
+        width: number;
+        height?: number | undefined;
+    }>>;
+    breakpoint: z.ZodOptional<z.ZodNumber>;
+    breakpointGroup: z.ZodOptional<z.ZodString>;
+    elementLocator: z.ZodOptional<z.ZodString>;
+    waitForSelector: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    shotMode: "storybook";
+    id: string;
+    shotName: string;
+    url: string;
+    filePathBaseline: string;
+    filePathCurrent: string;
+    filePathDifference: string;
+    threshold: number;
+    browserConfig?: BrowserContextOptions | undefined;
+    waitBeforeScreenshot?: number | undefined;
+    stabilizeBeforeScreenshot?: boolean | undefined;
+    stabilization?: {
+        status: "stable" | "fonts-not-ready" | "images-not-ready" | "unstable";
+        elapsedMs: number;
+        capMs: number;
+    } | undefined;
+    importPath?: string | undefined;
+    mask?: {
+        selector: string;
+    }[] | undefined;
+    viewport?: {
+        width: number;
+        height?: number | undefined;
+    } | undefined;
+    breakpoint?: number | undefined;
+    breakpointGroup?: string | undefined;
+    elementLocator?: string | undefined;
+    waitForSelector?: string | undefined;
+}, {
+    shotMode: "storybook";
+    id: string;
+    shotName: string;
+    url: string;
+    filePathBaseline: string;
+    filePathCurrent: string;
+    filePathDifference: string;
+    threshold: number;
+    browserConfig?: BrowserContextOptions | undefined;
+    waitBeforeScreenshot?: number | undefined;
+    stabilizeBeforeScreenshot?: boolean | undefined;
+    stabilization?: {
+        status: "stable" | "fonts-not-ready" | "images-not-ready" | "unstable";
+        elapsedMs: number;
+        capMs: number;
+    } | undefined;
+    importPath?: string | undefined;
+    mask?: {
+        selector: string;
+    }[] | undefined;
+    viewport?: {
+        width: number;
+        height?: number | undefined;
+    } | undefined;
+    breakpoint?: number | undefined;
+    breakpointGroup?: string | undefined;
+    elementLocator?: string | undefined;
+    waitForSelector?: string | undefined;
+}>;

package/dist/schemas.js

@@ -0,0 +1,73 @@
+import * as z from 'zod';
+export const BrowserSchema = z.enum(['chromium', 'firefox', 'webkit']);
+export const ShotModeSchema = z.enum(['storybook']);
+/**
+ * Describes how the pre-screenshot stability wait concluded for a shot.
+ *
+ * - `stable`: the page settled within the cap (or `stabilizeBeforeScreenshot`
+ *   was disabled and we slept the full duration).
+ * - `fonts-not-ready`: the cap was hit waiting for `document.fonts.ready`.
+ * - `images-not-ready`: the cap was hit waiting for pending `<img>` elements
+ *   to load or error.
+ * - `unstable`: fonts and images were ready but the DOM kept mutating past
+ *   the cap.
+ */
+export const StabilizationStatusSchema = z.enum([
+    'stable',
+    'fonts-not-ready',
+    'images-not-ready',
+    'unstable',
+]);
+export const StabilizationResultSchema = z.object({
+    status: StabilizationStatusSchema,
+    /** Wall-clock spent in the stability wait, in milliseconds. */
+    elapsedMs: z.number(),
+    /** The cap (in milliseconds) applied to the wait. */
+    capMs: z.number(),
+});
+export const MaskSchema = z.object({
+    /**
+     * CSS selector for the element to mask
+     * Examples:
+     * - `#my-id`: Selects the element with the id `my-id`
+     * - `.my-class`: Selects all elements with the class `my-class`
+     * - `div`: Selects all `div` elements
+     * - `div.my-class`: Selects all `div` elements with the class `my-class`
+     * - `li:nth-child(2n)`: Selects all even `li` elements
+     * - `[data-testid="hero-banner"]`: Selects all elements with the attribute `data-testid` set to `hero-banner`
+     * - `div > p`: Selects all `p` elements that are direct children of a `div` element
+     */
+    selector: z.string(),
+});
+export const ShotItemSchema = z.object({
+    shotMode: ShotModeSchema,
+    id: z.string(),
+    shotName: z.string(),
+    url: z.string(),
+    filePathBaseline: z.string(),
+    filePathCurrent: z.string(),
+    filePathDifference: z.string(),
+    browserConfig: z.custom().optional(),
+    threshold: z.number(),
+    waitBeforeScreenshot: z.number().optional(),
+    stabilizeBeforeScreenshot: z.boolean().optional(),
+    /**
+     * Result of the pre-screenshot stability wait. Populated by
+     * `takeScreenShot` after the wait completes; not present on items that
+     * have not yet been captured or for shots that opted out via
+     * `stabilizeBeforeScreenshot: false`.
+     */
+    stabilization: StabilizationResultSchema.optional(),
+    importPath: z.string().optional(),
+    mask: z.array(MaskSchema).optional(),
+    viewport: z
+        .object({
+        width: z.number(),
+        height: z.number().optional(),
+    })
+        .optional(),
+    breakpoint: z.number().optional(),
+    breakpointGroup: z.string().optional(),
+    elementLocator: z.string().optional(),
+    waitForSelector: z.string().optional(),
+});

package/dist/shard.d.ts

@@ -0,0 +1,3 @@
+import type { ShotItem } from './types.js';
+import type { ShardConfig } from './utils.js';
+export declare const shardShotItems: (shotItems: ShotItem[], shard: ShardConfig) => ShotItem[];

package/dist/shard.js

@@ -0,0 +1,17 @@
+import { createHash } from 'node:crypto';
+export const shardShotItems = (shotItems, shard) => {
+    const hashed = shotItems.map((item) => ({
+        item,
+        hash: createHash('sha256').update(item.shotName).digest('hex'),
+    }));
+    hashed.sort((a, b) => a.hash.localeCompare(b.hash));
+    const total = hashed.length;
+    const baseSize = Math.floor(total / shard.total);
+    const remainder = total % shard.total;
+    // First `remainder` shards get baseSize+1 items, rest get baseSize
+    const shardStart = shard.current <= remainder
+        ? (shard.current - 1) * (baseSize + 1)
+        : remainder * (baseSize + 1) + (shard.current - 1 - remainder) * baseSize;
+    const shardSize = shard.current <= remainder ? baseSize + 1 : baseSize;
+    return hashed.slice(shardStart, shardStart + shardSize).map((h) => h.item);
+};

package/dist/shots/shots.d.ts

@@ -0,0 +1,3 @@
+import type { BrowserType } from 'playwright-core';
+import type { ShotItem } from '../types.js';
+export declare const takeScreenShots: (shotItems: ShotItem[], _browser?: BrowserType) => Promise<void>;

package/dist/shots/shots.js

@@ -0,0 +1,196 @@
+import path from 'node:path';
+import { mapLimit } from '../concurrency.js';
+import { config } from '../config.js';
+import { log } from '../log.js';
+import { hashFile, launchBrowser, sleep } from '../utils.js';
+import { resizeViewportToFullscreen, waitForNetworkRequests, waitForStability, } from './utils.js';
+const takeScreenShot = async ({ browser, shotItem, logger, }) => {
+    const context = await browser.newContext(shotItem.browserConfig);
+    await context.addInitScript(() => {
+        window.__IS_PIXEL__ = true;
+    });
+    const page = await context.newPage();
+    let success = false;
+    page.on('pageerror', (exception) => {
+        logger.browser('error', 'general', 'Uncaught exception:', exception);
+    });
+    page.on('console', async (message) => {
+        const values = [];
+        try {
+            for (const arg of message.args()) {
+                // eslint-disable-next-line no-await-in-loop
+                values.push(await arg.jsonValue());
+            }
+        }
+        catch (error) {
+            logger.browser('error', 'console', 'Error while collecting console output', error);
+        }
+        logger.browser('info', 'console', String(values.shift()), ...values);
+    });
+    try {
+        await page.goto(shotItem.url);
+    }
+    catch (error) {
+        if (error instanceof Error && error.name === 'TimeoutError') {
+            logger.process('error', 'timeout', `Timeout while loading page: ${shotItem.url}`);
+        }
+        else {
+            logger.process('error', 'general', 'Page loading failed', error);
+        }
+    }
+    try {
+        await page.waitForLoadState('load', {
+            timeout: config.timeouts.loadState,
+        });
+    }
+    catch (error) {
+        logger.process('error', 'timeout', `Timeout while waiting for page load state: ${shotItem.url}`, error);
+    }
+    if (shotItem.waitForSelector) {
+        try {
+            await page.waitForSelector(shotItem.waitForSelector, {
+                state: 'attached',
+                timeout: config.timeouts.loadState,
+            });
+        }
+        catch (error) {
+            logger.process('error', 'timeout', `Timeout while waiting for Selector ('${shotItem.waitForSelector}') to appear: ${shotItem.url}`, error);
+        }
+    }
+    try {
+        await waitForNetworkRequests({
+            page,
+            logger,
+            ignoreUrls: ['/__webpack_hmr'],
+        });
+    }
+    catch (error) {
+        logger.process('error', 'timeout', `Timeout while waiting for all network requests: ${shotItem.url}`, error);
+    }
+    if (config.beforeScreenshot) {
+        await config.beforeScreenshot(page, {
+            shotMode: shotItem.shotMode,
+            id: shotItem.id,
+            shotName: shotItem.shotName,
+        });
+    }
+    let fullScreenMode = true;
+    const waitCapMs = shotItem.waitBeforeScreenshot ?? config.waitBeforeScreenshot;
+    const stabilize = shotItem.stabilizeBeforeScreenshot ?? config.stabilizeBeforeScreenshot;
+    if (stabilize) {
+        const result = await waitForStability(page, { maxMs: waitCapMs });
+        shotItem.stabilization = result;
+        const rounded = Math.round(result.elapsedMs);
+        if (result.status === 'stable') {
+            logger.process('info', 'general', `Stabilized '${shotItem.shotName}' in ${rounded}ms (status: stable)`);
+        }
+        else {
+            logger.process('info', 'general', `Stability of '${shotItem.shotName}' hit cap of ${waitCapMs}ms in ${rounded}ms (status: ${result.status})`);
+        }
+    }
+    else {
+        shotItem.stabilization = {
+            status: 'stable',
+            elapsedMs: waitCapMs,
+            capMs: waitCapMs,
+        };
+        await sleep(waitCapMs);
+    }
+    try {
+        if (shotItem.viewport) {
+            const currentViewport = page.viewportSize();
+            await page.setViewportSize({
+                width: shotItem.viewport.width,
+                height: currentViewport?.height ?? 500,
+            });
+            fullScreenMode = true;
+        }
+        else {
+            await resizeViewportToFullscreen({ page });
+            fullScreenMode = false;
+        }
+    }
+    catch (error) {
+        logger.process('error', 'general', `Could not resize viewport to fullscreen: ${shotItem.shotName}`, error);
+    }
+    let retryCount = 0;
+    let lastShotHash;
+    try {
+        while (retryCount <= config.flakynessRetries) {
+            const { elementLocator } = shotItem;
+            let screenshotOptions = {
+                path: shotItem.filePathCurrent,
+                animations: 'disabled',
+                mask: shotItem.mask
+                    ? shotItem.mask.map((mask) => page.locator(mask.selector))
+                    : [],
+            };
+            // add fullPage option if no elementLocator is set
+            if (elementLocator) {
+                // eslint-disable-next-line no-await-in-loop
+                await page.locator(elementLocator).screenshot(screenshotOptions);
+            }
+            else {
+                screenshotOptions = { ...screenshotOptions, fullPage: fullScreenMode };
+                // eslint-disable-next-line no-await-in-loop
+                await page.screenshot(screenshotOptions);
+            }
+            const currentShotHash = hashFile(shotItem.filePathCurrent);
+            if (lastShotHash) {
+                logger.process('info', 'general', `Screenshot of '${shotItem.shotName}' taken (Retry ${retryCount}). Hash: ${currentShotHash} - Previous hash: ${lastShotHash}`);
+                if (lastShotHash === currentShotHash) {
+                    break;
+                }
+            }
+            lastShotHash = currentShotHash;
+            if (retryCount < config.flakynessRetries) {
+                // eslint-disable-next-line no-await-in-loop
+                await sleep(config.waitBetweenFlakynessRetries);
+            }
+            retryCount++;
+        }
+        success = true;
+    }
+    catch (error) {
+        logger.process('error', 'general', 'Error when taking screenshot', error);
+    }
+    if (config.afterScreenshot) {
+        await config.afterScreenshot(page, shotItem);
+    }
+    await context.close();
+    const videoPath = await page.video()?.path();
+    if (videoPath) {
+        const dirname = path.dirname(videoPath);
+        const ext = videoPath.split('.').pop() ?? 'webm';
+        const newVideoPath = `${dirname}/${shotItem.shotName}.${ext}`;
+        await page.video()?.saveAs(newVideoPath);
+        await page.video()?.delete();
+        logger.process('info', 'general', `Video of '${shotItem.shotName}' recorded and saved to '${newVideoPath}`);
+    }
+    return success;
+};
+export const takeScreenShots = async (shotItems, _browser) => {
+    const browser = await launchBrowser(_browser);
+    const total = shotItems.length;
+    log.process('info', 'general', `Taking ${total} screenshot(s) with shotConcurrency=${config.shotConcurrency}`);
+    await mapLimit([...shotItems.entries()], config.shotConcurrency, async ([index, shotItem]) => {
+        const logger = log.item({
+            shotMode: shotItem.shotMode,
+            uniqueItemId: shotItem.shotName,
+            itemIndex: index,
+            totalItems: total,
+        });
+        logger.process('info', 'general', `Taking screenshot of '${shotItem.shotName} ${shotItem.breakpoint ? `[${shotItem.breakpoint}]` : ''}'`);
+        const startTime = Date.now();
+        const result = await takeScreenShot({ browser, shotItem, logger });
+        const endTime = Date.now();
+        const elapsedTime = Number((endTime - startTime) / 1000).toFixed(3);
+        if (result) {
+            logger.process('info', 'general', `Screenshot of '${shotItem.shotName}' taken and saved to '${shotItem.filePathCurrent}' in ${elapsedTime}s`);
+        }
+        else {
+            logger.process('info', 'general', `Screenshot of '${shotItem.shotName}' failed and took ${elapsedTime}s`);
+        }
+    });
+    await browser.close();
+};