KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

How to use cropScreenshot method in Testcafe

Best JavaScript code snippet using testcafe

altairDriveViewerPage.js

Source:altairDriveViewerPage.js

...108            })109            .click('@top')110        let filename = file + '_top';111        current.pauseInSecs(2)112        viewerSection.cropScreenshot('@canvas', filename, folderName);113        current.pauseInSecs(2);114        return current;115    },116    isometricViewTriadControl : function(browser, file, dataTimeStamp) {117        let current = this;118        let viewerSection = current.section.viewerSection;119        let triadToolbar = current.section.viewerSection.section.triadToolbar;120        let inputModelName = file.split(".");121        //let folderName = inputModelName[0] + "/" + "triadControls" + "/";122        let folderName = "Viewer/triadToolbar" + dataTimeStamp + "/";123        //browser.frame(0);124        current.pause(2000)125        triadToolbar126            .waitForElementPresent('@isometricView', 15000)127            .verify.elementPresent('@isometricView')128            .verify.visible('@isometricView')129            .click('@isometricView')130        let filename = inputModelName[0] + '_IsometricView';131        current.pauseInSecs(1)132        //viewerSection.cropScreenshot('@canvas', filename, folderName);133        current.captureImage(browser, filename, folderName);134        current.pauseInSecs(2);135        browser.frame(null);136        return current;137    },138    savePreviewImage : function(browser, file) {139        let current = this;140        let viewerSection = current.section.viewerSection;141        let triadToolbar = current.section.viewerSection.section.triadToolbar;142        //browser.frame(0);143        triadToolbar144            .verify.elementPresent('@previewImage')145            .verify.visible('@previewImage')146            .click('@previewImage')147        current.pauseInSecs(1)148        current.pauseInSecs(2);149        browser.frame(null);150        return current;151    },152    switchOrthographicProjectionTriadControl : function(browser, file, dataTimeStamp) {153        let current = this;154        let viewerSection = current.section.viewerSection;155        let triadToolbar = current.section.viewerSection.section.triadToolbar;156        let inputModelName = file.split(".");157        //let folderName = inputModelName[0] + "/" + "triadControls" + "/";158        let folderName = "Viewer/triadToolbar" + dataTimeStamp + "/";159        //browser.frame(0);160        triadToolbar161            .verify.elementPresent('@OrthographicProjection')162            .verify.visible('@OrthographicProjection')163            .click('@OrthographicProjection')164        let filename = inputModelName[0] + '_OrthographicProjection';165        current.pauseInSecs(1)166        //viewerSection.cropScreenshot('@canvas', filename, folderName);167        current.captureImage(browser, filename, folderName);168        current.pauseInSecs(2);169        browser.frame(null);170        return current;171    },172    switchPerspectiveProjectionTriadControl : function(browser, file, dataTimeStamp) {173        let current = this;174        let viewerSection = current.section.viewerSection;175        let triadToolbar = current.section.viewerSection.section.triadToolbar;176        let inputModelName = file.split(".");177        //let folderName = inputModelName[0] + "/" + "triadControls" + "/";178        let folderName = "Viewer/triadToolbar" + dataTimeStamp + "/";179        //browser.frame(0);180        triadToolbar181            .verify.elementPresent('@PerspectiveProjection')182            .verify.visible('@PerspectiveProjection')183            .click('@PerspectiveProjection')184        let filename = inputModelName[0] + '_PerspectiveProjection';185        current.pauseInSecs(1)186        //viewerSection.cropScreenshot('@canvas', filename, folderName);187        current.captureImage(browser, filename, folderName);188        current.pauseInSecs(2);189        browser.frame(null);190        return current;191    },192    rotateToClosestPrincipalAxisTriadControl : function(browser, file, dataTimeStamp) {193        let current = this;194        let viewerSection = current.section.viewerSection;195        let triadToolbar = current.section.viewerSection.section.triadToolbar;196        let inputModelName = file.split(".");197        //let folderName = inputModelName[0] + "/" + "triadControls" + "/";198        let folderName = "Viewer/triadToolbar" + dataTimeStamp + "/";199        //browser.frame(0);200        triadToolbar201            .verify.elementPresent('@PrincipalAxis')202            .verify.visible('@PrincipalAxis')203            .click('@PrincipalAxis')204        let filename = inputModelName[0] + '_RotatePrincipalAxis';205        current.pauseInSecs(1)206        //viewerSection.cropScreenshot('@canvas', filename, folderName);207        current.captureImage(browser, filename, folderName);208        current.pauseInSecs(2);209        browser.frame(null);210        return current;211    },212    fitSelectedTriadControl : function(browser, file) {213        let current = this;214        let viewerSection = current.section.viewerSection;215        let triadToolbar = current.section.viewerSection.section.triadToolbar;216        let inputModelName = file.split(".");217        //let folderName = inputModelName[0] + "/" + "triadControls" + "/";218        let folderName = "Viewer/triadToolbar" + "/" + inputModelName[0] + "/";219       //browser.frame(0);220        triadToolbar221            .verify.elementPresent('@fitSelected')222            .verify.visible('@fitSelected')223            .click('@fitSelected')224        let filename = inputModelName[0] + '_FitSelected';225        current.pauseInSecs(1)226        //viewerSection.cropScreenshot('@canvas', filename, folderName);227        current.captureImage(browser, filename, folderName);228        current.pauseInSecs(2);229        browser.frame(null);230        return current;231    },232    explodeViewTriadControl : function(browser, file) {233        let current = this;234        let viewerSection = current.section.viewerSection;235        let triadToolbar = current.section.viewerSection.section.triadToolbar;236        let inputModelName = file.split(".");237        //let folderName = inputModelName[0] + "/" + "triadControls" + "/";238        let folderName = "Viewer/triadToolbar" + "/" + inputModelName[0] + "/";239        //browser.frame(0);240        triadToolbar241            .verify.elementPresent('@explodeView')242            .verify.visible('@explodeView')243            .click('@explodeView')244        let filename = inputModelName[0] + '_explodeView';245        current.pauseInSecs(1)246        //viewerSection.cropScreenshot('@canvas', filename, folderName);247        current.captureImage(browser, filename, folderName);248        current.pauseInSecs(2);249        browser.frame(null);250        return current;251    },252    showModelBrowser : function(browser, file, dataTimeStamp) {253        let current = this;254        let viewerSection = current.section.viewerSection;255        let triadToolbar = current.section.viewerSection.section.triadToolbar;256        let treeView = current.section.viewerSection.section.treeView;257        let inputModelName = file.split(".");258        //let folderName = inputModelName[0] + "/" + "triadControls" + "/";259        let folderName = "Viewer/triadToolbar" + dataTimeStamp + "/";260        //browser.frame(0);261        triadToolbar262            .verify.elementPresent('@modelBrowser')263            .verify.visible('@modelBrowser')264            .click('@modelBrowser')265        let filename = inputModelName[0] + 'modelBrowser';266        current.pauseInSecs(1)267        //viewerSection.cropScreenshot('@canvas', filename, folderName);268        current.captureImage(browser, filename, folderName);269        current.pauseInSecs(5);270        treeView271            .verify.elementPresent('@treeViewModelChecks')272            .verify.visible('@treeViewModelChecks')273        browser.useXpath()274            .elements('xpath', treeView.elements.treeViewModelChecks.selector, function (result) {275                if (result.value.length == 0)276                    return current;277                for (var i = 1; i <= result.value.length; i++) {278                    var modelCheck = treeView.elements.treeViewModelChecks.selector + "[" + i + "]/span[2]";279                    var subParts = treeView.elements.treeViewModelChecks.selector + "[" + i + "]/ul/li"280                    current281                        .verify.elementPresent(modelCheck)282                        .verify.visible(modelCheck)283                        .verify.elementPresent(subParts)284                        .verify.visible(subParts)285                        .click(modelCheck);286                    let filename1 = inputModelName[0] + 'treeViewAllUnChecked';287                    //viewerSection.cropScreenshot('@canvas', filename1, folderName)288                    current.captureImage(browser, filename1, folderName);289                    browser.useXpath()290                        .elements('xpath', subParts, function (subResult) {291                            if (subResult.value.length == 0)292                                return current;293                            for (var j = 1; j <= subResult.value.length; j++) {294                                var subChecks = subParts + "[" + j + "]/span[2]"295                                browser.useXpath();296                                current297                                    .verify.elementPresent(subChecks)298                                    .verify.visible(subChecks);299                               current.click(subChecks);300                                let filename2 = inputModelName[0] + "_treeViewPartCheck_" + j;;301                               // browser.useXpath();302                                //viewerSection.cropScreenshot('@canvas', filename2, folderName)303                                current.captureImage(browser, filename2, folderName);304                            }305                        });306                }307            });308        triadToolbar.click('@modelBrowser')309        browser.frame(null);310        return current;311    },312    validateSavedPreviewImage : function(browser, file) {313        let current = this;314        let viewerSection = current.section.viewerSection;315        let previewSection = current.section.viewerSection.section.previewSection;316        let inputModelName = file.split(".");317        //let folderName = inputModelName[0] + "/" + "triadControls" + "/";318        //let filename = inputModelName[0] + '_SavedPreviewImage';319        current320            .verify.elementPresent('@previewButton')321            .verify.visible('@previewButton')322            .click('@previewButton')323        //browser.frame(0);324        current.pauseInSecs(3);325        //viewerSection.cropScreenshot('@canvas', filename, folderName);326        previewSection327            .verify.elementPresent('@previewThumbnail')328            .verify.visible('@previewThumbnail')329            .verify.elementPresent('@savedPreviewImage')330            .verify.visible('@savedPreviewImage');331        return current;332    },333    sectionCutTriadControl : function(browser, file, dataTimeStamp) {334        let current = this;335        let viewerSection = current.section.viewerSection;336        let triadToolbar = current.section.viewerSection.section.triadToolbar;337        let sectionCutDialog = current.section.viewerSection.section.sectionCutDialog;338        let inputModelName = file.split(".");339        //let folderName = inputModelName[0] + "/" + "triadControls" + "/";340        let folderName = "Viewer/triadToolbar" + dataTimeStamp + "/";341        //browser.frame(0);342        current.pause(2000)343        triadToolbar344            .verify.elementPresent('@isometricView')345            .click('@isometricView')346        current.pauseInSecs(1)347        triadToolbar348            .verify.elementPresent('@sectionCut')349            .verify.visible('@sectionCut')350            .click('@sectionCut');351        current.pause(1000);352        //Section Cut YZ353        sectionCutDialog354            .verify.elementPresent('@sectionCutLabel')355            .verify.visible('@sectionCutLabel')356            .getText('@sectionCutLabel', function(result){357                current.verify.equal(result.value, "Section Cut")358            })359            .verify.elementPresent('@sectionCut_YZ')360            .click('@sectionCut_YZ')361        let filename = inputModelName[0] + '_SectionCut_YZ';362        current.pauseInSecs(1)363        //viewerSection.cropScreenshot('@canvas', filename, folderName);364        current.captureImage(browser, filename, folderName);365        current.pauseInSecs(2);366        //Section Cut YZ Reverse367        sectionCutDialog368            .verify.elementPresent('@sectionCut_Reverse')369            .click('@sectionCut_Reverse')370        filename = inputModelName[0] + '_SectionCut_YZ_Reverse';371        current.pauseInSecs(1)372        //viewerSection.cropScreenshot('@canvas', filename, folderName);373        current.captureImage(browser, filename, folderName);374        current.pauseInSecs(2);375        sectionCutDialog.click('@sectionCut_Reverse')376        //Section Cut ZX377        sectionCutDialog378            .verify.elementPresent('@sectionCut_ZX')379            .click('@sectionCut_ZX')380        filename = inputModelName[0] + '_SectionCut_ZX';381        current.pauseInSecs(1)382        //viewerSection.cropScreenshot('@canvas', filename, folderName);383        current.captureImage(browser, filename, folderName);384        current.pauseInSecs(2);385        //Section Cut ZX Reverse386        sectionCutDialog387            .verify.elementPresent('@sectionCut_Reverse')388            .click('@sectionCut_Reverse')389        filename = inputModelName[0] + '_SectionCut_ZX_Reverse';390        current.pauseInSecs(1)391        //viewerSection.cropScreenshot('@canvas', filename, folderName);392        current.captureImage(browser, filename, folderName);393        current.pauseInSecs(2);394        sectionCutDialog395            .click('@sectionCut_Reverse')396        //Section Cut XY397        sectionCutDialog398            .verify.elementPresent('@sectionCut_XY')399            .click('@sectionCut_XY')400        filename = inputModelName[0] + '_SectionCut_XY';401        current.pauseInSecs(1)402        //viewerSection.cropScreenshot('@canvas', filename, folderName);403        current.captureImage(browser, filename, folderName);404        current.pauseInSecs(2);405        //Section Cut XY Reverse406        sectionCutDialog407            .verify.elementPresent('@sectionCut_Reverse')408            .click('@sectionCut_Reverse')409        filename = inputModelName[0] + '_SectionCut_XY_Reverse';410        current.pauseInSecs(1)411        //viewerSection.cropScreenshot('@canvas', filename, folderName);412        current.captureImage(browser, filename, folderName);413        current.pauseInSecs(2);414        triadToolbar415            .verify.elementPresent('@sectionCut')416            .click('@sectionCut')417        browser.frame(null);418        return current;419    },420    captureImage : function(browser, fileName, folderName) {421        let current = this;422        let runtimeImageDir = "test-output/runtimeImages/" + folderName + fileName;423		424		current.pause(1000);425		browser.saveScreenshot(runtimeImageDir + '_runTime.png');...

screenshots.js

Source:screenshots.js

...48			.then( null, function ( e ) {49				console.error( e.message );50			} );51	} );52	function cropScreenshot( filename, imageBuffer, rect, padding ) {53		if ( padding === undefined ) {54			padding = 5;55		}56		const left = Math.max( 0, rect.left - padding );57		const top = Math.max( 0, rect.top - padding );58		const right = Math.min( clientSize.width, rect.left + rect.width + padding );59		const bottom = Math.min( clientSize.height, rect.top + rect.height + padding );60		return Jimp.read( imageBuffer ).then( function ( jimpImage ) {61			try {62				jimpImage63					.crop( left, top, right - left, bottom - top )64					.write( filename );65			} catch ( e ) {66				// Log error (memory?)67				console.error( e );68			}69		} );70	}71	function runScreenshotTest( name, lang, clientScript, padding ) {72		if ( !clientSize ) {73			// Setup failed, don't generated a broken screenshot74			return;75		}76		const filename = './screenshots/' + name + '-' + lang + '.png';77		driver.manage().timeouts().setScriptTimeout( TIMEOUT );78		driver.wait(79			driver.executeAsyncScript( clientScript ).then( function ( rect ) {80				return driver.takeScreenshot().then( function ( base64Image ) {81					if ( rect ) {82						const imageBuffer = Buffer.from( base64Image, 'base64' );83						return cropScreenshot( filename, imageBuffer, rect, padding );84					} else {85						fs.writeFile( filename, base64Image, 'base64' );86					}87				} );88			}, function ( e ) {89				// Log error (timeout)90				console.error( e );91			} )92		);93	}94	return runScreenshotTest;95}...

ImageCapturer.js

Source:ImageCapturer.js

1import { CanvasResizer } from '@project/common';2export default class ImageCapturer {3    constructor(settings) {4        this.settings = settings;5        this.canvasResizer = new CanvasResizer();6    }7    capture(rect, maxWidth, maxHeight) {8        return new Promise(async (resolve, reject) => {9            chrome.tabs.captureVisibleTab(null, { format: 'jpeg' }, async (dataUrl) => {10                const croppedDataUrl = await this._cropAndResize(dataUrl, rect, maxWidth, maxHeight);11                this.lastImageBase64 = croppedDataUrl.substr(croppedDataUrl.indexOf(',') + 1);12                resolve(this.lastImageBase64);13            });14        });15    }16    _cropAndResize(dataUrl, rect, maxWidth, maxHeight) {17        return new Promise(async (resolve, reject) => {18            const cropScreenshot = (await this.settings.get(['cropScreenshot'])).cropScreenshot;19            if (!cropScreenshot) {20                resolve(dataUrl);21            }22            const image = new Image();23            image.onload = async () => {24                const canvas = document.createElement('canvas');25                const r = window.devicePixelRatio;26                const width = rect.width * r;27                const height = rect.height * r;28                canvas.width = width;29                canvas.height = height;30                const ctx = canvas.getContext('2d');31                ctx.drawImage(image, rect.left * r, rect.top * r, width, height, 0, 0, width, height);32                if (maxWidth > 0 || maxHeight > 0) {33                    try {34                        await this.canvasResizer.resize(canvas, ctx, maxWidth, maxHeight);35                        resolve(canvas.toDataURL('image/jpeg'));36                    } catch (e) {37                        reject(e);38                    }39                } else {40                    resolve(canvas.toDataURL('image/jpeg'));41                }42            };43            image.src = dataUrl;44        });45    }...

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My first test', async t => {3        .typeText('#developer-name', 'John Smith')4        .click('#submit-button')5        .expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');6});7test('My second test', async t => {8        .typeText('#developer-name', 'John Smith')9        .click('#submit-button')10        .expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');11});12const createTestCafe = require('testcafe');13const testcafe = await createTestCafe('localhost', 1337, 1338);14const runner = testcafe.createRunner();15    .src(['test.js'])16    .browsers(['chrome'])17    .screenshots('reports/screenshots/', true)18    .reporter('json', 'reports/report.json')19    .run({20    });21testcafe.close();22const cropScreenshot = require('testcafe-reporter-crop-screenshot');23module.exports = cropScreenshot;

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My first test', async t => {3        .typeText('#developer-name', 'John Smith')4        .click('#submit-button')5        .takeScreenshot({path: 'screenshot.png', fullPage: true})6        .cropScreenshot('#submit-button', {path: 'screenshot.png'});7});

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My first test', async t => {3        .typeText('#developer-name', 'John Smith')4        .click('#submit-button');5    const articleHeader = await Selector('.result-content').find('h1');6    const screenshotBuffer = await t.takeElementScreenshot(articleHeader);7    const headerTextBuffer = await cropScreenshot(screenshotBuffer, { left: 0, top: 0, width: 150, height: 30 });8    fs.writeFileSync('header-text.png', headerTextBuffer);9});10function cropScreenshot(screenshot, cropDimensions) {11    const image = new Jimp(screenshot);12    return new Promise((resolve, reject) => {13        image.crop(cropDimensions.left, cropDimensions.top, cropDimensions.width, cropDimensions.height);14        image.getBuffer(Jimp.MIME_PNG, (err, buffer) => {15            if (err)16                return reject(err);17            resolve(buffer);18        });19    });20}

Using AI Code Generation

1import { Selector } from 'testcafe';2test('My first test', async t => {3        .typeText('#developer-name', 'John Smith')4        .click('#macos')5        .click('#submit-button')6        .takeScreenshot('screenshot1.png')7        .cropScreenshot(Selector('#submit-button'), 'screenshot2.png');8});9import { Selector } from 'testcafe';10test('My first test', async t => {11        .typeText('#developer-name', 'John Smith')12        .click('#macos')13        .click('#submit-button')14        .takeScreenshot('screenshot1.png')15        .takeElementScreenshot(Selector('#submit-button'), 'screenshot2.png');16});

Using AI Code Generation

1import {Selector} from 'testcafe';2test('My first test', async t => {3        .typeText('#developer-name', 'John Smith')4        .click('#submit-button');5    const screenshot = await t.takeScreenshot();6    const croppedScreenshot = cropScreenshot(screenshot, 0, 0, 100, 100);7    await t.expect(croppedScreenshot).ok();8});9{10  "scripts": {11  },12  "dependencies": {13  }14}151 passed (3s)161 failed (3s)

Using AI Code Generation

1import { Selector } from 'testcafe';2import { cropScreenshot } from 'testcafe-crop-screenshot';3test('My first test', async t => {4        .typeText('#developer-name', 'John Smith')5        .click('#submit-button')6        .takeScreenshot()7        .then(cropScreenshot({8        }));9});10import { Selector } from 'testcafe';11import { cropScreenshot } from 'testcafe-crop-screenshot';12test('My first test', async t => {13        .typeText('#developer-name', 'John Smith')14        .click('#submit-button')15        .takeScreenshot()16        .then(cropScreenshot({17        }));18});19### cropScreenshot(options)20import { cropScreenshot } from 'testcafe-crop-screenshot';21test('My first test', async t => {22        .typeText('#developer-name', 'John Smith')23        .click('#submit-button')24        .takeScreenshot()25        .then(cropScreenshot({

Using AI Code Generation

1import { Selector } from 'testcafe';2import { cropScreenshot } from 'testcafe-browser-tools';3test('My first test', async t => {4        .typeText('#developer-name', 'John Smith')5        .click('#submit-button');6    const screenshot = await cropScreenshot('test.png', { top: 0, left: 0, width: 100, height: 100 });7    console.log(screenshot);8});9import { Selector } from 'testcafe';10import { takeElementScreenshot } from 'testcafe-browser-tools';11test('My first test', async t => {12        .typeText('#developer-name', 'John Smith')13        .click('#submit-button');14    const screenshot = await takeElementScreenshot(Selector('#developer-name'), 'screenshot.png', { crop: { top: 0, left: 0, width: 100, height: 100 } });15    console.log(screenshot);16});17cropScreenshot(screenshotPath, cropDimensions[, screenshotPath]) → Promise18import { cropScreenshot } from 'testcafe-browser-tools';19const cropDimensions = {20};21cropScreenshot('screenshot.png', cropDimensions, 'croppedScreenshot.png')22    .then(() => {23        console.log('The screenshot is cropped');24    });25takeElementScreenshot(selector, screenshot

Using AI Code Generation

1import { Selector } from 'testcafe';2import { cropScreenshot } from './cropScreenshot';3test('My first test', async t => {4    await cropScreenshot(t, 'body', 'body', { width: 500, height: 500, x: 100, y: 100 });5});6import { Selector } from 'testcafe';7import { join } from 'path';8import { PNG } from 'pngjs';9import { PNGImage, createWriteStream } from 'pngjs-image';10export async function cropScreenshot(t, selector, screenshotName, options) {11    const selectorObject = Selector(selector);12    const element = await selectorObject();13    const elementPosition = await element.getBoundingClientRect();14    const screenshotPath = join(process.cwd(), `${screenshotName}.png`);15    const screenshot = await t.takeElementScreenshot(selectorObject);16    const image = PNGImage.readImage(screenshotPath);17    const png = new PNG({ width: elementPosition.width, height: elementPosition.height });18    png.data = screenshot;19    png.pack().pipe(createWriteStream(screenshotPath));20    const cropImage = image.crop(elementPosition.x, elementPosition.y, elementPosition.width, elementPosition.height);21    cropImage.writeImage(screenshotPath);22}

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.