Method compare

packages/ssdiff/src/index.ts:182–221

* Returns the pixel difference number for two images and creates a difference image * * @remarks * This is the main method for comparision of screenshots for a pathname on two domains. * * @param url1 - url of domain1 + pathnmae * @param url2 - url of domain2 + pathname * @param

(compareObj: { url1: any; url2: any; fileName: any })

   * @returns Pixel difference number for two images and creates a difference image
   */
  async compare(compareObj: { url1: any; url2: any; fileName: any }) {
    try {
      const { url1, url2, fileName } = compareObj;
      const screenshots = await Promise.all([this.screenshot(url1), this.screenshot(url2)]);
      // TODO: Make the file name dynamic based on the fileType in screenshotConfig
      let image1 = PNG.sync.read(screenshots[0]);
      let image2 = PNG.sync.read(screenshots[1]);
      const maxHeight = Math.max(image1.height, image2.height);
      const maxWidth = Math.max(image1.width, image2.width);
      if (image1.height !== image2.height || image1.width !== image2.width) {
        if (this.failInCaseOfDifferentSize) {
          this.log(`Failed due to different sized image for pathname : /${fileName}`);
          throw new Error(`Images are of different sizes for pathname : /${fileName}`);
        }
        // images needs to be resized before comparision
        this.log(`Resizing images for pathname : /${fileName}`);
        image1 = await this.resizeImage(image1, maxWidth, maxHeight);
        image2 = await this.resizeImage(image2, maxWidth, maxHeight);
        this.log(`Resized images for ${fileName}...`);
      }
      const diff = new PNG({ width: maxWidth, height: maxHeight });
      const numDiffPixels = pixelmatch(image1.data, image2.data, diff.data, maxWidth, maxHeight, {
        threshold: 0.1,
        includeAA: true,
        diffColor: [253, 225, 225],
        diffColorAlt: [212, 143, 143],
      });
      const totalPixels = diff.data.length / 4;
      const differencePercentage = (numDiffPixels / totalPixels) * 100;
      this.log(
        `file name: ${fileName} | numDiffPixels: ${numDiffPixels} | height: ${maxHeight} | width: ${maxWidth} | totalPixels: ${totalPixels} | percentage: ${
          (numDiffPixels / totalPixels) * 100
        }}`,
      );
      this.fileNameDifferenceMap.set(fileName, differencePercentage); // this map is used to sort the files in the folde
      fs.writeFileSync(this.diffScreenshots + `/${fileName}`, PNG.sync.write(diff));
    } catch (e: any) {
      throw new Error("Error while comparing screenshots: " + e.message);
    }
  }
  async sortFilesBasedOnDifference() {
    const sortedMap = new Map([...this.fileNameDifferenceMap.entries()].sort((a, b) => b[1] - a[1]));
    return sortedMap;