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

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

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

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

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

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

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

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

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

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

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 differencify automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful