@test2doc/playwright 0.5.7 → 0.7.0

package/README.md

@@ -267,4 +267,112 @@ test.describe(withDocMeta("describe block"), async () => {
       })
     })
   })
-```
+```
+
+##### Add a label while highlighting an element
+In case the highlight is not enough, you can add a label under the highlighted element.
+
+```ts
+import { screenshot } from "@test2doc/playwright/screenshots"
+...
+
+test.describe(withDocMeta("describe block"), async () => {
+    test("test block", async ({ page }, testInfo) => {
+      ...
+      test.step("step block", async () => {
+        await page.goto("http://localhost:5173/")
+        await screenshot(
+          testInfo,
+          page.getByRole("header", {name: "Page Title"},
+          { annotation: { text: "Heading of the Page" } }
+        ))
+      })
+    })
+  })
+```
+
+##### Annotation Object Properties
+To style the highlight and label we expose a few properties on the `annotation` object. They're named similar to the [Canvas 2D context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D), which is used to render the highlight and label.
+
+- **`text`**:
+  - **Type**: `string`
+  - **Description**: The text to display for the label. This is the main content that will be rendered on the canvas.
+  - **Default**: `""` (empty string)
+
+- **`fillStyle`**:
+  - **Type**: `string`
+  - **Description**: The color of the label text. Accepts any valid CSS color value, including hex codes, RGB, RGBA, HSL, or HSLA.
+  - **Default**: `rgba(0, 0, 0, 1)` (black)
+
+- **`font`**:
+  - **Type**: `string`
+  - **Description**: Specifies the font size, font-weight, and family for the label text. Follows the CSS font property syntax (e.g., `"16px Arial"`).
+  - **Default**: `"14px Arial"`
+
+- **`strokeStyle`**:
+  - **Type**: `string`
+  - **Description**: The color of the outline around the label text. Accepts any valid CSS color value.
+  - **Default**: `rgba(0, 0, 0, 0.1)` (light black)
+
+- **`lineWidth`**:
+  - **Type**: `number`
+  - **Description**: The thickness of the outline around the label text.
+  - **Default**: `2`
+
+- **`labelBoxFillStyle`**:
+  - **Type**: `string`
+  - **Description**: The fill color of the label box surrounding the annotation text. Accepts any valid CSS color value, including hex codes, RGB, RGBA, HSL, or HSLA.
+  - **Default**: `rgba(0, 0, 0, 0)` (transparent)
+
+- **`labelBoxStrokeStyle`**:
+  - **Type**: `string`
+  - **Description**: The border color of the label box. Similar to `labelBoxFillStyle`, this property accepts any valid CSS color value.
+  - **Default**: `rgba(0, 0, 0, 0)` (transparent)
+
+- **`labelBoxLineWidth`**:
+  - **Type**: `number`
+  - **Description**: The width of the border for the label box. This property determines how thick the outline of the label box will be.
+  - **Default**: `2`
+
+- **`highlightFillStyle`**:
+  - **Type**: `string`
+  - **Description**: The fill color of the highlight box. Accepts any valid CSS color value. **Make sure to add some transparency (`rgba()`, `hsla()`, or 8-digit hex format like `#FF000080`) else it will block the element entirely.**
+  - **Default**: `rgba(255, 165, 0, 0.3)` (orange with 30% transparency)
+
+- **`highlightStrokeStyle`**:
+  - **Type**: `string`
+  - **Description**: The border color of the highlight box. Accepts any valid CSS color value.
+  - **Default**: `rgba(255, 165, 0, 1)` (solid orange)
+
+- **`highlightLineWidth`**:
+  - **Type**: `number`
+  - **Description**: The width of the border for the highlight box.
+  - **Default**: `2`
+
+```ts
+test.describe(withDocMeta("describe block"), async () => {
+    test("test block", async ({ page }, testInfo) => {
+      ...
+      test.step("step block", async () => {
+        await page.goto("http://localhost:5173/")
+        await screenshot(
+          testInfo,
+          page.getByRole("header", {name: "Page Title"},
+          { annotation: {
+            text: "Heading of the Page",
+            fillStyle: "rgba(255, 255, 255, 1)",
+            font: "bold 16px Helvetica",
+            strokeStyle: "rgba(0, 0, 0, 0.5)",
+            lineWidth: 4,
+            labelBoxFillStyle: "rgba(0, 120, 120, 0.3)",
+            labelBoxStrokeStyle: "rgba(0, 255, 0, 1)",
+            labelBoxLineWidth: 2,
+            highlightFillStyle: "rgba(255, 165, 0, 0.3)",
+            highlightStrokeStyle: "#FFA500",
+            highlightLineWidth: 2,
+          }}
+        ))
+      })
+    })
+  })
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@test2doc/playwright",
-  "version": "0.5.7",
+  "version": "0.7.0",
   "description": "A reporter that generates docs based off playwright test files",
   "keywords": [
     "documentation",
@@ -59,14 +59,17 @@
     "@playwright/test": "^1.54.1"
   },
   "devDependencies": {
-    "vitest": "^3.2.4",
-    "@types/node": "^24.0.4"
+    "@playwright/test": "^1.55.0",
+    "@types/node": "^24.0.4",
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "clean": "rm -rf dist",
     "build": "tsc --project tsconfig.json",
     "build:watch": "tsc --project tsconfig.json --watch",
-    "test": "vitest",
+    "test": "vitest run && pnpm int",
+    "unit": "vitest",
+    "int": "playwright test",
     "lint": "biome lint .",
     "format": "biome format --write ."
   }