Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use checkScreenshotFileCropped method in Testcafe

Best JavaScript code snippet using testcafe

assertion-helper.js

Source:assertion-helper.js

1const expect          = require('chai').expect;2const globby          = require('globby');3const path            = require('path');4const fs              = require('fs');5const Promise         = require('pinkie');6const { isFunction }  = require('lodash');7const del             = require('del');8const config          = require('./config.js');9const { readPngFile } = require('../../lib/utils/promisified-functions');10const SCREENSHOTS_PATH               = config.testScreenshotsDir;11const THUMBNAILS_DIR_NAME            = 'thumbnails';12const ERRORS_DIR_NAME                = 'errors';13const TASK_DIR_RE                    = /\d{4,4}-\d{2,2}-\d{2,2}_\d{2,2}-\d{2,2}-\d{2,2}/;14const SCREENSHOT_FILE_NAME_RE        = /[\\/]\d+.png$/;15const CUSTOM_SCREENSHOT_FILE_NAME_RE = /\.png$/;16const TEST_DIR_NAME_RE               = /test-\d+/;17const RUN_DIR_NAME_RE                = /run-\d+/;18const GREEN_PIXEL                    = [0, 255, 0, 255];19const RED_PIXEL                      = [255, 0, 0, 255];20const VIDEOS_PATH      = config.testVideosDir;21const VIDEO_FILES_GLOB = path.join(VIDEOS_PATH, '**', '*');22function hasPixel (png, pixel, x, y) {23    const baseIndex = (png.width * y + x) * 4;24    return png.data[baseIndex] === pixel[0] &&25           png.data[baseIndex + 1] === pixel[1] &&26           png.data[baseIndex + 2] === pixel[2] &&27           png.data[baseIndex + 3] === pixel[3];28}29function getScreenshotFilesCount (dir, customPath) {30    const list             = fs.readdirSync(dir);31    const screenshotRegExp = customPath ? CUSTOM_SCREENSHOT_FILE_NAME_RE : SCREENSHOT_FILE_NAME_RE;32    let results  = 0;33    let stat     = null;34    let filePath = null;35    list.forEach(function (file) {36        filePath = path.join(dir, file);37        stat     = fs.statSync(filePath);38        if (stat && stat.isDirectory() && file === THUMBNAILS_DIR_NAME)39            results += getScreenshotFilesCount(filePath, customPath);40        else if (screenshotRegExp.test(filePath))41            results++;42    });43    return results;44}45function checkScreenshotFileCropped (filePath) {46    return readPngFile(filePath)47        .then(function (png) {48            const width  = png.width;49            const height = png.height;50            // NOTE: sometimes an appearing dialog can cover an edge of the browser. Try to check all edges51            return hasPixel(png, RED_PIXEL, 0, 0) && hasPixel(png, RED_PIXEL, 49, 49) && hasPixel(png, GREEN_PIXEL, 50, 50) ||52                   hasPixel(png, RED_PIXEL, width - 1, height - 1) && hasPixel(png, RED_PIXEL, width - 50, height - 50) && hasPixel(png, GREEN_PIXEL, width - 51, height - 51) ||53                   hasPixel(png, RED_PIXEL, width - 1, 0) && hasPixel(png, RED_PIXEL, width - 50, 49) && hasPixel(png, GREEN_PIXEL, width - 51, 50) ||54                   hasPixel(png, RED_PIXEL, 0, height - 1) && hasPixel(png, RED_PIXEL, 49, height - 50) && hasPixel(png, GREEN_PIXEL, 50, height - 51);55        });56}57function checkScreenshotFileIsNotWhite (filePath) {58    return readPngFile(filePath)59        .then(function (png) {60            return png.data.indexOf(Buffer.from(RED_PIXEL)) > -1 && png.data.indexOf(Buffer.from(GREEN_PIXEL)) > -1;61        });62}63function isDirExists (folderPath) {64    let exists = false;65    try {66        exists = fs.statSync(folderPath).isDirectory();67    }68    catch (e) {69        exists = false;70    }71    return exists;72}73function checkTestDir (testDirPath, forError, expectedSubDirCount, expectedScreenshotCount) {74    const subDirs = fs75        .readdirSync(testDirPath)76        .filter(function (file) {77            return isDirExists(path.join(testDirPath, file));78        });79    if (subDirs.length !== expectedSubDirCount)80        return false;81    let dirPath = null;82    return subDirs.every(function (dir) {83        dirPath = forError ? path.join(testDirPath, dir, ERRORS_DIR_NAME) : path.join(testDirPath, dir);84        return getScreenshotFilesCount(dirPath) === expectedScreenshotCount;85    });86}87function checkScreenshotImages (forError, customPath, predicate, expectedScreenshotsCount = config.browsers.length) {88    if (!isDirExists(SCREENSHOTS_PATH))89        return false;90    const taskDirs = fs.readdirSync(SCREENSHOTS_PATH);91    if (!taskDirs || !taskDirs[0] || taskDirs.length !== 1)92        return false;93    const taskDirPath = path.join(SCREENSHOTS_PATH, taskDirs[0]);94    let list = [];95    if (forError) {96        const testDirs = fs.readdirSync(taskDirPath);97        if (!testDirs || !testDirs[0] || testDirs.length !== 1)98            return false;99        const testDirPath = path.join(taskDirPath, testDirs[0]);100        const browserDirs = fs.readdirSync(testDirPath);101        browserDirs.forEach(function (browserDir) {102            const errorDirPath    = path.join(testDirPath, browserDir, 'errors');103            const screenshotFiles = fs.readdirSync(errorDirPath);104            const screenshotPaths = screenshotFiles.map(function (screenshotFile) {105                return path.join(errorDirPath, screenshotFile);106            });107            list = list.concat(screenshotPaths);108        });109    }110    else {111        if (taskDirPath.indexOf(customPath) < 0)112            return false;113        list = fs.readdirSync(taskDirPath).map(function (screenshotFile) {114            return path.join(taskDirPath, screenshotFile);115        });116    }117    if (list.length < config.browsers.length)118        return false;119    list = list.filter(function (filePath) {120        return filePath.match(CUSTOM_SCREENSHOT_FILE_NAME_RE);121    });122    return Promise123        .all(list.map(function (filePath) {124            return predicate(filePath);125        }))126        .then(function (checkResults) {127            let actualScreenshotsCount = 0;128            for (let i = 0; i < checkResults.length; i++)129                actualScreenshotsCount += checkResults[i] ? 1 : 0;130            return actualScreenshotsCount === expectedScreenshotsCount;131        });132}133exports.errorInEachBrowserContains = function errorInEachBrowserContains (testErrors, message, errorIndex) {134    if (testErrors instanceof Error)135        throw testErrors;136    // NOTE: if errors are the same in different browsers137    if (Array.isArray(testErrors))138        expect(testErrors[errorIndex]).contains(message);139    //NOTE: if they are different140    else {141        Object.keys(testErrors).forEach(function (key) {142            expect(testErrors[key][errorIndex]).contains(message);143        });144    }145};146exports.errorInEachBrowserContainsRegExp = function errorInEachBrowserContains (testErrors, messageRE, errorIndex) {147    if (testErrors instanceof Error)148        throw testErrors;149    // NOTE: if errors are the same in different browsers150    if (Array.isArray(testErrors))151        expect(messageRE.test(testErrors[errorIndex])).equals(true);152    //NOTE: if they are different153    else {154        Object.keys(testErrors).forEach(function (key) {155            expect(messageRE.test(testErrors[key][errorIndex])).equals(true);156        });157    }158};159exports.errorInEachBrowserNotContains = function errorInEachBrowserNotContains (testErrors, message, errorIndex) {160    if (testErrors instanceof Error)161        throw testErrors;162    // NOTE: if errors are the same in different browsers163    if (Array.isArray(testErrors))164        expect(testErrors[errorIndex]).not.contains(message);165    //NOTE: if the are different166    else {167        Object.keys(testErrors).forEach(function (key) {168            expect(testErrors[key][errorIndex]).not.contains(message);169        });170    }171};172exports.isScreenshotDirExists = function () {173    return isDirExists(SCREENSHOTS_PATH);174};175exports.checkScreenshotsCreated = function ({ forError, customPath, screenshotsCount, runDirCount, browsersCount }) {176    const expectedSubDirCount     = browsersCount || config.browsers.length;177    const expectedScreenshotCount = screenshotsCount || 2;178    if (!isDirExists(SCREENSHOTS_PATH))179        return false;180    const taskDirs = fs.readdirSync(SCREENSHOTS_PATH);181    if (!taskDirs || !taskDirs[0] || taskDirs.length !== 1)182        return false;183    const taskDirPath = path.join(SCREENSHOTS_PATH, taskDirs[0]);184    if (customPath) {185        const customDirExists = taskDirPath.includes(customPath);186        const hasScreenshots  = getScreenshotFilesCount(taskDirPath, customPath) ===187                              expectedScreenshotCount * expectedSubDirCount;188        return customDirExists && hasScreenshots;189    }190    if (!TASK_DIR_RE.test(taskDirs[0]))191        return false;192    const testDirs = fs.readdirSync(taskDirPath);193    if (!testDirs || !testDirs.length || testDirs.length !== 1)194        return false;195    let basePath  = null;196    let dirs      = null;197    let dirNameRE = null;198    let dirPath   = null;199    if (runDirCount) {200        basePath  = path.join(taskDirPath, testDirs[0]);201        dirs      = fs.readdirSync(basePath);202        dirNameRE = RUN_DIR_NAME_RE;203        if (!dirs || !dirs.length || dirs.length !== runDirCount)204            return false;205    }206    else {207        basePath  = taskDirPath;208        dirs      = testDirs;209        dirNameRE = TEST_DIR_NAME_RE;210    }211    return dirs.every(function (dir) {212        if (!dirNameRE.test(dir))213            return false;214        dirPath = path.join(basePath, dir);215        return checkTestDir(dirPath, forError, expectedSubDirCount, expectedScreenshotCount);216    });217};218exports.checkScreenshotsCropped = function (forError, customPath) {219    return checkScreenshotImages(forError, customPath, checkScreenshotFileCropped);220};221exports.checkScreenshotIsNotWhite = function (forError, customPath) {222    return checkScreenshotImages(forError, customPath, checkScreenshotFileIsNotWhite);223};224exports.isScreenshotsEqual = function (customPath, referenceImagePathGetter) {225    return checkScreenshotImages(false, customPath, function (screenshotFilePath) {226        const screenshotContent = fs.readFileSync(screenshotFilePath);227        const referenceImagePath = isFunction(referenceImagePathGetter)228            ? referenceImagePathGetter(screenshotFilePath)229            : referenceImagePathGetter;230        const referenceImageContent = fs.readFileSync(referenceImagePath);231        return screenshotContent.equals(referenceImageContent);232    });233};234exports.checkScreenshotsDimensions = function (dimensions, screenshotCount) {235    return checkScreenshotImages(false, '', function (screenshotFilePath) {236        return readPngFile(screenshotFilePath)237            .then(png => {238                return dimensions.width === png.width && dimensions.height === png.height;239            });240    }, screenshotCount);241};242function removeDir (dirPath) {243    if (isDirExists(dirPath))244        return del(dirPath);245    return Promise.resolve();246}247exports.removeScreenshotDir = () => removeDir(SCREENSHOTS_PATH);248exports.removeVideosDir = () => removeDir(VIDEOS_PATH);249exports.getVideoFilesList = () => {250    return globby(VIDEO_FILES_GLOB, { nodir: true });251};252exports.SCREENSHOTS_PATH = SCREENSHOTS_PATH;...

Using AI Code Generation

1import { Selector } from 'testcafe';2import { checkScreenshotFileCropped } from 'testcafe-screenshot-crop';3test('My first test', async t => {4        .typeText('#developer-name', 'John Smith')5        .click('#submit-button');6    const articleHeader = await Selector('.result-content').find('h1');7    await checkScreenshotFileCropped('test1', articleHeader, { crop: { x: 0, y: 0, width: 100, height: 100 } });8});9{10  "scripts": {11  },

Using AI Code Generation

1import testcafe from 'testcafe';2import { Selector } from 'testcafe';3import { checkScreenshotFileCropped } from './checkScreenshotFileCropped';4test('My first test', async t => {5        .typeText('#developer-name', 'John Smith')6        .click('#macos')7        .click('#submit-button');8    await checkScreenshotFileCropped('#main-form', 'main-form.png', 'main-form-cropped.png');9    const articleHeader = await Selector('.result-content').find('h1');10    let headerText = await articleHeader.innerText;11});12import { ClientFunction } from 'testcafe';13export async function checkScreenshotFileCropped(selector, imageFile, imageFileCropped) {14    const screenshotPath = './screenshots/';15    const screenshotPathCropped = './screenshots-cropped/';16    const getScreenshot = ClientFunction(() => document.querySelector(selector).getBoundingClientRect());17    const screenshot = await getScreenshot();18    await t.takeElementScreenshot(selector, imageFile, { path: screenshotPath });19    await t.takeElementScreenshot(selector, imageFileCropped, { path: screenshotPathCropped, crop: { left: screenshot.left, top: screenshot.top, right: screenshot.right, bottom: screenshot.bottom } });20}

Using AI Code Generation

1import { checkScreenshotFileCropped } from 'testcafe-browser-tools';2test('My Test', async t => {3        .takeScreenshot()4        .expect(checkScreenshotFileCropped('test.png', { crop: { left: 0, top: 0, width: 100, height: 100 }, tolerance: 0 })).ok();5});6import { checkScreenshotFileCropped } from 'testcafe-browser-tools';7test('My Test', async t => {8        .takeScreenshot()9        .expect(checkScreenshotFileCropped('test.png', { crop: { left: 0, top: 0, width: 100, height: 100 }, tolerance: 0 })).ok();10});11import { checkScreenshotFileCropped } from 'testcafe-browser-tools';12test('My Test', async t => {13        .takeScreenshot()14        .expect(checkScreenshotFileCropped('test.png', { crop: { left: 0, top: 0, width: 100, height: 100 }, tolerance: 0 })).ok();15});16import { checkScreenshotFileCropped } from 'testcafe-browser-tools';17test('My Test', async t => {18        .takeScreenshot()19        .expect(checkScreenshotFileCropped('test.png', { crop: { left: 0, top: 0, width: 100, height: 100 }, tolerance: 0 })).ok();20});21import { checkScreenshotFileCropped } from 'testcafe-browser-tools';22test('My Test', async t

Using AI Code Generation

1import { checkScreenshotFileCropped } from 'testcafe-screenshot-crop';2test('My test', async t => {3        .takeScreenshot('screenshot.png')4        .expect(checkScreenshotFileCropped('screenshot.png', 'screenshot_expected.png', 0.01)).ok();5});6import { checkScreenshotFileCropped } from 'testcafe-screenshot-crop';7test('My test', async t => {8        .takeScreenshot('screenshot.png')9        .expect(checkScreenshotFileCropped('screenshot.png', 'screenshot_expected.png', 0.01)).ok();10});11import { checkScreenshotFileCropped } from 'testcafe-screenshot-crop';12test('My test', async t => {13        .takeScreenshot('screenshot.png')14        .expect(checkScreenshotFileCropped('screenshot.png', 'screenshot_expected.png', 0.01)).ok();15});16import { checkScreenshotFileCropped } from 'testcafe-screenshot-crop';17test('My

Using AI Code Generation

1import { Selector, t } from 'testcafe';2import { checkScreenshotFileCropped } from 'testcafe-check-screenshot';3import { ClientFunction } from 'testcafe';4test('Test screenshot', async t => {5        .wait(3000);6    const title = Selector('h1');7    const title2 = Selector('h2');8    await checkScreenshotFileCropped(t, 'test1.png', title, { crop: { left: 0, top: 0, width: 200, height: 50 } });9    await checkScreenshotFileCropped(t, 'test2.png', title2, { crop: { left: 0, top: 0, width: 200, height: 50 } });10});11import { Selector, t } from 'testcafe';12import { checkScreenshotFileCropped } from 'testcafe-check-screenshot';13import { ClientFunction } from 'testcafe';14test('Test screenshot', async t => {15        .wait(3000);16    const title = Selector('h1');17    const title2 = Selector('h2');18    await checkScreenshotFileCropped(t, 'test1.png', title, { crop: { left: 0, top: 0, width: 200, height: 50 } });19    await checkScreenshotFileCropped(t, 'test2.png', title2, { crop: { left: 0, top: 0, width: 200, height: 50 } });20});21import { Selector, t } from 'testcafe';22import { checkScreenshotFileCropped } from 'testcafe-check-screenshot';23import { ClientFunction } from 'testcafe';24test('Test screenshot', async t => {

Using AI Code Generation

1import {checkScreenshotFileCropped} from './checkScreenshotFileCropped';2test('TestCafe', async t => {3        .click('#gbqfbb')4        .resizeWindow(1200, 800)5        .expect(checkScreenshotFileCropped('./screenshot.png', 0, 0, 0, 0)).ok();6});7I am trying to get the value of an input field after I have changed it using the .typeText() method. I am using the .getValue() method to get the value of the input field. However, it is always returning the initial value of the input field. I am using the following code:8import { Selector } from 'testcafe';9test('TestCafe', async t => {10        .typeText('#lst-ib', 'Hello')11        .expect(Selector('#lst-ib').value).eql('Hello');12});

Using AI Code Generation

1import { Selector } from 'testcafe';2fixture('Test screenshot')3test('Test screenshot', async t => {4        .resizeWindow(1024, 768)5        .setNativeDialogHandler(() => true)6        .click(Selector('button').withText('Click Me'))7        .expect(Selector('h1').withText('Hello World!').exists).ok()8        .checkScreenshotFileCropped('screenshot.png', {crop: {x: 0, y: 0, width: 100, height: 100}});9});10import { Selector } from 'testcafe';11fixture('Test screenshot')12test('Test screenshot', async t => {13        .resizeWindow(1024, 768)14        .setNativeDialogHandler(() => true)15        .click(Selector('button').withText('Click Me'))16        .expect(Selector('h1').withText('Hello World!').exists).ok()17        .checkScreenshotFileCropped('screenshot.png', {crop: {x: 0, y: 0, width: 100, height: 100}});18});19import { Selector } from 'testcafe';20fixture('Test screenshot')21test('Test screenshot', async t => {22        .resizeWindow(1024, 768)23        .setNativeDialogHandler(() => true)24        .click(Selector('button').withText('Click Me'))25        .expect(Selector('h1').withText('Hello World!').exists).ok()26        .checkScreenshotFileCropped('screenshot.png', {crop: {x: 0, y: 0, width: 100, height: 100}});27});28import { Selector } from 'testcafe';29fixture('Test screenshot')

Using AI Code Generation

1import { Selector } from 'testcafe';2import { checkScreenshotFileCropped } from '../utils/checkScreenshotFileCropped';3test('Check screenshot', async t => {4        .typeText(Selector('input[name=q]'), 'testcafe')5        .click(Selector('input[name=btnK]'));6    await checkScreenshotFileCropped(t, 'testcafe.png');7});8import { t } from 'testcafe';9import { compareImages } from 'resemblejs';10import { join } from 'path';11import { readFileSync } from 'fs';12export const checkScreenshotFileCropped = async (t, screenshotFile, options = {}) => {13    const screenshotPath = join(__dirname, '..', 'screenshots', screenshotFile);14    const screenshot = readFileSync(screenshotPath);15    const actual = await t.takeElementScreenshot(Selector('input[name=btnK]'));16    const diff = await compareImages(actual, screenshot, options);17    await t.expect(diff.rawMisMatchPercentage).lte(0);18};

Using AI Code Generation

1import { Selector } from 'testcafe';2import { ClientFunction } from 'testcafe';3import { checkScreenshotFileCropped } from 'testcafe-screenshot-comparer';4const getDocumentDimensions = ClientFunction(() => {5    return {6        width: Math.max(7        height: Math.max(8    };9});10test('Check screenshot of a cropped area of the page', async t => {11    const documentDimensions = await getDocumentDimensions();12    await checkScreenshotFileCropped(t, 'test1', {x: 0, y: 0, width: 400, height: 400}, {x: 0, y: 0, width: 400, height: 400});13});

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.