askui 0.4.0 → 0.5.0

package/dist/esm/execution/dsl.js

@@ -794,6 +794,120 @@ export class FluentFilters extends FluentBase {
 }
 // Relations
 export class FluentFiltersOrRelations extends FluentFilters {
+    /**
+     * Logic or operator
+     *
+     * **Examples:**
+     * ```text
+     * scene 1
+     * --------------  ---------------
+     * |  button    |  |  icon       |
+     * --------------  ---------------
+     *
+     * scene 2
+     * --------------  ---------------
+     * |  button    |  |  text       |
+     * --------------  ---------------
+     *
+     * ```
+     * In case, that your reference element can have multiple values, in the following example, the element right of the button can be either icon or text.
+     * You can use **the `or()` relation**, so your teststep is valid for both scenes
+     * ```typescript
+     * const button = await aui.get().button().rightOf().icon().or().text().exec();
+     * console.log(button);
+     * ```
+     * Returns the same button for both cases
+     * ```text
+     *  console output: [
+     *   DetectedElement {
+     *      name: 'BUTTON',
+     *      text: 'button',
+     *      colors: [ 'red', 'black', 'red' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 900,
+     *         ymin: 910,
+     *         xmax: 920,
+     *         ymax: 930
+     *      }
+     *   }
+     *  ]
+     * ```
+     *
+     * @return {FluentFilters}
+     */
+    or() {
+        this._textStr = 'or';
+        return new FluentFilters(this);
+    }
+    /**
+     * Logic and operator
+     *
+     * **Examples:**
+     * ```text
+     * example scene:
+     *  --------------------------   --------------------------
+     *  |  icon user colored black | |  icon  user colored red |
+     *  --------------------------   --------------------------
+     * ```
+     * ```typescript
+     * const icons = await aui.get().icon().withText('user').exec();
+     * console.log(icons);
+     * ```
+     * Using only the filter withText, the get command will return both icons because they share the same text
+     * ```text
+     * console output: [
+     *   DetectedElement {
+     *      name: 'ICON',
+     *      text: 'user',
+     *      colors: [ 'black', 'black', 'black' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 1000,
+     *         ymin: 1010,
+     *         xmax: 1020,
+     *         ymax: 1030
+     *      }
+     *   },
+     *   DetectedElement {
+     *      name: 'ICON',
+     *      text: 'user',
+     *      colors: [ 'red', 'red', 'red' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 900,
+     *         ymin: 910,
+     *         xmax: 920,
+     *         ymax: 930
+     *      }
+     *   }
+     *  ]
+     * ```
+     * You can combine filters with **the `and()` relation** and specify exactly which icon you want
+     * ```typescript
+     * const icons = await aui.get().icon().withText('user').and().colored('red').exec()
+     * console.log(icons)
+     * ```
+     * The get command returns only the red icon although both icons have the same text
+     * ```text
+     *  console output: [
+     *   DetectedElement {
+     *      name: 'ICON',
+     *      text: 'user',
+     *      colors: [ 'red', 'red', 'red' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 900,
+     *         ymin: 910,
+     *         xmax: 920,
+     *         ymax: 930
+     *      }
+     *   }
+     *  ]
+     * ```
+     *
+     * @return {FluentFilters}
+     */
+    and() {
+        this._textStr = 'and';
+        return new FluentFilters(this);
+    }
     /**
      * Filters for an element inside another element.
      *
@@ -1704,6 +1818,120 @@ export class FluentFiltersCondition extends FluentBase {
 }
 // Relations
 export class FluentFiltersOrRelationsCondition extends FluentFiltersCondition {
+    /**
+     * Logic or operator
+     *
+     * **Examples:**
+     * ```text
+     * scene 1
+     * --------------  ---------------
+     * |  button    |  |  icon       |
+     * --------------  ---------------
+     *
+     * scene 2
+     * --------------  ---------------
+     * |  button    |  |  text       |
+     * --------------  ---------------
+     *
+     * ```
+     * In case, that your reference element can have multiple values, in the following example, the element right of the button can be either icon or text.
+     * You can use **the `or()` relation**, so your teststep is valid for both scenes
+     * ```typescript
+     * const button = await aui.get().button().rightOf().icon().or().text().exec();
+     * console.log(button);
+     * ```
+     * Returns the same button for both cases
+     * ```text
+     *  console output: [
+     *   DetectedElement {
+     *      name: 'BUTTON',
+     *      text: 'button',
+     *      colors: [ 'red', 'black', 'red' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 900,
+     *         ymin: 910,
+     *         xmax: 920,
+     *         ymax: 930
+     *      }
+     *   }
+     *  ]
+     * ```
+     *
+     * @return {FluentFiltersCondition}
+     */
+    or() {
+        this._textStr = 'or';
+        return new FluentFiltersCondition(this);
+    }
+    /**
+     * Logic and operator
+     *
+     * **Examples:**
+     * ```text
+     * example scene:
+     *  --------------------------   --------------------------
+     *  |  icon user colored black | |  icon  user colored red |
+     *  --------------------------   --------------------------
+     * ```
+     * ```typescript
+     * const icons = await aui.get().icon().withText('user').exec();
+     * console.log(icons);
+     * ```
+     * Using only the filter withText, the get command will return both icons because they share the same text
+     * ```text
+     * console output: [
+     *   DetectedElement {
+     *      name: 'ICON',
+     *      text: 'user',
+     *      colors: [ 'black', 'black', 'black' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 1000,
+     *         ymin: 1010,
+     *         xmax: 1020,
+     *         ymax: 1030
+     *      }
+     *   },
+     *   DetectedElement {
+     *      name: 'ICON',
+     *      text: 'user',
+     *      colors: [ 'red', 'red', 'red' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 900,
+     *         ymin: 910,
+     *         xmax: 920,
+     *         ymax: 930
+     *      }
+     *   }
+     *  ]
+     * ```
+     * You can combine filters with **the `and()` relation** and specify exactly which icon you want
+     * ```typescript
+     * const icons = await aui.get().icon().withText('user').and().colored('red').exec()
+     * console.log(icons)
+     * ```
+     * The get command returns only the red icon although both icons have the same text
+     * ```text
+     *  console output: [
+     *   DetectedElement {
+     *      name: 'ICON',
+     *      text: 'user',
+     *      colors: [ 'red', 'red', 'red' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 900,
+     *         ymin: 910,
+     *         xmax: 920,
+     *         ymax: 930
+     *      }
+     *   }
+     *  ]
+     * ```
+     *
+     * @return {FluentFiltersCondition}
+     */
+    and() {
+        this._textStr = 'and';
+        return new FluentFiltersCondition(this);
+    }
     /**
      * Filters for an element inside another element.
      *
@@ -2922,6 +3150,120 @@ export class FluentFiltersGetter extends FluentBase {
 }
 // Relations
 export class FluentFiltersOrRelationsGetter extends FluentFiltersGetter {
+    /**
+     * Logic or operator
+     *
+     * **Examples:**
+     * ```text
+     * scene 1
+     * --------------  ---------------
+     * |  button    |  |  icon       |
+     * --------------  ---------------
+     *
+     * scene 2
+     * --------------  ---------------
+     * |  button    |  |  text       |
+     * --------------  ---------------
+     *
+     * ```
+     * In case, that your reference element can have multiple values, in the following example, the element right of the button can be either icon or text.
+     * You can use **the `or()` relation**, so your teststep is valid for both scenes
+     * ```typescript
+     * const button = await aui.get().button().rightOf().icon().or().text().exec();
+     * console.log(button);
+     * ```
+     * Returns the same button for both cases
+     * ```text
+     *  console output: [
+     *   DetectedElement {
+     *      name: 'BUTTON',
+     *      text: 'button',
+     *      colors: [ 'red', 'black', 'red' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 900,
+     *         ymin: 910,
+     *         xmax: 920,
+     *         ymax: 930
+     *      }
+     *   }
+     *  ]
+     * ```
+     *
+     * @return {FluentFiltersGetter}
+     */
+    or() {
+        this._textStr = 'or';
+        return new FluentFiltersGetter(this);
+    }
+    /**
+     * Logic and operator
+     *
+     * **Examples:**
+     * ```text
+     * example scene:
+     *  --------------------------   --------------------------
+     *  |  icon user colored black | |  icon  user colored red |
+     *  --------------------------   --------------------------
+     * ```
+     * ```typescript
+     * const icons = await aui.get().icon().withText('user').exec();
+     * console.log(icons);
+     * ```
+     * Using only the filter withText, the get command will return both icons because they share the same text
+     * ```text
+     * console output: [
+     *   DetectedElement {
+     *      name: 'ICON',
+     *      text: 'user',
+     *      colors: [ 'black', 'black', 'black' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 1000,
+     *         ymin: 1010,
+     *         xmax: 1020,
+     *         ymax: 1030
+     *      }
+     *   },
+     *   DetectedElement {
+     *      name: 'ICON',
+     *      text: 'user',
+     *      colors: [ 'red', 'red', 'red' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 900,
+     *         ymin: 910,
+     *         xmax: 920,
+     *         ymax: 930
+     *      }
+     *   }
+     *  ]
+     * ```
+     * You can combine filters with **the `and()` relation** and specify exactly which icon you want
+     * ```typescript
+     * const icons = await aui.get().icon().withText('user').and().colored('red').exec()
+     * console.log(icons)
+     * ```
+     * The get command returns only the red icon although both icons have the same text
+     * ```text
+     *  console output: [
+     *   DetectedElement {
+     *      name: 'ICON',
+     *      text: 'user',
+     *      colors: [ 'red', 'red', 'red' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 900,
+     *         ymin: 910,
+     *         xmax: 920,
+     *         ymax: 930
+     *      }
+     *   }
+     *  ]
+     * ```
+     *
+     * @return {FluentFiltersGetter}
+     */
+    and() {
+        this._textStr = 'and';
+        return new FluentFiltersGetter(this);
+    }
     /**
      * Filters for an element inside another element.
      *
@@ -3102,7 +3444,32 @@ export class FluentFiltersOrRelationsGetter extends FluentFiltersGetter {
 // Commands
 export class Getter extends FluentCommand {
     /**
-     * Returns the filtered element
+     * Returns an array with all filtered elements.
+     * A detected element has the following properties:
+     * - `name` of the element
+     * - `text` content of element
+     * - `colors` of element
+     * - `bndbox`: location of element described with coordinates of a bounding box
+     * **Examples:**
+     * ```typescript
+     * const text = await aui.get().text().withText('Sign').exec();
+     * console.log(text);
+     * ```
+     * ```text
+     *  console output: [
+     *   DetectedElement {
+     *      name: 'TEXT',
+     *      text: 'Sign In',
+     *      colors: [ 'black', 'gray', 'gray' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 1128.2720982142857,
+     *         ymin: 160.21332310267857,
+     *         xmax: 1178.8204241071428,
+     *         ymax: 180.83512834821428
+     *      }
+     *  }
+     *  ]
+     * ```
      *
      * @return {FluentFiltersGetter}
      */
@@ -3111,7 +3478,43 @@ export class Getter extends FluentCommand {
         return new FluentFiltersGetter(this);
     }
     /**
-     * Returns all detected elements
+     * Returns an array with all detected elements.
+     * A detected element has the following properties:
+     * - `name` of the element
+     * - `text` content of element
+     * - `colors` of element
+     * - `bndbox`: location of element described with coordinates of a bounding box
+     * **Examples:**
+     * ```typescript
+     * const detectedElements = await aui.getAll().exec();
+     * console.log(detectedElements);
+     * ```
+     * ```text
+     *  console output: [
+     *   DetectedElement {
+     *      name: 'TEXT',
+     *      text: 'Sign In',
+     *      colors: [ 'black', 'gray', 'gray' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 1128.2720982142857,
+     *         ymin: 160.21332310267857,
+     *         xmax: 1178.8204241071428,
+     *         ymax: 180.83512834821428
+     *      },
+     *   DetectedElement {
+     *      name: 'ICON',
+     *      text: 'search',
+     *      colors: [ 'black', 'red', 'gray' ],
+     *      bndbox: BoundingBox {
+     *         xmin: 250.8204241071428,
+     *         ymin: 300.21332310267857,
+     *         xmax: 450.6304241071428,
+     *         ymax: 950.47812834821428
+     *      },
+     *      ... 381 more items
+     *  }
+     *  ]
+     * ```
      *
      * @return {ExecGetter}
      */

package/dist/esm/lib/copy-example-project.js

@@ -1,15 +1,46 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { Command } from 'commander';
 import path from 'path';
 import fs from 'fs-extra';
 import { getPathToNodeModulesRoot } from '../utils/path';
+import { logger } from './logger';
 const createProgram = () => {
     const program = new Command('askui');
     program.usage('<command> [options]');
     return program;
 };
-function copyExampleProject() {
-    const exampleProjectPath = path.join('example_projects_templates', 'typescript_jest');
-    fs.copySync(path.join(getPathToNodeModulesRoot(), exampleProjectPath), '.');
+function replaceStringInFile(filePath, replace, replacement) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const data = yield fs.readFile(filePath, 'utf8');
+            const result = data.replace(replace, replacement);
+            yield fs.writeFile(filePath, result, 'utf8');
+        }
+        catch (error) {
+            logger.error(`Could not replace '${replace}' with '${replacement}' in file '${path}'`);
+            logger.error(error.message);
+        }
+    });
+}
+function copyExampleProject(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const exampleProjectPath = path.join('example_projects_templates', 'typescript_jest');
+        fs.copySync(path.join(getPathToNodeModulesRoot(), exampleProjectPath), '.');
+        if (options['workspaceId']) {
+            yield replaceStringInFile('./test/helper/jest.setup.ts', '<your workspace id>', options['workspaceId']);
+        }
+        if (options['accessToken']) {
+            yield replaceStringInFile('./test/helper/jest.setup.ts', '<your access token>', options['accessToken']);
+        }
+    });
 }
 export function init(argv) {
     const args = argv || process.argv;
@@ -17,6 +48,11 @@ export function init(argv) {
     program
         .command('init')
         .description('creates a typescript example project')
-        .action(() => { copyExampleProject(); });
+        .option('-w, --workspace-id <value>', 'a workspace id')
+        .option('-a, --access-token <value>', 'an access token for the workspace with the id')
+        .usage('[-w workspace_id] [-a access_token]')
+        .action((opts) => __awaiter(this, void 0, void 0, function* () {
+        yield copyExampleProject(opts);
+    }));
     return program.parse(args);
 }

package/dist/example_projects_templates/typescript_jest/test/helper/jest.setup.ts

@@ -20,7 +20,12 @@ beforeAll(async () => {
 
   await uiController.start();
 
-  aui = await UiControlClient.build();
+  aui = await UiControlClient.build({
+    credentials: {
+      workspaceId: '<your workspace id>',
+      token: '<your access token>',
+    },
+  });
 
   await aui.connect();
 });

package/dist/example_projects_templates/typescript_jest/test/my-first-askui-test-suite.test.ts

@@ -2,9 +2,14 @@ import { aui } from './helper/jest.setup';
 
 describe('jest with askui', () => {
   it('should click on text', async () => {
+    // Run this to see what askui annotates
+    await aui.annotateInteractively();
+
+    await aui.moveMouse(0, 0).exec();
     await aui
       .click()
       .text()
+      .withText('Click on this text right here!')
       .exec();
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "askui",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "license": "MIT",
     "author": "askui GmbH <info@askui.com> (http://www.askui.com/)",
     "description": "Reliable, automated end-to-end-testing that depends on what is shown on your screen instead of the technology you are running on",

package/dist/cjs/core/annotation/annotation-json.d.ts

@@ -1,5 +0,0 @@
-import { DetectedElement } from '../model/annotation-result/detected-element';
-export interface AnnotationJson {
-    image: string;
-    objects: DetectedElement[];
-}

package/dist/cjs/core/annotation/annotation-json.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/core/annotation/annotation-json.d.ts

@@ -1,5 +0,0 @@
-import { DetectedElement } from '../model/annotation-result/detected-element';
-export interface AnnotationJson {
-    image: string;
-    objects: DetectedElement[];
-}

package/dist/esm/core/annotation/annotation-json.js

@@ -1 +0,0 @@
-export {};