@percy/playwright 1.0.7 → 1.0.8

package/README.md

@@ -131,6 +131,65 @@ const desired_cap = {
         - `bottom` (int): Bottom coordinate of the consider region.
         - `left` (int): Left coordinate of the consider region.
         - `right` (int): Right coordinate of the consider region.
+    - `regions` parameter that allows users to apply snapshot options to specific areas of the page. This parameter is an array where each object defines a custom region with configurations.
+      - Parameters:
+        - `elementSelector` (optional, only one of the following must be provided, if this is not provided then full page will be considered as region)
+            - `boundingBox` (object): Defines the coordinates and size of the region.
+              - `x` (number): X-coordinate of the region.
+              - `y` (number): Y-coordinate of the region.
+              - `width` (number): Width of the region.
+              - `height` (number): Height of the region.
+            - `elementXpath` (string): The XPath selector for the element.
+            - `elementCSS` (string): The CSS selector for the element.
+
+        - `algorithm` (mandatory)
+            - Specifies the snapshot comparison algorithm.
+            - Allowed values: `standard`, `layout`, `ignore`, `intelliignore`.
+
+        - `configuration` (required for `standard` and `intelliignore` algorithms, ignored otherwise)
+            - `diffSensitivity` (number): Sensitivity level for detecting differences.
+            - `imageIgnoreThreshold` (number): Threshold for ignoring minor image differences.
+            - `carouselsEnabled` (boolean): Whether to enable carousel detection.
+            - `bannersEnabled` (boolean): Whether to enable banner detection.
+            - `adsEnabled` (boolean): Whether to enable ad detection.
+
+         - `assertion` (optional)
+            - Defines assertions to apply to the region.
+            - `diffIgnoreThreshold` (number): The threshold for ignoring minor differences.
+
+### Example Usage for regions
+
+```
+const obj1 = {
+  elementSelector: {
+    elementCSS: ".ad-banner" 
+  },
+  algorithm: "intelliignore", 
+  configuration: {
+    diffSensitivity: 2,
+    imageIgnoreThreshold: 0.2,
+    carouselsEnabled: true,
+    bannersEnabled: true,
+    adsEnabled: true
+  },
+  assertion: {
+    diffIgnoreThreshold: 0.4,
+  }
+};
+
+// we can use the createRegion function
+
+const { createRegion } = percySnapshot;
+
+const obj2 = createRegion({
+  algorithm: "intelliignore",
+  diffSensitivity: 3,
+  adsEnabled: true,
+  diffIgnoreThreshold: 0.4
+});
+
+percySnapshot(page, "Homepage 1", { regions: [obj1] });
+```
 
 ### Creating Percy on automate build
 Note: Automate Percy Token starts with `auto` keyword. The command can be triggered using `exec` keyword.

package/index.js

@@ -41,6 +41,58 @@ const percySnapshot = async function(page, name, options) {
   }
 };
 
+const createRegion = function({
+  boundingBox = null,
+  elementXpath = null,
+  elementCSS = null,
+  padding = null,
+  algorithm = 'ignore',
+  diffSensitivity = null,
+  imageIgnoreThreshold = null,
+  carouselsEnabled = null,
+  bannersEnabled = null,
+  adsEnabled = null,
+  diffIgnoreThreshold = null
+} = {}) {
+  const elementSelector = {};
+  if (boundingBox) elementSelector.boundingBox = boundingBox;
+  if (elementXpath) elementSelector.elementXpath = elementXpath;
+  if (elementCSS) elementSelector.elementCSS = elementCSS;
+
+  const region = {
+    algorithm,
+    elementSelector
+  };
+
+  if (padding) {
+    region.padding = padding;
+  }
+
+  const configuration = {};
+  if (['standard', 'intelliignore'].includes(algorithm)) {
+    if (diffSensitivity) configuration.diffSensitivity = diffSensitivity;
+    if (imageIgnoreThreshold) configuration.imageIgnoreThreshold = imageIgnoreThreshold;
+    if (carouselsEnabled) configuration.carouselsEnabled = carouselsEnabled;
+    if (bannersEnabled) configuration.bannersEnabled = bannersEnabled;
+    if (adsEnabled) configuration.adsEnabled = adsEnabled;
+  }
+
+  if (Object.keys(configuration).length > 0) {
+    region.configuration = configuration;
+  }
+
+  const assertion = {};
+  if (diffIgnoreThreshold) {
+    assertion.diffIgnoreThreshold = diffIgnoreThreshold;
+  }
+
+  if (Object.keys(assertion).length > 0) {
+    region.assertion = assertion;
+  }
+
+  return region;
+};
+
 // Takes Playwright screenshot with Automate
 const percyScreenshot = async function(page, name, options) {
   if (!page) throw new Error('A Playwright `page` object is required.');
@@ -75,6 +127,7 @@ const percyScreenshot = async function(page, name, options) {
 
 module.exports = percySnapshot;
 module.exports.percySnapshot = percySnapshot;
+module.exports.createRegion = createRegion;
 module.exports.percyScreenshot = percyScreenshot;
 module.exports.CLIENT_INFO = CLIENT_INFO;
 module.exports.ENV_INFO = ENV_INFO;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@percy/playwright",
   "description": "Playwright client library for visual testing with Percy",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "license": "MIT",
   "author": "Perceptual Inc.",
   "repository": "https://github.com/percy/percy-playwright",
@@ -35,7 +35,7 @@
     "playwright-core": ">=1"
   },
   "devDependencies": {
-    "@percy/cli": "^1.30.2",
+    "@percy/cli": "^1.30.9",
     "@playwright/test": "^1.24.2",
     "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.2",