KaneAI - World’s First E2E Software Testing Agent.Book a Demo 
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.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run Testcafe automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
