MobileVisualTest.js

let cpr = require('../../utils/ImageProcessing');

class MobileVisualTest {   
  
static visualTest(deviceUdid, deviceName, screenName) {
        let folders = {
                diffFolderPath: 'screenshots/diff/',
                referenceFolderPath: 'screenshots/reference/',
                screenFolderPath: 'screenshots/screen/'
            }
            , deviceInfo = cpr.getDeviceScreenInfo(deviceUdid)
            , originalTakenImageName = `${deviceName}_${deviceInfo.resolution}_${deviceInfo.density}_${screenName}.png`
            , referenceImageLocation = `${folders.referenceFolderPath}${deviceInfo.resolution}_${deviceInfo.density}_${screenName}.png`
            , testingImageLocation = `${folders.screenFolderPath}${deviceInfo.resolution}_${deviceInfo.density}_${screenName}.png`
            , diffImageLocation = `${folders.diffFolderPath}${originalTakenImageName}`
            , expectedTolerance = 0.01;

        browser.saveScreenshot(originalTakenImageName);

        // Crop some unused areas like status bar info
        return cpr.crop(originalTakenImageName, 0, 74, 840, 1920, testingImageLocation, deviceInfo, screenName)
            .then(() => {
                return cpr.compare(testingImageLocation, referenceImageLocation, diffImageLocation);
            })
            .then((data) => {
                expect(Number(data.misMatchPercentage)).to.be.below(expectedTolerance, "Visual Testing got failure");
            });
    }
}