How to use diffDir method in differencify

Best JavaScript code snippet using differencify

ScreenShots.js

Source: ScreenShots.js Github

copy

Full Screen

1const puppeteer = require('puppeteer');2const fs = require('fs');3const PNG = require('pngjs').PNG;4const pixelmatch = require('pixelmatch');5const path = require('path');6class ScreenShotTest {7 clearDirs = true;8 initialPageWidth = 1920;9 baseUrl = "http:/​/​localhost:3000";10 pageList = [11 {12 name: "index",13 page: ""14 }15 ];16 testDir = "__tests__";17 beforeDir = '/​before/​';18 afterDir = '/​after/​';19 diffDir = '/​difference/​';20 workReport = {21 timeMod: 0,22 baseUrl: "",23 devices: [],24 pagesList: []25 }26 constructor(options = {}) {27 if (options.initialPageWidth !== undefined) {28 this.initialPageWidth = options.initialPageWidth;29 }30 if (options.baseUrl !== undefined) {31 this.baseUrl = options.baseUrl;32 }33 if (options.pageList !== undefined) {34 this.pageList = options.pageList;35 }36 if (options.testDir !== undefined) {37 this.testDir = options.testDir;38 }39 if (options.beforeDir !== undefined) {40 this.beforeDir = options.beforeDir;41 }42 if (options.afterDir !== undefined) {43 this.afterDir = options.afterDir;44 }45 if (options.diffDir !== undefined) {46 this.diffDir = options.diffDir;47 }48 this.beforeDir = this.testDir + this.beforeDir;49 this.afterDir = this.testDir + this.afterDir;50 this.diffDir = this.testDir + this.diffDir;51 if (options.clearDirs !== undefined) {52 this.clearDirs = options.clearDirs;53 }54 }55 createAllDir = () => {56 if (!fs.existsSync(this.testDir)) {57 fs.mkdirSync(this.testDir);58 }59 if (!fs.existsSync(this.beforeDir)) {60 fs.mkdirSync(this.beforeDir);61 }62 if (!fs.existsSync(this.afterDir)) {63 fs.mkdirSync(this.afterDir);64 }65 if (!fs.existsSync(this.diffDir)) {66 fs.mkdirSync(this.diffDir);67 }68 if (!fs.existsSync(this.beforeDir + this.initialPageWidth + "/​")) {69 fs.mkdirSync(this.beforeDir + this.initialPageWidth + "/​");70 }71 if (!fs.existsSync(this.afterDir + this.initialPageWidth + "/​")) {72 fs.mkdirSync(this.afterDir + this.initialPageWidth + "/​");73 }74 if (!fs.existsSync(this.diffDir + this.initialPageWidth + "/​")) {75 fs.mkdirSync(this.diffDir + this.initialPageWidth + "/​");76 }77 }78 initDiskPrepeat = () => {79 this.createAllDir();80 if (fs.existsSync(this.beforeDir)) {81 fs.readdir(this.beforeDir, (err, files) => {82 for (const file of files) {83 fs.unlink(path.join(this.beforeDir, file), err => {84 });85 }86 });87 }88 }89 filterIt = (obj, searchKey) => {90 return Object.values(obj).findIndex((element, index, array) => {91 return element === searchKey;92 });93 }94 doneReading = async (img1, img2, options) => {95 let diffPNG = new PNG({width: img1.width, height: img1.height});96 pixelmatch(img1.data, img2.data, diffPNG.data, img1.width, img1.height, {threshold: 0.1, includeAA: false});97 let res = this.filterIt(diffPNG.data, 0); /​/​res == 1 - есть различия, res == -1 - различий нет98 if (res !== -1) {99 let diffPNGFileName = this.diffDir + this.initialPageWidth + "/​" + options.pageInfo.name + options.timeMod + '.png'100 await diffPNG.pack().pipe(await fs.createWriteStream(diffPNGFileName));101 }102 /​/​console.log(options.pageInfo.name + ' ---- page compared');103 return res;104 }105 parsed = async (pageInfo, index, options) => {106 options.pageInfo = pageInfo;107 return await this.doneReading(options.img1, options.img2, options)108 }109 parse2 = async (pageInfo, index, options) => {110 /​/​let timeMod = options.timeMod;111 let fileBefore = this.beforeDir + this.initialPageWidth + "/​" + pageInfo.name + '.png';112 let resExist = fs.existsSync(fileBefore)113 if (resExist) {114 let data = fs.readFileSync(fileBefore);115 options.img2 = PNG.sync.read(data); /​/​this.img2[index] =116 } else {117 let imagePNG = options.img1;/​/​this.img1[index];118 let PNGOptions = {};119 let buffer = PNG.sync.write(imagePNG, PNGOptions);120 fs.writeFileSync(fileBefore, buffer);121 options.img2 = options.img1;122 }123 return await this.parsed(pageInfo, index, options);124 }125 diffPNG = async (timeMod) => {126 let result = [];127 let browser = await puppeteer.launch();128 const page = await browser.newPage();129 for (let index in this.pageList) {130 let pageInfo = this.pageList[index];131 await page.setViewport({width: this.initialPageWidth, height: 0});132 await page.goto(this.baseUrl + '/​' + pageInfo.page);133 await page.screenshot({134 path: this.afterDir + this.initialPageWidth + "/​" + pageInfo.name + '.png',135 fullPage: true136 });137 let data = fs.readFileSync(this.afterDir + this.initialPageWidth + "/​" + pageInfo.name + '.png');138 this.img1 = PNG.sync.read(data);139 let PageDifferent = await this.parse2(pageInfo, index, {timeMod: timeMod, img1: this.img1});140 result[index] = PageDifferent;141 }142 await browser.close();143 return result;144 }145 initCompareDisk = () => {146 this.createAllDir();147 let clearDir = [this.diffDir, this.afterDir, this.testDir + '/​']148 clearDir.map(function (element, index) {149 if (fs.existsSync(element)) {150 fs.readdir(element, (err, files) => {151 for (const file of files) {152 fs.unlink(path.join(element, file), err => {153 });154 }155 });156 }157 });158 }159 createReport = (resultScreenshots, timeMod) => {160 /​/​console.log(resultScreenshots);161 let result = {162 "baseURL": this.baseUrl,163 "testDir": this.testDir,164 "beforeDir": this.beforeDir,165 "afterDir": this.afterDir,166 "diffDir": this.diffDir,167 "initialPageWidth": this.initialPageWidth,168 "timeMod": timeMod169 };170 let compareList = resultScreenshots.map((resultScreenshot, index) => {171 let screenshot = {172 diff: resultScreenshot173 };174 screenshot.pageInfo = Object.assign({}, this.pageList[index]);175 return screenshot;176 });177 let objectList = this.pageList.map((pageInfo, index) => {178 pageInfo.diff = resultScreenshots[index];179 return pageInfo;180 });181 result.pageList = objectList;182 result.compareList = compareList;183 return result;184 }185 compareTask = async () => {186 if (this.clearDirs) {187 this.initCompareDisk();188 }189 let timeMod = new Date().getTime();190 let resultScreenshots = await this.diffPNG(timeMod);191 let result = this.createReport(resultScreenshots, timeMod);192 return result;193 };194 initTask = async () => {195 this.initDiskPrepeat();196 const browser = await puppeteer.launch();197 for (let index in this.pageList) {198 let element = this.pageList[index];199 const page = await browser.newPage();200 await page.setViewport({width: this.initialPageWidth, height: 0});201 await page.goto(this.baseUrl + '/​' + element);202 await page.screenshot({path: this.beforeDir + element + '.png', fullPage: true});203 console.log(element + ' page +');204 }205 await browser.close();206 }207 main = async (type) => {208 if (type === "initTask") {209 await this.initTask();210 } else {211 await this.compareTask();212 }213 }214}...

Full Screen

Full Screen

index.js

Source: index.js Github

copy

Full Screen

1const fs = require('fs');2const PNG = require('pngjs').PNG;3const pixelmatch = require('pixelmatch');4const testDir ='images/​screenshot';5const goldenDir ='images/​screenshot-golden';6const diffDir ='images/​screenshot-diff';7const perfDir ='perf';8const traceDir ='images/​trace';9export const takeAndCompareScreenshot = async (page, route, filePrefix) => {10 const currentDate = new Date().toISOString().slice(0, 10);11 /​/​ If you didn't specify a file, use the name of the route.12 let fileName = filePrefix + '__' + (route ? route : 'index');13 if (!fs.existsSync(perfDir)) fs.mkdirSync(perfDir,{ recursive: true });14 if (!fs.existsSync(`${traceDir}/​${currentDate}`)) fs.mkdirSync(`${traceDir}/​${currentDate}`,{ recursive: true });15 /​/​ Start the browser, go to that page, and take a screenshot.16 await page.screenshot({path: `${testDir}/​${currentDate}/​${fileName}.png`, fullPage: true});17 /​/​ Test to see if it's right.18 return compareScreenshots(fileName, currentDate);19}20export const compareScreenshots = (fileName, currentDate, testDir = 'images/​screenshot', goldenDir = 'images/​screenshot-golden', diffDir = 'images/​screenshot-diff') =>{21 return new Promise((resolve, reject) => {22 if (!fs.existsSync(`${testDir}/​${currentDate}`)) fs.mkdirSync(`${testDir}/​${currentDate}`,{ recursive: true });23 if (!fs.existsSync(goldenDir)) fs.mkdirSync(goldenDir,{ recursive: true });24 if (!fs.existsSync(`${diffDir}/​${currentDate}`)) fs.mkdirSync(`${diffDir}/​${currentDate}`,{ recursive: true });25 const img1 = fs.createReadStream(`${testDir}/​${currentDate}/​${fileName}.png`).pipe(new PNG()).on('parsed', doneReading);26 const img2 = fs.createReadStream(`${goldenDir}/​${fileName}.png`).pipe(new PNG()).on('parsed', doneReading);27 let filesRead = 0;28 function doneReading() {29 /​/​ Wait until both files are read.30 if (++filesRead < 2) return;31 /​/​ Do the visual diff.32 const diff = new PNG({width: img1.width, height: img2.height});33 const numDiffPixels = pixelmatch(34 img1.data, img2.data, diff.data, img1.width, img1.height,35 {threshold: 0.1});36 fs.writeFileSync(`${diffDir}/​${currentDate}/​${fileName}.png`, PNG.sync.write(diff));37 /​/​ The files should look the same.38 return resolve(numDiffPixels);39 }40 });41}42export const scrollIntoViewIfOutOfView = async (xpath) => {43 await page.evaluate(async (xpath) => {44 const el = document.querySelector(xpath);45 var topOfPage = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;46 var heightOfPage = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;47 var elY = 0;48 var elH = 0;49 if (document.layers) { /​/​ NS450 elY = el.y;51 elH = el.height;52 }53 else {54 for(var p=el; p&&p.tagName!='BODY'; p=p.offsetParent){55 elY += p.offsetTop;56 }57 elH = el.offsetHeight;58 }59 if ((topOfPage + heightOfPage) < (elY + elH)) {60 el.scrollIntoView(false);61 }62 else if (elY < topOfPage) {63 el.scrollIntoView(true);64 }65 }, xpath);...

Full Screen

Full Screen

generate-visual-json-report.js

Source: generate-visual-json-report.js Github

copy

Full Screen

1#! /​bin/​env node2/​/​ SEE https:/​/​github.com/​oblador/​loki/​issues/​76#issuecomment-5957775503const { readdir, writeFile } = require('fs/​promises');4const { resolve, relative } = require('path');5const lokiDir = resolve(__dirname, '..', '.loki');6const actualDir = resolve(lokiDir, 'current');7const expectedDir = resolve(lokiDir, 'reference');8const diffDir = resolve(lokiDir, 'difference');9(async function main() {10 const diffs = await readdir(diffDir);11 await writeFile(12 resolve(lokiDir, 'report.json'),13 JSON.stringify({14 newItems: [],15 deletedItems: [],16 passedItems: [],17 failedItems: diffs,18 expectedItems: diffs,19 actualItems: diffs,20 diffItems: diffs,21 actualDir: relative(lokiDir, actualDir),22 expectedDir: relative(lokiDir, expectedDir),23 diffDir: relative(lokiDir, diffDir),24 }),25 );...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const diffDir = require('differencify').diffDir;2diffDir({3 ignoreRectangles: [{ left: 0, top: 0, width: 1000, height: 1000 }],4 ignoreRectangles: [{ left: 0, top: 0, width: 1000, height: 1000 }],5 ignoreRectangles: [{ left: 0, top: 0, width: 1000, height: 1000 }],6 ignoreRectangles: [{ left: 0, top: 0, width: 1000, height: 1000 }],

Full Screen

Using AI Code Generation

copy

Full Screen

1const differencify = require('differencify');2const { diffDir } = differencify;3const differencify = require('differencify');4const { diffDir } = differencify;5const differencify = require('differencify');6const { diffDir } = differencify;7const differencify = require('differencify');8const { diffDir } = differencify;9const differencify = require('differencify');10const { diffDir } = differencify;11const differencify = require('differencify');12const { diffDir } = differencify;13const differencify = require('differencify');14const { diffDir } = differencify;15const differencify = require('differencify');16const { diffDir } = differencify;17const differencify = require('differencify');18const { diffDir } = differencify;19const differencify = require('differencify');20const { diffDir } = differencify;21const differencify = require('differencify');22const { diffDir } = differencify;23const differencify = require('differencify');24const { diffDir } = differencify;25const differencify = require('differencify');26const { diffDir } =

Full Screen

Using AI Code Generation

copy

Full Screen

1const differencify = require('differencify').default;2const differencifyConfig = require('./​differencify.config.js');3differencify.init(differencifyConfig);4 .diffDir({5 })6 .then(() => {7 console.log('success');8 })9 .catch((error) => {10 console.log('error', error);11 });12const differencify = require('differencify').default;13module.exports = {14 browser: {15 chrome: {16 chromeOptions: {17 },18 },19 },20 screenshotConfig: {21 },22 diffConfig: {23 },24};25 .diffDir({26 })27 .then(() => {28 console.log('success');29 })30 .catch((error

Full Screen

Using AI Code Generation

copy

Full Screen

1const differencify = require('differencify').default;2const diffDir = differencify.diffDir;3diffDir({4}).then(result => {5 console.log(result);6});7{8 "dimensionDifference": { "width": 0, "height": 0 },9}10{11 "dimensionDifference": { "width": 0, "height": 0 },12}13{14 "dimensionDifference": { "width": 0, "height": 0 },15}

Full Screen

Using AI Code Generation

copy

Full Screen

1const differencify = require('differencify');2const differencifyConfig = require('./​differencify.config');3differencify.init(differencifyConfig);4const diffDir = differencify.diffDir;5diffDir('test/​screenshots', 'test/​screenshots/​diff', {6 {7 }8}).then((result) => {9 console.log(result);10}).catch((error) => {11 console.log(error);12});13const differencify = require('differencify');14const differencifyConfig = {15 onBeforeScreenshot(browser, page) {16 return page.setViewport({ width: 1920, height: 1080 });17 },18 chromeLaunchConfig: {19 },20 firefoxLaunchConfig: {21 },22};23differencify.init(differencifyConfig);24module.exports = differencifyConfig;

Full Screen

Using AI Code Generation

copy

Full Screen

1const differencify = require('differencify');2const differencifyConfig = require('./​differencify.config.js');3const differencifyInstance = differencify.init(differencifyConfig);4describe('test', function() {5 it('should create screenshot', async function() {6 const image = await browser.takeScreenshot();7 await differencifyInstance.diffDir(image, 'test');8 });9});10const differencify = require('differencify');11const differencifyConfig = require('./​differencify.config.js');12const differencifyInstance = differencify.init(differencifyConfig);13describe('test', function() {14 it('should create screenshot', async function() {15 const image = await browser.takeScreenshot();16 await differencifyInstance.diffDir(image, 'test');17 });18});19const differencify = require('differencify').init({

Full Screen

Using AI Code Generation

copy

Full Screen

1const differencify = require('differencify');2const differencifyConfig = require('./​differencify.config.js');3const diffDir = differencify.diffDir;4const config = differencifyConfig.config;5diffDir(config);6const differencify = require('differencify');7const differencifyConfig = require('./​differencify.config.js');8const diffDir = differencify.diffDir;9const config = differencifyConfig.config;10diffDir(config);11const differencify = require('differencify');12const differencifyConfig = require('./​differencify.config.js');13const diffDir = differencify.diffDir;14const config = differencifyConfig.config;15diffDir(config);16const differencify = require('differencify');17const differencifyConfig = require('./​differencify.config.js');18const diffDir = differencify.diffDir;19const config = differencifyConfig.config;20diffDir(config);21const differencify = require('differencify');22const differencifyConfig = require('./​differencify.config.js');23const diffDir = differencify.diffDir;24const config = differencifyConfig.config;25diffDir(config);26const differencify = require('differencify');27const differencifyConfig = require('./​differencify.config.js');28const diffDir = differencify.diffDir;29const config = differencifyConfig.config;30diffDir(config);31const differencify = require('differencify');32const differencifyConfig = require('./​differencify.config.js');33const diffDir = differencify.diffDir;34const config = differencifyConfig.config;35diffDir(config);36const differencify = require('differencify');37const differencifyConfig = require('./​differencify.config.js');38const diffDir = differencify.diffDir;39const config = differencifyConfig.config;40diffDir(config);41const differencify = require('differencify');

Full Screen

Using AI Code Generation

copy

Full Screen

1const { diffDir } = require('differencify');2diffDir({3}).then((result) => {4 console.log(result);5}).catch((error) => {6 console.log(error);7});8diffDir({9 imageToImageOptions: {10 }11}).then((result) =>

Full Screen

Using AI Code Generation

copy

Full Screen

1const differencify = require('differencify');2const fs = require('fs');3const path = require('path');4const { expect } = require('chai');5const diffDir = path.join(__dirname, 'screenshots');6const config = {7 baselineFolder: path.join(diffDir, 'baseline'),8 diffFolder: path.join(diffDir, 'diff'),9 formatImageName: '{tag}-{logName}-{width}x{height}',10 screenshotPath: path.join(diffDir, '{tag}'),11};12describe('Test', () => {13 let browser;14 before(async () => {15 browser = await differencify.launch(config);16 });17 after(async () => {18 await browser.close();19 });20 it('should match', async () => {21 await browser.saveElement('body', 'body');22 const result = await browser.checkFullPageScreen('body', {23 {24 },25 });26 expect(result).to.be.within(0, 5);27 });28});29exports.config = {30 {31 'goog:chromeOptions': {32 },33 },34 reporterOptions: {35 },36};37- Default: `./​{tag}`

Full Screen

Using AI Code Generation

copy

Full Screen

1const differencify = require('differencify');2const diff = differencify.diffDir;3const options = {4};5diff('./​screenshots', './​screenshots', options)6 .then((result) => {7 console.log(result);8 })9 .catch((error) => {10 console.log(error);11 });12const differencify = require('differencify');13const diff = differencify.diffDir;14const options = {15};16diff('./​screenshots', './​screenshots', options)17 .then((result) => {18 console.log(result);19 })20 .catch((error) => {21 console.log(error);22 });23| options | object | | **Optional**. The object to set the options for differencify. See [Options](#options) for more details. |24| callback | func | | **Optional**. The callback function to get the result of the comparison. See [Callback](#callback) for details |

Full Screen

Blogs

Check out the latest blogs from LambdaTest on this topic:

QA&#8217;s and Unit Testing &#8211; Can QA Create Effective Unit Tests

Unit testing is typically software testing within the developer domain. As the QA role expands in DevOps, QAOps, DesignOps, or within an Agile team, QA testers often find themselves creating unit tests. QA testers may create unit tests within the code using a specified unit testing tool, or independently using a variety of methods.

[LambdaTest Spartans Panel Discussion]: What Changed For Testing &#038; QA Community And What Lies Ahead

The rapid shift in the use of technology has impacted testing and quality assurance significantly, especially around the cloud adoption of agile development methodologies. With this, the increasing importance of quality and automation testing has risen enough to deliver quality work.

What will come after “agile”?

I think that probably most development teams describe themselves as being “agile” and probably most development teams have standups, and meetings called retrospectives.There is also a lot of discussion about “agile”, much written about “agile”, and there are many presentations about “agile”. A question that is often asked is what comes after “agile”? Many testers work in “agile” teams so this question matters to us.

Test Optimization for Continuous Integration

“Test frequently and early.” If you’ve been following my testing agenda, you’re probably sick of hearing me repeat that. However, it is making sense that if your tests detect an issue soon after it occurs, it will be easier to resolve. This is one of the guiding concepts that makes continuous integration such an effective method. I’ve encountered several teams who have a lot of automated tests but don’t use them as part of a continuous integration approach. There are frequently various reasons why the team believes these tests cannot be used with continuous integration. Perhaps the tests take too long to run, or they are not dependable enough to provide correct results on their own, necessitating human interpretation.

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