How to use cropScreenshot method in Testcafe

Best JavaScript code snippet using testcafe

altairDriveViewerPage.js

Source:altairDriveViewerPage.js Github

copy

Full Screen

...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');...

Full Screen

Full Screen

screenshots.js

Source:screenshots.js Github

copy

Full Screen

...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}...

Full Screen

Full Screen

ImageCapturer.js

Source:ImageCapturer.js Github

copy

Full Screen

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 }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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;

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Using AI Code Generation

copy

Full Screen

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}

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Using AI Code Generation

copy

Full Screen

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)

Full Screen

Using AI Code Generation

copy

Full Screen

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({

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Using AI Code Generation

copy

Full Screen

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}

Full Screen

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:

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!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful