@wdio/ocr-service 1.0.3 → 1.0.5

package/CHANGELOG.md

@@ -1,17 +1,185 @@
 # @wdio/ocr-service
 
-## 1.0.3
+## 1.0.5
 
 ### Patch Changes
 
- # 💅 Polish
- 
- Update deps
+- 85a1d82: # 🐛 Bug Fixes
+
+  Fix issues:
+
+  - [438](https://github.com/webdriverio/visual-testing/issues/438): resizeDimensions not working
+  - [448](https://github.com/webdriverio/visual-testing/issues/448): hideElements and removeElements` don't work for native apps
+
+  # 💅 Polish
+
+  - update dependencies
 
   # Committers: 1
 
   - Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
 
+## 1.0.4
+
+### Patch Changes
+
+- 0b01b64: ### @wdio/visual-service
+
+  #### 🚀 New Features
+
+  **Added Reporting output**
+  You now have the option to export the compare results into a JSON report file. By enabling the module option `createJsonReportFiles: true`, each image that is compared will create a report stored in the `actual` folder, next to each `actual` image result.
+
+  The output will look like this:
+
+  ```json
+  {
+    "parent": "check methods",
+    "test": "should fail comparing with a baseline",
+    "tag": "examplePageFail",
+    "instanceData": {
+      "browser": {
+        "name": "chrome-headless-shell",
+        "version": "126.0.6478.183"
+      },
+      "platform": {
+        "name": "mac",
+        "version": "not-known"
+      }
+    },
+    "commandName": "checkScreen",
+    "boundingBoxes": {
+      "diffBoundingBoxes": [
+        {
+          "left": 1088,
+          "top": 717,
+          "right": 1186,
+          "bottom": 730
+        }
+        //....
+      ],
+      "ignoredBoxes": [
+        {
+          "left": 159,
+          "top": 652,
+          "right": 356,
+          "bottom": 703
+        }
+        //...
+      ]
+    },
+    "fileData": {
+      "actualFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/.tmp/actual/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
+      "baselineFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/localBaseline/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
+      "diffFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/.tmp/diff/desktop_chrome-headless-shell/examplePageFail-local-chrome-latest-1366x768png",
+      "fileName": "examplePageFail-local-chrome-latest-1366x768.png",
+      "size": {
+        "actual": {
+          "height": 768,
+          "width": 1366
+        },
+        "baseline": {
+          "height": 768,
+          "width": 1366
+        },
+        "diff": {
+          "height": 768,
+          "width": 1366
+        }
+      }
+    },
+    "misMatchPercentage": "12.90",
+    "rawMisMatchPercentage": 12.900729014153246
+  }
+  ```
+
+  When all tests are executed, a new JSON file with the collection of the comparisons will be generated and can be found in the root of your actual folder. The data is grouped by:
+
+  - `describe` for Jasmine/Mocha or `Feature` for CucumberJS
+  - `it` for Jasmine/Mocha or `Scenario` for CucumberJS
+
+  and then sorted by:
+
+  - `commandName`, which are the compare method names used to compare the images
+  - `instanceData`, browser first, then device, then platform
+
+  it will look like this
+
+  ```json
+  [
+    {
+      "description": "check methods",
+      "data": [
+        {
+          "test": "should fail comparing with a baseline",
+          "data": [
+            {
+              "tag": "examplePageFail",
+              "instanceData": {},
+              "commandName": "checkScreen",
+              "framework": "mocha",
+              "boundingBoxes": {
+                "diffBoundingBoxes": [],
+                "ignoredBoxes": []
+              },
+              "fileData": {},
+              "misMatchPercentage": "14.34",
+              "rawMisMatchPercentage": 14.335403703025868
+            },
+            {
+              "tag": "exampleElementFail",
+              "instanceData": {},
+              "commandName": "checkElement",
+              "framework": "mocha",
+              "boundingBoxes": {
+                "diffBoundingBoxes": [],
+                "ignoredBoxes": []
+              },
+              "fileData": {},
+              "misMatchPercentage": "1.34",
+              "rawMisMatchPercentage": 1.335403703025868
+            }
+          ]
+        }
+      ]
+    }
+  ]
+  ```
+
+  The report data will give you the opportunity to build your own visual report without doing all the magic and data collection yourself.
+
+  ### webdriver-image-comparison
+
+  #### 🚀 New Features
+
+  - Add support to generate single JSON report files
+
+  ### @wdio/ocr-service
+
+  #### 💅 Polish
+
+  - Refactored the CLI to use `@inquirer/prompts` instead of `inquirer`
+
+  ### Committers: 1
+
+  - Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
+
+  ```
+
+  ```
+
+## 1.0.3
+
+### Patch Changes
+
+# 💅 Polish
+
+Update deps
+
+# Committers: 1
+
+- Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import inquirer from 'inquirer';
+import { input, confirm, select } from '@inquirer/prompts';
 import { existsSync, readdirSync, readFileSync } from 'node:fs';
 import { join, resolve } from 'node:path';
 import getData from './utils/getData.js';
@@ -46,19 +46,17 @@ function listFilesAndFolders(folderPath) {
 async function chooseFolder(currentPath) {
     async function prompt(srcPath) {
         const choices = listFilesAndFolders(srcPath);
-        const answers = await inquirer.prompt([{
-                type: 'list',
-                name: 'path',
-                message: `Please choose a folder (current folder: ${srcPath})`,
-                choices: choices
-            }]);
-        const newPath = join(srcPath, answers.path);
-        if (answers.path === '..') {
+        const answers = await select({
+            message: `Please choose a folder (current folder: ${srcPath})`,
+            choices: choices
+        });
+        const newPath = join(srcPath, answers);
+        if (answers === '..') {
             // Clears the previous line
             process.stdout.write('\u001b[1A\u001b[2K');
             return prompt(newPath);
         }
-        if (answers.path.endsWith('/')) {
+        if (answers.endsWith('/')) {
             // Clears the previous line
             process.stdout.write('\u001b[1A\u001b[2K');
             return prompt(newPath);
@@ -77,54 +75,40 @@ async function main() {
     };
     let filePath;
     console.log(CONFIG_HELPER_INTRO);
-    const initialChoice = await inquirer.prompt({
-        type: 'list',
-        name: 'method',
+    const initialChoice = await select({
         message: 'How would you like to specify the file?',
         choices: [
-            { name: 'Use a "file explorer"', value: 'explore' },
-            { name: 'Type the file path manually', value: 'type' },
+            { name: 'Use a "file explorer"', value: { method: 'explore' } },
+            { name: 'Type the file path manually', value: { method: 'type' } },
         ],
     });
     if (initialChoice.method === 'explore') {
         filePath = await chooseFolder(currentPath);
     }
     else {
-        const pathInput = await inquirer.prompt({
-            type: 'input',
-            name: 'path',
+        const pathInput = await input({
             message: 'Please enter the file path:',
         });
-        filePath = pathInput.path;
+        filePath = pathInput;
     }
-    const useHaystack = await inquirer.prompt({
-        type: 'confirm',
-        name: 'use',
+    const useHaystack = await confirm({
         message: 'Would you like to use a haystack?',
     });
     let haystack;
-    if (useHaystack.use) {
-        const { x } = await inquirer.prompt({
-            type: 'input',
-            name: 'x',
+    if (useHaystack) {
+        const x = await input({
             message: 'Enter the x coordinate:',
             validate: (input) => isNaN(Number(input)) ? 'Please enter a valid number' : true,
         });
-        const { y } = await inquirer.prompt({
-            type: 'input',
-            name: 'y',
+        const y = await input({
             message: 'Enter the y coordinate:',
             validate: (input) => isNaN(Number(input)) ? 'Please enter a valid number' : true,
         });
-        const { width } = await inquirer.prompt({
-            type: 'input',
-            name: 'width',
+        const width = await input({
             message: 'Enter the width:',
             validate: (input) => isNaN(Number(input)) ? 'Please enter a valid number' : true,
         });
-        const { height } = await inquirer.prompt({
-            type: 'input',
-            name: 'height',
+        const height = await input({
             message: 'Enter the height:',
             validate: (input) => isNaN(Number(input)) ? 'Please enter a valid number' : true,
         });
@@ -132,30 +116,24 @@ async function main() {
     }
     let options = {
         ...defaultOptions,
-        ...{ haystack },
+        haystack,
         cliFile: convertFileToBase64(filePath),
     };
-    const { useAdvanced } = await inquirer.prompt([{
-            type: 'confirm',
-            name: 'useAdvanced',
-            message: 'Do you want to use the advanced mode?',
-        }]);
+    const useAdvanced = await confirm({
+        message: 'Do you want to use the advanced mode?',
+    });
     if (useAdvanced) {
-        const advancedOptions = await inquirer.prompt([
-            {
-                type: 'input',
-                name: 'contrast',
-                message: 'Enter new contrast (0.0 - 1.0):',
-                default: defaultOptions.contrast.toString(),
-                validate: (input) => {
-                    const value = parseFloat(input);
-                    return (value >= 0.0 && value <= 1.0) || 'Please enter a contrast between 0.0 and 1.0';
-                },
+        const advancedOptions = await input({
+            message: 'Enter new contrast (0.0 - 1.0):',
+            default: defaultOptions.contrast.toString(),
+            validate: (input) => {
+                const value = parseFloat(input);
+                return (value >= 0.0 && value <= 1.0) || 'Please enter a contrast between 0.0 and 1.0';
             },
-        ]);
+        });
         options = {
             ...options,
-            contrast: parseFloat(advancedOptions.contrast),
+            contrast: parseFloat(advancedOptions),
         };
     }
     console.log('\nProcessing image...\n');

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wdio/ocr-service",
   "author": "Wim Selles - wswebcreation",
   "description": "A WebdriverIO service that is using Tesseract OCR for Desktop/Mobile Web and Mobile Native App tests.",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "license": "MIT",
   "homepage": "https://webdriver.io/docs/visual-testing",
   "repository": {
@@ -26,7 +26,7 @@
     "@wdio/logger": "^8.38.0",
     "@wdio/types": "^8.39.0",
     "fuse.js": "^7.0.0",
-    "inquirer": "^10.0.1",
+    "@inquirer/prompts": "5.3.6",
     "jimp": "^0.22.12",
     "node-tesseract-ocr": "^2.2.1",
     "tesseract.js": "^5.1.0",