The functionality is - after inputting some values in the UI, I will have an image download option and once download, I need to compare that PNG image with my base image which I already have in my cypress/fixtures/base/<nameOfTheFile.png>.

I am trying to make a utility function in cypress to compare two PNG images but I get issues one after another for all my approaches.

Utils.js (under integration folder)

const fs = require('fs');

export const comparePNGImages = (fileName) => {

    expect(fileName).to.be.a('string')

    const img1 = fs.readFileSync("./cypress/fixtures/baseImage/" + fileName);
    const img2 = fs.readFileSync("./cypress/fixtures/currentImage/" + fileName);

    expect(img1).to.matchImage(img2)

    return null;
}

and in test,

import { downloadPng, comparePNGImages } from './utils'
.........

var imageName = "SailingDirection.png";

//steps to input, download the image file, keep in fixtures folder
//.....

comparePNGImages(imageName)

.........

Error in TestRunner:

fs.readFileSync is not a function

Note:

I tried to change the import statement to the following:

import fs from 'fs';
import { fs } from 'fs';

but none worked.

Also, read that fs will not have access to the local file system but surprisingly, the same fs stuff works in the same cypress project which is in other file plugins/index.js

const fs = require('fs');
on('task', {
        validateTotalFileCount(folderName, expectedFileCount) {
            console.log("#### getTotalFileCount #### ");
            const length = fs.readdirSync(folderName).length;
            if (length == expectedFileCount) {
                throw new Error(`#### List of files not matched with expected count`)
            }
            return null;
        }
    })

Any help on this to fix it would be much appreciated.