@currys-co-uk/codeceptjs-resemblehelper/index.d.ts

Forked Resemble JS helper for CodeceptJS, with Support for Playwright, Webdriver, TestCafe, Puppeteer & Appium

/// <reference types="codeceptjs" />
declare const Helper: any;
import resemble from 'resemblejs';
declare type Options = {
    ignoredBox?: BoxCoordinates;
    ignoredBoxes?: BoxCoordinates[];
    ignoredElement?: Selector;
    ignoredElements?: Selector[];
    ignoredQueryElementAll?: Selector;
    prepareBaseImage?: boolean;
    tolerance?: number;
    skipFailure?: boolean;
    boundingBox?: BoxCoordinates;
    outputSettings?: GenericObject;
} & resemble.ResembleSingleCallbackComparisonOptions;
declare type Selector = string | {
    shadow: string | string[];
} | {
    css: string;
} | CodeceptJS.LocatorOrString;
declare type GenericObject = {
    [key: string]: any;
};
declare type BoxCoordinates = {
    left: number;
    top: number;
    right: number;
    bottom: number;
};
declare type CodeceptJSConfig = {
    baseFolder: string;
    diffFolder: string;
    screenshotFolder: string;
    prepareBaseImage?: boolean;
    tolerance?: number;
    skipFailure?: boolean;
    createDiffInToleranceRange?: boolean;
    alwaysSaveDiff?: boolean;
    createSubFoldersInBaseFolder?: boolean;
    updateMismatchedBaseImage?: boolean;
    ignoreNothing?: boolean;
    scaleToSameSize?: boolean;
};
/**
 * Resemble.js helper class for CodeceptJS, this allows screen comparison
 *
 */
declare class ResembleHelper extends Helper {
    constructor(config: CodeceptJSConfig);
    protected _before(): Promise<void>;
    private _resolvePath;
    /**
     * Compare Images
     *
     * @param image
     * @param diffImage
     * @param options
     * @returns {Promise<resolve | reject>}
     */
    private _compareImages;
    /**
     * Get actual date and time in format MMMM-MM-MMTHH:MM:SS
     * @returns string
     */
    private _getTimestamp;
    /**
     *
     * @param image
     * @param options
     * @returns {Promise<*>}
     */
    private _fetchMisMatchPercentage;
    /**
     * Take screenshot of individual element.
     * @param selector selector of the element to be screenshotted
     * @param name name of the image
     * @returns {Promise<void>}
     */
    screenshotElement(selector: Selector, name: string): Promise<void>;
    /**
     * This method attaches image attachments of the base, screenshot and diff to the allure reporter when the mismatch exceeds tolerance.
     * @param baseImage
     * @param misMatch
     * @param tolerance
     * @returns {Promise<void>}
     */
    private _addAttachment;
    /**
     * This method attaches context, and images to Mochawesome reporter when the mismatch exceeds tolerance.
     * @param baseImage
     * @param misMatch
     * @param tolerance
     * @returns {Promise<void>}
     */
    private _addMochaContext;
    /**
     * This method uploads the diff and screenshot images into the bucket with diff image under bucketName/diff/diffImage and the screenshot image as
     * bucketName/output/ssImage
     * @param accessKeyId
     * @param secretAccessKey
     * @param region
     * @param bucketName
     * @param baseImage
     * @param ifBaseImage - tells if the prepareBaseImage is true or false. If false, then it won't upload the baseImage. However, this parameter is not considered if the config file has a prepareBaseImage set to true.
     * @returns {Promise<void>}
     */
    private _upload;
    /**
     * This method downloads base images from specified bucket into the base folder as mentioned in config file.
     * @param accessKeyId
     * @param secretAccessKey
     * @param region
     * @param bucketName
     * @param baseImage
     * @returns {Promise<void>}
     */
    private _download;
    /**
     * Check Visual Difference for Base and Screenshot Image
     * @param baseImage         Name of the Base Image (Base Image path is taken from Configuration)
     * @param options           Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
     * @returns {Promise<void>}
     */
    seeVisualDiff(baseImage: string, options?: Options): Promise<void>;
    /**
     * See Visual Diff for an Element on a Page
     *
     * @param selector   Selector which has to be compared expects these -> CSS|XPath|ID
     * @param baseImage  Base Image for comparison
     * @param options    Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
     * @returns {Promise<void>}
     */
    seeVisualDiffForElement(selector: Selector, baseImage: string, options?: Options): Promise<void>;
    private _assertVisualDiff;
    /**
     * Function to prepare Base Images from Screenshots
     *
     * @param screenShotImage  Name of the screenshot Image (Screenshot Image Path is taken from Configuration)
     * @param options Options ex {prepareBaseImage: true, tolerance: 5} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
     */
    private _prepareBaseImage;
    /**
     * Function for create base image
     * @param baseImage
     * @param baseFolder
     * @param screenshotImageFromScreenshotFolder
     * @param screenshotImageToBaseFolder
     * @returns void
     * @private
     */
    private _createBaseImage;
    /**
     * Function to create Directory
     * @param directory
     * @returns {Promise<void>}
     * @private
     */
    private _createDir;
    /**
     * Function for delete screenshot image
     * @example
     * I.deleteScreenshot('./folder/image.png')
     * @param pathToFile string
     * @returns {Promise<void>}
     */
    deleteScreenshot(pathToFile: string): Promise<void>;
    /**
     * Function to fetch Bounding box for an element, fetched using selector
     *
     * @param selector CSS|XPath|ID selector
     * @returns {Promise<{boundingBox: {left: *, top: *, right: *, bottom: *}}>}
     */
    private _getBoundingBox;
    /**
     * Function for get element coordinates, which should be later excluded from diff comparison
     *
     * @param selector CSS|XPath|ID selector
     * @returns {Promise<{ignoredBox: {left: *, top: *, right: *, bottom: *}}>}
     */
    private _getElementCoordinates;
    /**
     * Function for recount elements coordinates to ignoredBoxes in screenshotted element screenshot
     *
     * @selector selector CSS|XPath|ID selector
     * @param ignoredElementsCoordinates Options ex {ignoredElements: ['#name', '#email']} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
     * @returns {Promise<{ignoredBoxes: [{left: *, top: *, right: *, bottom: *}]>}
     */
    private _reCountElementCoordinatesForIgnoreInScreenshotElement;
    /**
     * Function for translate elements coordinates to ignoredBoxes
     *
     * @param options Options ex {ignoredElements: ['#name', '#email']} along with Resemble JS Options, read more here: https://github.com/rsmbl/Resemble.js
     * @returns {Promise<{ignoredBoxes: [{left: *, top: *, right: *, bottom: *}]>}
     */
    private _getIgnoredBoxesFromElements;
    /**
     * Function for count selector coordinates
     *
     * @param el counted element
     * @param selector represents counted element in human language
     * @returns {Promise<{ignoredBoxes: [{left: *, top: *, right: *, bottom: *},{...}]>}
     */
    private _countCoordinates;
    /**
     * Function equivalent for querySelectorAll
     *
     * @param selector CSS|XPath|ID selector
     * @returns {Promise<{ignoredBoxes: [{left: *, top: *, right: *, bottom: *}]>}
     */
    private _locateAll;
    private _getHelper;
}
export = ResembleHelper;