screenright-client 0.9.12 → 0.9.14

package/dist/index.d.ts

@@ -1,14 +1,24 @@
 import { Page } from '@playwright/test';
 export declare const initializeScreenwright: (diagramId?: string) => Promise<void>;
 export declare const finalize: () => Promise<void>;
+type AnnotationDirection = "top" | "right" | "bottom" | "left";
+type AnnotationTextColor = "red" | "blue" | "black" | "white" | "yellow" | "green";
+type CaptureOptions = {
+    waitMilliseconds?: number;
+    clickLocatorSelector?: string | undefined;
+    annotationText?: string | undefined;
+    paddingPixel?: number | undefined;
+    annotationDirection?: AnnotationDirection | undefined;
+    annotationTextColor?: AnnotationTextColor | undefined;
+    description?: string | undefined;
+};
 /**
  * Get screen capture.
  * @param {Page} page - Playwright's page object.
  * @param {string} key - Unique key. cannot contain slashes.
  * @param {string} title - Page title.
  * @param {string|null} [parentKey] - Parent page key. Creates a hierarchical structure.
- * @param {{ waitMilliseconds: number }} [options] - Wait milliseconds before capture.
+ * @param {{ waitMilliseconds: number = 0, clickLocatorSelector: string, annotationText: string = "", paddingPixel: number = 4, annotationDirection: AnnotationDirection = "bottom", AnnotationTextColor = "red" }} [options] - Wait milliseconds before capture.
 */
-export declare const capture: (page: Page, key: string, title: string, parentKey?: string, options?: {
-    waitMilliseconds: number;
-}) => Promise<void>;
+export declare const capture: (page: Page, key: string, title: string, parentKey?: string | undefined, options?: CaptureOptions) => Promise<void>;
+export {};

package/dist/index.js

@@ -11,7 +11,7 @@ import fetch from 'node-fetch';
 import process from 'node:process';
 import FormData from 'form-data';
 import { setTimeout } from 'timers/promises';
-const result = { diagramId: "", screenshotItemAttributes: [] };
+const result = { diagramId: "", screenshotItemAttributes: [], annotations: {} };
 let deploymentId = null;
 const deploymentToken = process.env.SCREENRIGHT_DEPLOYMENT_TOKEN || '';
 const baseUrl = () => {
@@ -51,7 +51,7 @@ export const finalize = () => __awaiter(void 0, void 0, void 0, function* () {
     }
     yield fetch(`${baseUrl()}/diagrams/${result.diagramId}/deployments/${deploymentId}/done_upload`, {
         method: 'PUT',
-        body: JSON.stringify({ deployment_token: deploymentToken, blueprint: JSON.stringify({ screenshotItemAttributes: result.screenshotItemAttributes }) }),
+        body: JSON.stringify({ deployment_token: deploymentToken, blueprint: JSON.stringify({ screenshotItemAttributes: result.screenshotItemAttributes, annotations: result.annotations }) }),
         headers: { 'Content-Type': 'application/json' }
     });
     deploymentId = null;
@@ -62,9 +62,9 @@ export const finalize = () => __awaiter(void 0, void 0, void 0, function* () {
  * @param {string} key - Unique key. cannot contain slashes.
  * @param {string} title - Page title.
  * @param {string|null} [parentKey] - Parent page key. Creates a hierarchical structure.
- * @param {{ waitMilliseconds: number }} [options] - Wait milliseconds before capture.
+ * @param {{ waitMilliseconds: number = 0, clickLocatorSelector: string, annotationText: string = "", paddingPixel: number = 4, annotationDirection: AnnotationDirection = "bottom", AnnotationTextColor = "red" }} [options] - Wait milliseconds before capture.
 */
-export const capture = (page, key, title, parentKey, options = { waitMilliseconds: 0 }) => __awaiter(void 0, void 0, void 0, function* () {
+export const capture = (page, key, title, parentKey, options = {}) => __awaiter(void 0, void 0, void 0, function* () {
     if (deploymentId === null) {
         return;
     }
@@ -72,7 +72,14 @@ export const capture = (page, key, title, parentKey, options = { waitMillisecond
         errorOccurred('Capture argument[key] cannot contain slashes.');
         return;
     }
-    const { waitMilliseconds } = options;
+    let { waitMilliseconds, clickLocatorSelector, annotationText, paddingPixel, annotationDirection, annotationTextColor, description } = options;
+    waitMilliseconds = waitMilliseconds || 0;
+    clickLocatorSelector = clickLocatorSelector || undefined;
+    annotationText = annotationText || "";
+    paddingPixel = paddingPixel || 4;
+    annotationDirection = annotationDirection || "bottom";
+    annotationTextColor = annotationTextColor || "red";
+    description = description || "";
     if (waitMilliseconds) {
         const nWaitMilliseconds = Number(waitMilliseconds);
         if (0 < waitMilliseconds) {
@@ -106,6 +113,7 @@ export const capture = (page, key, title, parentKey, options = { waitMillisecond
         title,
         url: page.url(),
         children: [],
+        description: "",
     };
     if (parentKey) {
         const searchParent = (attributes) => {
@@ -122,4 +130,21 @@ export const capture = (page, key, title, parentKey, options = { waitMillisecond
     else {
         result.screenshotItemAttributes.push(attribute);
     }
+    if (clickLocatorSelector !== undefined) {
+        const locator = page.locator(clickLocatorSelector);
+        const bounding = (yield locator.boundingBox());
+        const annotation = {
+            x: bounding.x,
+            y: bounding.y,
+            width: bounding.width,
+            height: bounding.height,
+            text: annotationText,
+            paddingPixel,
+            direction: annotationDirection,
+            textColor: annotationTextColor,
+            description,
+        };
+        result.annotations[key] = annotation;
+        yield locator.click();
+    }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "screenright-client",
-  "version": "0.9.12",
+  "version": "0.9.14",
   "description": "screenright's nodejs client library",
   "type": "module",
   "main": "dist/index.js",

package/src/index.ts

@@ -10,14 +10,27 @@ type ScreenshotItemAttribute = {
   title: string
   url: string
   children: ScreenshotItemAttribute[]
+  description: string
 }
 
 type Result = {
   diagramId: string
   screenshotItemAttributes: ScreenshotItemAttribute[]
+  annotations: { [index: string]: Annotation }
 }
 
-const result: Result = { diagramId: "", screenshotItemAttributes: [] }
+type Annotation = {
+  x: number
+  y: number
+  width: number
+  height: number
+  text: string
+  paddingPixel: number
+  direction: AnnotationDirection
+  textColor: AnnotationTextColor
+}
+
+const result: Result = { diagramId: "", screenshotItemAttributes: [], annotations: {} }
 
 let deploymentId: string | null = null
 const deploymentToken: string = process.env.SCREENRIGHT_DEPLOYMENT_TOKEN || ''
@@ -67,27 +80,40 @@ export const finalize = async () => {
 
   await fetch(`${baseUrl()}/diagrams/${result.diagramId}/deployments/${deploymentId}/done_upload`, {
     method: 'PUT',
-    body: JSON.stringify({ deployment_token: deploymentToken, blueprint: JSON.stringify({ screenshotItemAttributes: result.screenshotItemAttributes}) }),
+    body: JSON.stringify({ deployment_token: deploymentToken, blueprint: JSON.stringify({ screenshotItemAttributes: result.screenshotItemAttributes, annotations: result.annotations}) }),
     headers: { 'Content-Type': 'application/json' }
   })
 
   deploymentId = null
 }
 
+type AnnotationDirection = "top" | "right" | "bottom" | "left"
+type AnnotationTextColor = "red" | "blue" | "black" | "white" | "yellow" | "green"
+
+type CaptureOptions = {
+  waitMilliseconds?: number
+  clickLocatorSelector?: string | undefined
+  annotationText?: string | undefined
+  paddingPixel?: number | undefined
+  annotationDirection?: AnnotationDirection | undefined
+  annotationTextColor?: AnnotationTextColor | undefined
+  description?: string | undefined
+}
+
 /**
  * Get screen capture.
  * @param {Page} page - Playwright's page object.
  * @param {string} key - Unique key. cannot contain slashes.
  * @param {string} title - Page title.
  * @param {string|null} [parentKey] - Parent page key. Creates a hierarchical structure.
- * @param {{ waitMilliseconds: number }} [options] - Wait milliseconds before capture.
+ * @param {{ waitMilliseconds: number = 0, clickLocatorSelector: string, annotationText: string = "", paddingPixel: number = 4, annotationDirection: AnnotationDirection = "bottom", AnnotationTextColor = "red" }} [options] - Wait milliseconds before capture.
 */
 export const capture = async (
   page: Page,
   key: string,
   title: string,
-  parentKey?: string,
-  options: { waitMilliseconds: number } = { waitMilliseconds: 0 },
+  parentKey?: string | undefined,
+  options: CaptureOptions = {}
 ) => {
   if (deploymentId === null) {
     return
@@ -98,7 +124,23 @@ export const capture = async (
     return
   }
 
-  const { waitMilliseconds } = options
+  let {
+    waitMilliseconds,
+    clickLocatorSelector,
+    annotationText,
+    paddingPixel,
+    annotationDirection,
+    annotationTextColor,
+    description
+  } = options
+
+  waitMilliseconds = waitMilliseconds || 0
+  clickLocatorSelector = clickLocatorSelector || undefined
+  annotationText = annotationText || ""
+  paddingPixel = paddingPixel || 4
+  annotationDirection = annotationDirection || "bottom"
+  annotationTextColor = annotationTextColor || "red"
+  description = description || ""
 
   if (waitMilliseconds) {
     const nWaitMilliseconds = Number(waitMilliseconds)
@@ -137,6 +179,7 @@ export const capture = async (
     title,
     url: page.url(),
     children: [],
+    description: "",
   }
 
   if (parentKey) {
@@ -155,4 +198,24 @@ export const capture = async (
   } else {
     result.screenshotItemAttributes.push(attribute)
   }
+
+  if (clickLocatorSelector !== undefined) {
+    const locator = page.locator(clickLocatorSelector!)
+    const bounding = (await locator.boundingBox())!
+    const annotation = {
+      x: bounding.x,
+      y: bounding.y,
+      width: bounding.width,
+      height: bounding.height,
+      text: annotationText,
+      paddingPixel,
+      direction: annotationDirection,
+      textColor: annotationTextColor,
+      description,
+    }
+
+    result.annotations[key] = annotation
+
+    await locator.click()
+  }
 }