artes 1.5.6 → 1.5.8

package/docs/stepDefinitions.md

@@ -309,6 +309,12 @@
 - User expects `{string}` should have `{string}` id
 - User expects `{string}` should have `{string}` JavaScript property with `{string}` value
 - User expects `{string}` should have `{string}` role
+- User expects that full page match with `{string}` screenshot
+- User expects that full page match with `{string}` screenshot with {float}% difference
+- User expects that page match with `{string}` screenshot
+- User expects that page match with `{string}` screenshot with `{float}`% difference
+- User expects that `{string}` element match with `{string}` screenshot
+- User expects that `{string}` element match with `{string}` screenshot with `{float}`% difference
 - User expects `{string}` should have a screenshot
 - User expects `{string}` should match `{string}` text
 - User expects `{string}` should have `{string}` value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artes",
-  "version": "1.5.6",
+  "version": "1.5.8",
   "description": "The simplest way to automate UI and API tests using Cucumber-style steps.",
   "main": "index.js",
   "scripts": {
@@ -30,7 +30,10 @@
     "deasync": "^0.1.31",
     "playwright": "^1.58.2",
     "ffmpeg-static": "^5.3.0",
-    "ffprobe-static": "^3.1.0"
+    "ffprobe-static": "^3.1.0",
+    "pixelmatch": "^5.3.0",
+    "pngjs": "^7.0.0",
+    "sharp": "^0.34.5"
   },
   "repository": {
     "type": "git",

package/src/helper/controller/screenComparer.js

@@ -0,0 +1,85 @@
+
+const path = require('path');
+const fs = require('fs');
+require("allure-cucumberjs");
+const allure = require("allure-js-commons");
+const sharp = require("sharp");
+const pixelmatch = require("pixelmatch");
+const { PNG } = require('pngjs');
+const { moduleConfig } = require('artes/src/helper/imports/commons');
+
+
+async function screenComparer(baselineFilename, screenshotFn, options = {}) {
+    const {
+      maxDiffPercent = 0.01,
+      threshold = 0.1,
+    } = options;
+  
+    const baselinePath = path.join(moduleConfig.projectPath, baselineFilename);
+    const actualPath   = path.join(moduleConfig.projectPath,"visualComparison", `actual_${baselineFilename}`);
+    const diffPath     = path.join(moduleConfig.projectPath,"visualComparison", `diff_${baselineFilename}`);
+  
+    await screenshotFn(actualPath);
+  
+    const baselineMeta = await sharp(baselinePath).metadata();
+    const actualMeta   = await sharp(actualPath).metadata();
+  
+    // if (baselineMeta.width !== actualMeta.width || baselineMeta.height !== actualMeta.height) {
+    //   console.warn(`⚠️  Dimension mismatch! Baseline: ${baselineMeta.width}x${baselineMeta.height} | Actual: ${actualMeta.width}x${actualMeta.height}`);
+    // }
+  
+    const width  = actualMeta.width;
+    const height = actualMeta.height;
+  
+    const baselineBuffer = await sharp(baselinePath)
+      .resize(width, height, { fit: "fill" })
+      .ensureAlpha()
+      .raw()
+      .toBuffer();
+  
+    const actualBuffer = await sharp(actualPath)
+      .resize(width, height, { fit: "fill" })
+      .ensureAlpha()
+      .raw()
+      .toBuffer();
+  
+    const diffImg = new PNG({ width, height });
+  
+    const mismatchedPixels = pixelmatch(
+      baselineBuffer,
+      actualBuffer,
+      diffImg.data,
+      width,
+      height,
+      { threshold, includeAA: false }
+    );
+  
+    fs.writeFileSync(diffPath, PNG.sync.write(diffImg));
+  
+    const totalPixels   = width * height;
+    const mismatchRatio = mismatchedPixels / totalPixels;
+    
+    const expectedBase64 = (await sharp(baselinePath).resize(width, height, { fit: "fill" }).png().toBuffer()).toString("base64");
+    const actualBase64   = (await sharp(actualPath).png().toBuffer()).toString("base64");
+    const diffBase64     = (await sharp(diffPath).png().toBuffer()).toString("base64");
+  
+    const content = JSON.stringify({
+      expected: `data:image/png;base64,${expectedBase64}`,
+      actual:   `data:image/png;base64,${actualBase64}`,
+      diff:     `data:image/png;base64,${diffBase64}`,
+    });
+  
+    await allure.attachment("Screenshot diff details", ` Mismatched pixels: ${mismatchedPixels} / ${totalPixels} (${(mismatchRatio * 100).toFixed(2)}%) Max allowed: ${(maxDiffPercent * 100)}%`, "text/plain"  )
+    await allure.attachment("Screenshot diff", content, "application/vnd.allure.image.diff");
+  
+    if (fs.existsSync(path.join(moduleConfig.projectPath,"visualComparison")))  fs.rmSync(path.join(moduleConfig.projectPath,"visualComparison"), {recursive: true, force: true});
+
+    if (mismatchRatio > maxDiffPercent) {
+      throw new Error(
+        `Screenshot mismatch: ${(mismatchRatio * 100).toFixed(2)}% pixels differ (max allowed: ${(maxDiffPercent * 100)}%)`
+      );
+    }
+
+  }
+
+  module.exports= { screenComparer}

package/src/helper/stepFunctions/assertions.js

@@ -186,13 +186,6 @@ const assert = {
       typeof selector === "string" ? element(selector) : await selector,
     ).toHaveRole(role, options);
   },
-  shouldHaveScreenshot: async (selector, options) => {
-    options = options ?? {};
-
-    await expect(
-      typeof selector === "string" ? element(selector) : await selector,
-    ).toHaveScreenshot(options);
-  },
   shouldHaveText: async (selector, text, options) => {
     options = options ?? {};
 

package/src/stepDefinitions/assertions.steps.js

@@ -7,6 +7,7 @@ const {
   context,
   resolveVariable
 } = require("../helper/imports/commons");
+const { screenComparer } = require("artes/src/helper/controller/screenComparer");
 const { assert, frame } = require("../helper/stepFunctions/exporter");
 const Ajv = require("ajv");
 
@@ -266,13 +267,50 @@ Then("User expects {int} th of {string} should have {string} role", async functi
   await assert.shouldHaveId(nthElement, role);
 });
 
-// Check if a selector should have a screenshot
-Then(
-  "User expects {string} should have a screenshot",
-  async function (selector) {
-    await assert.shouldHaveScreenshot(selector);
-  },
-);
+
+Then('User expects that full page match with {string} screenshot', async function (baselineFilename) {
+  await screenComparer( baselineFilename,
+    (actualPath) => context.page.screenshot({ path: actualPath, fullPage: true }),
+    { maxDiffPercent: 0.01 }
+  );
+});
+
+Then('User expects that full page match with {string} screenshot with {float}% difference', async function (baselineFilename, maxDiff) {
+  await screenComparer( baselineFilename,
+    (actualPath) => context.page.screenshot({ path: actualPath, fullPage: true }),
+    { maxDiffPercent: maxDiff / 100 }
+  );
+});
+
+
+Then('User expects that page match with {string} screenshot', async function (baselineFilename) {
+  await screenComparer(baselineFilename,
+    (actualPath) => context.page.screenshot({ path: actualPath, fullPage: false }),
+    { maxDiffPercent: 0.01 }
+  );
+});
+
+Then('User expects that page match with {string} screenshot with {float}% difference', async function (baselineFilename, maxDiff) {
+  await screenComparer( baselineFilename,
+    (actualPath) => context.page.screenshot({ path: actualPath, fullPage: false }),
+    { maxDiffPercent: maxDiff / 100 }
+  );
+});
+
+
+Then('User expects that {string} element match with {string} screenshot', async function (selector, baselineFilename) {
+  await screenComparer( baselineFilename,
+    (actualPath) => element(selector).screenshot({ path: actualPath }),
+    { maxDiffPercent: 0.01 }
+  );
+});
+
+Then('User expects that {string} element match with {string} screenshot with {float}% difference', async function (selector, baselineFilename, maxDiff) {
+  await screenComparer( baselineFilename,
+    (actualPath) => element(selector).screenshot({ path: actualPath }),
+    { maxDiffPercent: maxDiff / 100 }
+  );
+});
 
 // Check if a selector should have specific text
 Then(