@testivai/witness-playwright 0.1.0 → 0.1.1

package/README.md

@@ -1,6 +1,6 @@
 # @testivai/witness-playwright
 
-**Status**: ✅ Production Ready | **Last Updated**: December 21, 2025
+**Status**: ✅ Production Ready | **Last Updated**: January 9, 2026
 
 **Project:** @testivai/witness-playwright (MVP - 1 Month Plan)
 
@@ -16,6 +16,18 @@ This package provides two main exports:
 
 To use the reporter, you need to configure it in your `playwright.config.ts` file. You must also provide your API URL and Key via environment variables (`TESTIVAI_API_URL` and `TESTIVAI_API_KEY`).
 
+**Get Your API Key:**
+1. Go to your TestivAI dashboard
+2. Create a new project
+3. Copy your API key (format: `tstvai-xxxxxxxxxxxx`)
+
+**Environment Setup:**
+```bash
+# Create .env file
+echo "TESTIVAI_API_KEY=tstvai-your-key-here" > .env
+echo "TESTIVAI_API_URL=https://core-api-147980626268.us-central1.run.app" >> .env
+```
+
 ```typescript
 // playwright.config.ts
 import { defineConfig } from '@playwright/test';

package/dist/cli/init.js

@@ -126,11 +126,17 @@ async function createConfigFile() {
         console.log('📁 Config file:', configPath);
         console.log('');
         console.log('📖 Next steps:');
-        console.log('   1. Review and customize the configuration in testivai.config.ts');
-        console.log('   2. Update your playwright.config.ts to use TestivAI reporter');
-        console.log('   3. Run your tests with: npx playwright test');
+        console.log('   1. Set up environment variables:');
+        console.log('      TESTIVAI_API_KEY=tstvai-your-key-here');
+        console.log('      TESTIVAI_API_URL=https://core-api-147980626268.us-central1.run.app');
         console.log('');
-        console.log('💡 Need help? Check the comments in testivai.config.ts for examples');
+        console.log('   2. Update your playwright.config.ts to use TestivAI reporter:');
+        console.log('      reporter: [[\'@testivai/witness-playwright/reporter\']]');
+        console.log('');
+        console.log('   3. Review and customize testivai.config.ts');
+        console.log('   4. Run your tests: npx playwright test');
+        console.log('');
+        console.log('💡 Get your API key from: https://dashboard-147980626268.us-central1.run.app');
     }
     catch (error) {
         console.error('❌ Failed to create configuration file:', error);

package/dist/index.d.ts

@@ -3,5 +3,4 @@ export declare const testivai: {
     witness: typeof snapshot;
 };
 export * from './types';
-export * from './reporter';
 export * from './ci';

package/dist/index.js

@@ -20,5 +20,4 @@ exports.testivai = {
     witness: snapshot_1.snapshot,
 };
 __exportStar(require("./types"), exports);
-__exportStar(require("./reporter"), exports);
 __exportStar(require("./ci"), exports);

package/dist/reporter-entry.d.ts

@@ -0,0 +1,2 @@
+import { TestivAIPlaywrightReporter } from './reporter';
+export = TestivAIPlaywrightReporter;

package/dist/reporter-entry.js

@@ -0,0 +1,5 @@
+"use strict";
+// Entry point for Playwright reporter
+// Playwright expects: module.exports = ReporterClass
+const reporter_1 = require("./reporter");
+module.exports = reporter_1.TestivAIPlaywrightReporter;

package/dist/reporter.d.ts

@@ -13,4 +13,4 @@ export declare class TestivAIPlaywrightReporter implements Reporter {
     onBegin(config: FullConfig, suite: Suite): Promise<void>;
     onEnd(result: FullResult): Promise<void>;
 }
-export {};
+export default TestivAIPlaywrightReporter;

package/dist/reporter.js

@@ -111,10 +111,23 @@ class TestivAIPlaywrightReporter {
                 const metadata = await fs.readJson(metadataPath);
                 const domPath = metadata.files.dom;
                 const screenshotPath = metadata.files.screenshot;
+                // Extract the first selector's layout data (usually 'body')
+                const layoutKeys = Object.keys(metadata.layout || {});
+                if (layoutKeys.length === 0) {
+                    console.warn(`Testivai Reporter: No layout data found for ${metadata.snapshotName}, skipping...`);
+                    continue;
+                }
+                const firstSelector = layoutKeys[0];
+                const layoutData = metadata.layout[firstSelector];
                 const snapshotPayload = {
                     ...metadata,
                     dom: { html: await fs.readFile(domPath, 'utf-8') },
-                    layout: metadata.layout,
+                    layout: {
+                        x: layoutData.x,
+                        y: layoutData.y,
+                        width: layoutData.width,
+                        height: layoutData.height
+                    },
                     testivaiConfig: metadata.testivaiConfig
                 };
                 snapshots.push(snapshotPayload);
@@ -129,9 +142,12 @@ class TestivAIPlaywrightReporter {
             };
             // Start batch and get upload URLs
             const startBatchResponse = await axios_1.default.post(`${this.options.apiUrl}/api/v1/ingest/start-batch`, batchPayload, {
-                headers: { 'Authorization': `Bearer ${this.options.apiKey}` },
+                headers: { 'X-API-KEY': this.options.apiKey },
             });
-            const { batchId, uploadInstructions } = startBatchResponse.data;
+            console.log('Testivai Reporter: API Response:', JSON.stringify(startBatchResponse.data, null, 2));
+            // Handle both snake_case and camelCase response formats
+            const batchId = startBatchResponse.data.batch_id || startBatchResponse.data.batchId;
+            const uploadInstructions = startBatchResponse.data.upload_instructions || startBatchResponse.data.uploadInstructions;
             // Upload files
             const uploadPromises = filesToUpload.map((file, index) => {
                 const instruction = uploadInstructions[index];
@@ -140,7 +156,7 @@ class TestivAIPlaywrightReporter {
             await Promise.all(uploadPromises);
             // Finalize batch
             await axios_1.default.post(`${this.options.apiUrl}/api/v1/ingest/finish-batch/${batchId}`, {}, {
-                headers: { 'Authorization': `Bearer ${this.options.apiKey}` },
+                headers: { 'X-API-KEY': this.options.apiKey },
             });
             console.log(`Testivai Reporter: Successfully uploaded ${snapshots.length} snapshots with Batch ID: ${batchId}`);
             // Clean up temp files
@@ -148,8 +164,14 @@ class TestivAIPlaywrightReporter {
             console.log('Testivai Reporter: Cleaned up temporary evidence files.');
         }
         catch (error) {
-            console.error('Testivai Reporter: An error occurred during the onEnd hook:', error);
+            console.error('Testivai Reporter: An error occurred during the onEnd hook:', error.message);
+            console.error('Error stack:', error.stack);
+            if (error.response) {
+                console.error('Response status:', error.response.status);
+                console.error('Response data:', JSON.stringify(error.response.data, null, 2));
+            }
         }
     }
 }
 exports.TestivAIPlaywrightReporter = TestivAIPlaywrightReporter;
+exports.default = TestivAIPlaywrightReporter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testivai/witness-playwright",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Playwright sensor for Testivai Visual Regression Test system",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
   },
   "exports": {
     ".": "./dist/index.js",
-    "./reporter": "./dist/reporter.js",
+    "./reporter": "./dist/reporter-entry.js",
     "./cli": "./dist/cli/init.js"
   },
   "scripts": {

package/progress.md

@@ -612,9 +612,60 @@ The Playwright SDK provides two main components that are production-ready:
 
 ---
 
-**Last Updated**: December 17, 2025
-**Status**: 🎉 MVP COMPLETE ✅ - Production ready
+## NPM Publication & API Key Format Update (January 9, 2026)
+
+### SDK Published to npm ✅ COMPLETE
+
+**Goal**: Publish SDK to npm registry for public consumption and update documentation for new API key format.
+
+#### Changes Implemented
+
+1. **NPM Publication** ✅
+   - Published `@testivai/witness-playwright@0.1.0` to npm registry
+   - Package now publicly available: https://www.npmjs.com/package/@testivai/witness-playwright
+   - Users can install via: `npm install @testivai/witness-playwright`
+
+2. **Documentation Updates** ✅
+   - Updated README.md with new API key format (`tstvai-xxxxxxxxxxxx`)
+   - Added "Get Your API Key" section with step-by-step instructions
+   - Added environment setup examples
+   - Updated all code examples to show correct usage
+
+3. **Integration Tests** ✅
+   - Created visual regression tests in `integration-tests/tests/visual/`
+   - Tests use published npm package (not local file reference)
+   - All 10 visual tests passing
+   - Tests capture dashboard snapshots and send to TestivAI backend
+
+4. **Example Usage** ✅
+   ```typescript
+   import { test } from '@playwright/test';
+   import { testivai } from '@testivai/witness-playwright';
+
+   test('visual test', async ({ page }, testInfo) => {
+     await page.goto('https://example.com');
+     await testivai.witness(page, testInfo, 'homepage');
+   });
+   ```
+
+#### API Key Format
+- **New Format**: `tstvai-{32-character-secure-random-string}`
+- **Example**: `tstvai-Ml5Ahr4vxHNht9WJPZ0LndDBQIkEfT9OvpXqB-NGjOs`
+- **Masked Display**: `tstvai-**************NGjOs` (last 6 chars visible)
+
+#### Files Updated
+- `README.md` - Added API key format and setup instructions
+- `package.json` - Published version 0.1.0 to npm
+- `integration-tests/package.json` - Uses npm package instead of local file
+- `integration-tests/tests/visual/dashboard-visual.spec.ts` - Example visual tests
+
+---
+
+**Last Updated**: January 9, 2026
+**Status**: 🎉 PUBLISHED TO NPM ✅ - Publicly available
+**NPM Package**: @testivai/witness-playwright@0.1.0
 **Core Features**: Evidence capture and batch upload fully functional
 **Configuration**: ✅ COMPLETE - End-to-end flow working
+**API Key Format**: tstvai-{secure-random-string}
 **Known Issues**: Minor UX improvements (retry logic, progress reporting)
 **Blocker**: None - All critical features implemented

package/src/cli/init.ts

@@ -96,11 +96,17 @@ async function createConfigFile(): Promise<void> {
     console.log('📁 Config file:', configPath);
     console.log('');
     console.log('📖 Next steps:');
-    console.log('   1. Review and customize the configuration in testivai.config.ts');
-    console.log('   2. Update your playwright.config.ts to use TestivAI reporter');
-    console.log('   3. Run your tests with: npx playwright test');
+    console.log('   1. Set up environment variables:');
+    console.log('      TESTIVAI_API_KEY=tstvai-your-key-here');
+    console.log('      TESTIVAI_API_URL=https://core-api-147980626268.us-central1.run.app');
     console.log('');
-    console.log('💡 Need help? Check the comments in testivai.config.ts for examples');
+    console.log('   2. Update your playwright.config.ts to use TestivAI reporter:');
+    console.log('      reporter: [[\'@testivai/witness-playwright/reporter\']]');
+    console.log('');
+    console.log('   3. Review and customize testivai.config.ts');
+    console.log('   4. Run your tests: npx playwright test');
+    console.log('');
+    console.log('💡 Get your API key from: https://dashboard-147980626268.us-central1.run.app');
     
   } catch (error) {
     console.error('❌ Failed to create configuration file:', error);

package/src/index.ts

@@ -5,5 +5,4 @@ export const testivai = {
 };
 
 export * from './types';
-export * from './reporter';
 export * from './ci';

package/src/reporter-entry.ts

@@ -0,0 +1,6 @@
+// Entry point for Playwright reporter
+// Playwright expects: module.exports = ReporterClass
+import { TestivAIPlaywrightReporter } from './reporter';
+
+// This will compile to: module.exports = TestivAIPlaywrightReporter
+export = TestivAIPlaywrightReporter;

package/src/reporter.ts

@@ -94,10 +94,24 @@ export class TestivAIPlaywrightReporter implements Reporter {
         const domPath = metadata.files.dom;
         const screenshotPath = metadata.files.screenshot;
 
+        // Extract the first selector's layout data (usually 'body')
+        const layoutKeys = Object.keys(metadata.layout || {});
+        if (layoutKeys.length === 0) {
+          console.warn(`Testivai Reporter: No layout data found for ${metadata.snapshotName}, skipping...`);
+          continue;
+        }
+        const firstSelector = layoutKeys[0];
+        const layoutData = metadata.layout[firstSelector];
+
         const snapshotPayload: SnapshotPayload = {
           ...metadata,
           dom: { html: await fs.readFile(domPath, 'utf-8') },
-          layout: metadata.layout,
+          layout: {
+            x: layoutData.x,
+            y: layoutData.y,
+            width: layoutData.width,
+            height: layoutData.height
+          },
           testivaiConfig: metadata.testivaiConfig
         };
         snapshots.push(snapshotPayload);
@@ -115,10 +129,14 @@ export class TestivAIPlaywrightReporter implements Reporter {
 
       // Start batch and get upload URLs
       const startBatchResponse = await axios.post(`${this.options.apiUrl}/api/v1/ingest/start-batch`, batchPayload, {
-        headers: { 'Authorization': `Bearer ${this.options.apiKey}` },
+        headers: { 'X-API-KEY': this.options.apiKey },
       });
 
-      const { batchId, uploadInstructions } = startBatchResponse.data;
+      console.log('Testivai Reporter: API Response:', JSON.stringify(startBatchResponse.data, null, 2));
+      
+      // Handle both snake_case and camelCase response formats
+      const batchId = startBatchResponse.data.batch_id || startBatchResponse.data.batchId;
+      const uploadInstructions = startBatchResponse.data.upload_instructions || startBatchResponse.data.uploadInstructions;
 
       // Upload files
       const uploadPromises = filesToUpload.map((file, index) => {
@@ -132,7 +150,7 @@ export class TestivAIPlaywrightReporter implements Reporter {
 
       // Finalize batch
       await axios.post(`${this.options.apiUrl}/api/v1/ingest/finish-batch/${batchId}`, {}, {
-        headers: { 'Authorization': `Bearer ${this.options.apiKey}` },
+        headers: { 'X-API-KEY': this.options.apiKey },
       });
 
       console.log(`Testivai Reporter: Successfully uploaded ${snapshots.length} snapshots with Batch ID: ${batchId}`);
@@ -141,8 +159,15 @@ export class TestivAIPlaywrightReporter implements Reporter {
       await fs.emptyDir(this.tempDir);
       console.log('Testivai Reporter: Cleaned up temporary evidence files.');
 
-    } catch (error) {
-      console.error('Testivai Reporter: An error occurred during the onEnd hook:', error);
+    } catch (error: any) {
+      console.error('Testivai Reporter: An error occurred during the onEnd hook:', error.message);
+      console.error('Error stack:', error.stack);
+      if (error.response) {
+        console.error('Response status:', error.response.status);
+        console.error('Response data:', JSON.stringify(error.response.data, null, 2));
+      }
     }
   }
 }
+
+export default TestivAIPlaywrightReporter;

package/tsconfig.json

@@ -7,6 +7,7 @@
     "outDir": "./dist",
     "strict": true,
     "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,