Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! Join TestMu Conference

How to use diffDir method in differencify

Best JavaScript code snippet using differencify

ScreenShots.js

Source:ScreenShots.js

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

index.js

Source:index.js

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

generate-visual-json-report.js

Source:generate-visual-json-report.js

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

Using AI Code Generation

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 }],

Using AI Code Generation

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

Using AI Code Generation

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

Using AI Code Generation

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}

Using AI Code Generation

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;

Using AI Code Generation

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

Using AI Code Generation

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

Using AI Code Generation

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) =>

Using AI Code Generation

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

Using AI Code Generation

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 |

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.