screenright-client 0.9.13 → 0.9.20

package/README.md

@@ -1,15 +1,67 @@
 # ScreenRight nodejs client library.
 
-## Environments
+## Installation
+```
+npm i screenright-client
+```
+
+## Setup environments
 
 ### Diagram Id
 
 ```
-SCREENRIGHT_DIAGRAM_ID
+export SCREENRIGHT_DIAGRAM_ID=xxxxxxx
 ```
 
 ### Deployment Token
 ```
-SCREENRIGHT_DEPLOYMENT_TOKEN
+export SCREENRIGHT_DEPLOYMENT_TOKEN=xxxxxxx
+```
+
+## Implementation
+
+### with "Playwright"
+
+```
+import { capture, initializeScreenwright, finalize } from "screenright-client"
+
+test("basic test", async ({ page }) => {
+
+  await initializeScreenwright() // The diagram ID specified in the environment variable is used.
+  // await initializeScreenwright(diagramId) <- The diagram ID specified in the argument is used.
+
+
+  // With the key home, capture with the title "Home Screen".
+  await capture(page, "home", "Home Screen")
+
+
+  // Created with "setting" as the parent screen.
+  await capture(
+    page,
+    "setting|projects",
+    "Project list",
+    "setting"
+  )
+
+
+  // Specify options.
+  await capture(
+    page,
+    "home",
+    "Home Screen",
+    undefined,
+    {
+      waitMilliseconds: 200, // wait before capturing.
+      clickLocatorSelector: `button:text("delete)`, // specify the element you want to click.
+      annotationText: "Click here!", // specify the annotation.
+      annotationDirection: "bottom", // Specifies the position of the annotation from the element.
+      paddingPixel: 4, // Specifies the padding for the border surrounding the element.
+      annotationTextColor: "red" | "blue" | "black" | "white" | "yellow" | "green"
+      description: "write a description"
+    }
+  )
+
+  await finalize()
+})
 ```
 

package/dist/index.d.ts

@@ -10,6 +10,7 @@ type CaptureOptions = {
     paddingPixel?: number | undefined;
     annotationDirection?: AnnotationDirection | undefined;
     annotationTextColor?: AnnotationTextColor | undefined;
+    description?: string | undefined;
 };
 /**
  * Get screen capture.

package/dist/index.js

@@ -72,13 +72,14 @@ export const capture = (page, key, title, parentKey, options = {}) => __awaiter(
         errorOccurred('Capture argument[key] cannot contain slashes.');
         return;
     }
-    let { waitMilliseconds, clickLocatorSelector, annotationText, paddingPixel, annotationDirection, annotationTextColor } = 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) {
@@ -112,6 +113,7 @@ export const capture = (page, key, title, parentKey, options = {}) => __awaiter(
         title,
         url: page.url(),
         children: [],
+        description: "",
     };
     if (parentKey) {
         const searchParent = (attributes) => {
@@ -140,6 +142,7 @@ export const capture = (page, key, title, parentKey, options = {}) => __awaiter(
             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.13",
+  "version": "0.9.20",
   "description": "screenright's nodejs client library",
   "type": "module",
   "main": "dist/index.js",

package/src/index.ts

@@ -1,4 +1,3 @@
-import * as fs from 'fs'
 import { Page } from '@playwright/test'
 import fetch from 'node-fetch'
 import process from 'node:process'
@@ -10,6 +9,7 @@ type ScreenshotItemAttribute = {
   title: string
   url: string
   children: ScreenshotItemAttribute[]
+  description: string
 }
 
 type Result = {
@@ -34,9 +34,7 @@ const result: Result = { diagramId: "", screenshotItemAttributes: [], annotation
 let deploymentId: string | null = null
 const deploymentToken: string = process.env.SCREENRIGHT_DEPLOYMENT_TOKEN || ''
 
-const baseUrl = () => {
-  return `${process.env.SCREENRIGHT_ENDPOINT}/client_api`
-}
+const baseUrl = `${process.env.SCREENRIGHT_ENDPOINT || 'https://screenright.app'}/client_api`
 
 const errorOccurred = (message: string) => {
   console.error('[ScreenRight] Error occurred', message)
@@ -54,7 +52,7 @@ export const initializeScreenwright = async (diagramId?: string) => {
   result.diagramId = _diagramId
 
   try {
-    const response = await fetch(`${baseUrl()}/diagrams/${result.diagramId}/deployments`, {
+    const response = await fetch(`${baseUrl}/diagrams/${result.diagramId}/deployments`, {
       method: 'POST',
       body: JSON.stringify({ deployment_token: deploymentToken }),
       headers: { 'Content-Type': 'application/json' }
@@ -77,9 +75,15 @@ export const finalize = async () => {
     return
   }
 
-  await fetch(`${baseUrl()}/diagrams/${result.diagramId}/deployments/${deploymentId}/done_upload`, {
+  await fetch(`${baseUrl}/diagrams/${result.diagramId}/deployments/${deploymentId}/done_upload`, {
     method: 'PUT',
-    body: JSON.stringify({ deployment_token: deploymentToken, blueprint: JSON.stringify({ screenshotItemAttributes: result.screenshotItemAttributes, annotations: result.annotations}) }),
+    body: JSON.stringify({
+      deployment_token: deploymentToken,
+      blueprint: JSON.stringify({
+        screenshotItemAttributes: result.screenshotItemAttributes,
+        annotations: result.annotations
+      })
+    }),
     headers: { 'Content-Type': 'application/json' }
   })
 
@@ -96,6 +100,7 @@ type CaptureOptions = {
   paddingPixel?: number | undefined
   annotationDirection?: AnnotationDirection | undefined
   annotationTextColor?: AnnotationTextColor | undefined
+  description?: string | undefined
 }
 
 /**
@@ -104,7 +109,13 @@ type CaptureOptions = {
  * @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 = 0, clickLocatorSelector: string, annotationText: string = "", paddingPixel: number = 4, annotationDirection: AnnotationDirection = "bottom", AnnotationTextColor = "red" }} [options] - Wait milliseconds before capture.
+ * @param {{}} [options] -
+ *   waitMilliseconds: number = 0, Wait milliseconds before capture.
+ *   clickLocatorSelector: string,
+ *   annotationText: string = "",
+ *   paddingPixel: number = 4,
+ *   annotationDirection: AnnotationDirection = "bottom",
+ *   AnnotationTextColor = "red"
 */
 export const capture = async (
   page: Page,
@@ -128,7 +139,8 @@ export const capture = async (
     annotationText,
     paddingPixel,
     annotationDirection,
-    annotationTextColor
+    annotationTextColor,
+    description
   } = options
 
   waitMilliseconds = waitMilliseconds || 0
@@ -137,6 +149,7 @@ export const capture = async (
   paddingPixel = paddingPixel || 4
   annotationDirection = annotationDirection || "bottom"
   annotationTextColor = annotationTextColor || "red"
+  description = description || ""
 
   if (waitMilliseconds) {
     const nWaitMilliseconds = Number(waitMilliseconds)
@@ -152,7 +165,7 @@ export const capture = async (
 
     formData.append('file', buffer, fileName)
 
-    const response = await fetch(`${baseUrl()}/diagrams/${result.diagramId}/deployments/${deploymentId}/screenshot`, {
+    const response = await fetch(`${baseUrl}/diagrams/${result.diagramId}/deployments/${deploymentId}/screenshot`, {
       method: 'POST',
       headers: {
         'X-File-Key': key,
@@ -175,6 +188,7 @@ export const capture = async (
     title,
     url: page.url(),
     children: [],
+    description: "",
   }
 
   if (parentKey) {
@@ -206,6 +220,7 @@ export const capture = async (
       paddingPixel,
       direction: annotationDirection,
       textColor: annotationTextColor,
+      description,
     }
 
     result.annotations[key] = annotation