MWPW-147289: [Nala] Refine screenshot diff tool, rewrite uar screensh…

…ots in new way (#341)

* add test for quiz and result pages

* add test for quiz and result pages

* add test for quiz and result pages

* add POC for analytics test

* update analytics tests and envs

* result envs

* update analytics only on firefox

* add dynamic tests

* add dynamic test for quiz page

* update quiz test

* update test structure

* add test for quiz and result pages

* add POC for analytics test

* update analytics tests and envs

* result envs

* update analytics only on firefox

* add dynamic tests

* add dynamic test for quiz page

* update quiz test

* update test structure

* update uar tests to new format

* update uar tests

* move everything to uar folder

* add dependency for js-yaml

* update test according to latest comments

* update test according to latest comments

* update tests according to the latest comments

* add uar config

* add analytics for uar

* update according to feedbacks

* update tags

* add @cc tag

* update according to feedbacks

* add dynamic tests for uar

* update according to review comments

* fix some typos

* update according to review comments

* merge console log info

* add UI screenshots for UAR

* move view point to test

* update according to feedback

* add analytics test for UAR

* update validation and uar libs

* update libs

* update by feedback

* update some config and tests

* update some config and tests

* update test content path to common path

* update analytics tests

* fix test failures caused by test code

* fix test failures

* fix test failures

* add visual test for CAAS with two pages

* update according to feedbacks

* update report in config file

* add screenshot for milo main live vs uar-integration live

* add timestamp js for time stampe recording

* add screenshot diff for uar stable and beta

* move uar screenshots into visual compare folder

* add UI screenshots for DX Quiz

* build a function to get screenshots

* update locator

* udate uar to only run basic tests

* update according to feedback

* add screenshot for UAR in CC which will go live

* update final path for UAR in CC

* update the final CC path

* update cc uar screenshots to hlx.live vs stage

* update test

* update screenshot test

* update uar analytics to run on STAGE

* update tests to run on different envs after go live

* Fix test failures for MWPW-143444

* update urls

* MWPW-143444: setup automation for cc uar quiz

* update for feedbacks

* update for feedbacks

* fix some validations

* update uar automation for Stage testing

* fix lint error

* fix tests failures caused by timeout

* make uar able to run on milo

* limited dynamic test to 20 random

* delete unuse tests to avoid noises

* comment out soft compare to avoid failures

* comment out soft compare to avoid failures

* remove uar tests from cc folder

* remove stage stuff

* fix lint and test failures

* remove unuse ulrs

* get milo stage back for analytics

* update id to be unique

* update package.json

* remove main cc hlx live links

* remove cc tags for uar tests

* MWPW-146964: unified test run commands

* support '-' and '--'

* add required for -c and -p

* show help if no option provided

* MWPW-146964: [Nala] unified test run commands, support run on all projects or some projects

* MWPW-146964: [Nala] unified test run commands, support run on all projects or some projects

* MWPW-147289: [Nala] Refine screenshot diff tool, first step, cleanup and build new APIs

* MWPW-147289: [Nala] Refine screenshot diff tool, rewrite uar screenshots with new way

---------

Co-authored-by: xiasun <[email protected]>
Co-authored-by: Aaron Mauchley <[email protected]>
Co-authored-by: xiasun <[email protected]>

features/visual/milo/milo.spec.js

@@ -11,7 +11,7 @@ module.exports = {
       tcid: '1',
       name: '@marquee-visual',
       path: '/test/features/blocks/marquee',
-      tags: '@marquee-visua  @visual @milo-screenshots',
+      tags: '@marquee-visual @visual @milo-screenshots',
     },
   ],
 };

libs/visualutil.js

@@ -5,6 +5,10 @@ import { getComparator } from 'playwright-core/lib/utils';
 
 const fs = require('fs');
 
+async function take(page, folderPath, fileName) {
+  await page.screenshot({ path: `${folderPath}/${fileName}`, fullPage: true });
+}
+
 async function takeOne(page, url, callback, folderPath, fileName, isFullPage = true) {
   const urls = [];
   const result = {};
@@ -100,4 +104,4 @@ function compareScreenshots(stableArray, betaArray, folderPath) {
   }
 }
 
-module.exports = { takeTwoAndCompare, compareScreenshots, takeOne, takeTwo };
+module.exports = { takeTwoAndCompare, compareScreenshots, takeOne, takeTwo, take };

libs/webutil.js

@@ -3,7 +3,6 @@
 /* eslint-disable max-len */
 // eslint-disable-next-line import/no-import-module-exports
 import { expect } from '@playwright/test';
-import { getComparator } from 'playwright-core/lib/utils';
 
 const fs = require('fs');
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -115,7 +114,7 @@ exports.WebUtil = class WebUtil {
     return result;
   }
 
-    /**
+  /**
  * Verifies that the specified CSS properties of the given locator match the expected values.
  * @param {Object} locator - The locator to verify CSS properties for.
  * @param {Object} cssProps - The CSS properties and expected values to verify.
@@ -137,7 +136,7 @@ exports.WebUtil = class WebUtil {
       return result;
     }
 
-    /**
+  /**
  * Verifies that the specified CSS properties of the given locator match the expected values.
  * @param {Object} locator - The locator to verify CSS properties for.
  * @param {Object} cssProps - The CSS properties and expected values to verify.
@@ -328,19 +327,11 @@ exports.WebUtil = class WebUtil {
     await this.page.unroute('**');
   }
 
-  async takeScreenshot(folderPath, fileName, width, height) {
-    if (!fs.existsSync(folderPath)) {
-      fs.mkdirSync(folderPath, { recursive: true });
-    }
-    await this.page.setViewportSize({ width, height });
-    await this.page.screenshot({ path: `${folderPath}/${fileName}`, fullPage: true });
-  }
-
-/**
+  /**
  * Generates analytic string for a given project.
  * @param {string} project - The project identifier, defaulting to 'milo' if not provided.
  * @returns {string} - A string formatted as 'gnav|<project>|nopzn|nopzn'.
- */  
+ */
   async getGnavDaalh(project=milo) {
     return 'gnav'+ '|' + project + '|'+ 'nopzn' + '|' + 'nopzn' ;
   }
@@ -422,47 +413,4 @@ async getBlockDaalh(blockName, counter, pzn = false, pzntext = 'nopzn') {
     const slicedLastHeaderText = cleanAndSliceText(lastHeaderText);
     return `${slicedLinkText}-${counter}--${slicedLastHeaderText}`;
   }
-
-
-  async takeScreenshotAndCompare(urlA, callbackA, urlB, callbackB, folderPath, fileName) {
-    console.info(`[Test Page]: ${urlA}`);
-    await this.page.goto(urlA);
-    await callbackA();
-    await this.page.screenshot({ path: `${folderPath}/${fileName}-a.png`, fullPage: true });
-    const baseImage = fs.readFileSync(`${folderPath}/${fileName}-a.png`);
-
-    console.info(`[Test Page]: ${urlB}`);
-    await this.page.goto(urlB);
-    await callbackB();
-    await this.page.waitForSelector('.feds-footer-privacyLink');
-    await this.page.screenshot({ path: `${folderPath}/${fileName}-b.png`, fullPage: true });
-    const currImage = fs.readFileSync(`${folderPath}/${fileName}-b.png`);
-
-    const comparator = getComparator('image/png');
-    const diffImage = comparator(baseImage, currImage);
-
-    if (diffImage) {
-      fs.writeFileSync(`${folderPath}/${fileName}-diff.png`, diffImage.diff);
-      console.info('Differences found');
-    }
-  }
-
-  static compareScreenshots(stableArray, betaArray, folderPath) {
-    const comparator = getComparator('image/png');
-    for (let i = 0; i < stableArray.length; i += 1) {
-      if (betaArray[i].slice(-10) === stableArray[i].slice(-10)) {
-        const stableImage = fs.readFileSync(`${folderPath}/${stableArray[i]}`);
-        const betaImage = fs.readFileSync(`${folderPath}/${betaArray[i]}`);
-        const diffImage = comparator(stableImage, betaImage);
-
-        if (diffImage) {
-          fs.writeFileSync(`${folderPath}/${stableArray[i]}-diff.png`, diffImage.diff);
-          console.info('Differences found');
-        }
-      } else {
-        console.info('Screenshots are not matched');
-        console.info(`${stableArray[i]} vs ${betaArray[i]}`);
-      }
-    }
-  }
-};
+};