Updated description and modified ImageCompare test

Author: VinayKumarBM

src/framework/playwright/actions/UIElementActions.ts

@@ -334,7 +334,7 @@ export default class UIElementActions {
    * If differences are detected, a diff image highlighting the changes is generated and stored in ./test-results/image/diffs.
    * @param fileName name of the file in baseline folder to compare
    * @param maskSelectors selectors to mask on the screenshot
-   * @param misMatchTolerance tolerance level for image comparison (range 0 to 1), default is 0.00
+   * @param misMatchTolerance tolerance level for image comparison in percentage, default is 0.00
    */
   public async compareAndValidateElementScreenshot(fileName: string, maskSelectors: string[] = [], misMatchTolerance = 0.00) {
     const actualImageName = fileName.replace('.png', `_${new Date().getDate()}.png`);

src/framework/utils/ImageComparator.ts

@@ -11,7 +11,7 @@ export default class ImageComparator {
      * @param baselineImageName baseline image name 
      * @param actualImageDir Path to the actual image directory 
      * @param actualImageName actual image name
-     * @param misMatchTolerance tolerance level for image comparison (range 0 to 1), default is 0.00 
+     * @param misMatchTolerance tolerance level for image comparison in percentage (0.00 for exact match, 0.25 for 0.25% mismatch allowed etc., default is 0.00)
      * @returns 
      */
     public static async compareImages(baselineImagedDir: string, baselineImageName: string, actualImageDir: string, actualImageName: string, misMatchTolerance = 0.00): Promise<{ isSame: boolean; misMatchPercentage: number }> {

src/resources/baselineImages/Login_Section.png

@@ -6,7 +6,9 @@ import UIActions from "@uiActions/UIActions";
         Allure.attachDetails(`Capture the Screenshot and compare with the baseline image`, null);
         const ui = new UIActions(page);
         // All the baseline images are captured and stored in src/resources/baselineImages from below URL
-        // await pw.goto("https://demo.applitools.com/", "Applitools Demo");
+        await ui.goto("https://demo.applitools.com/", "Applitools Demo");
+        await ui.element('.auth-wrapper', "Login Section").compareAndValidateElementScreenshot("Login_Section.png");
+        await ui.element('.auth-wrapper', "Login Section masked").compareAndValidateElementScreenshot("Login_Section_masked.png", [".logo-w", ".buttons-w"]);
         // All the tests are run against the below URL
         await ui.goto("https://demo.applitools.com/index_v2.html", "Applitools Demo v2");
         // We are masking the dynamic elements before capturing the screenshot. So that the comparison will be done excluding those elements