{"_id":"@dsathishupm/playwright-clarity-reporter","_rev":"2-6d02d77ebd068effa7a2380c460c0bb6","name":"@dsathishupm/playwright-clarity-reporter","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@dsathishupm/playwright-clarity-reporter","version":"1.0.0","_id":"@dsathishupm/playwright-clarity-reporter@1.0.0","maintainers":[{"name":"dsathishupm","email":"dsathishupm@gmail.com"}],"bin":{"create-clarity-report":"cli.js"},"dist":{"shasum":"d85ad41b24214afe63080954ceb4d91fccc3e68a","tarball":"https://registry.npmjs.org/@dsathishupm/playwright-clarity-reporter/-/playwright-clarity-reporter-1.0.0.tgz","fileCount":5,"integrity":"sha512-wF96lApBSpzOwObkOUH+Qb8GGcH0jlv/5J7+xytVEVyw6mOT/UPr9lhH0hLmzpHD76l63j2EBH4xtAMBhx5V/w==","signatures":[{"sig":"MEUCIFqHo91PuMu64BPnp2n4dtnLHhxpYnpeIme7k5g7G7ifAiEAktamz2RkwZwuaz+UQLIw+99EcVrfcnNf0Z8PC5JKecA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":830893},"main":"cli.js","type":"module","engines":{"node":">=18.0.0"},"gitHead":"ecbec4ad69c47d5204b9a86597c7f152e4021b5b","scripts":{"dev":"npx vite","build":"npx vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"dsathishupm","email":"dsathishupm@gmail.com"},"_npmVersion":"11.5.2","description":"A clean, modern, and intelligent HTML report viewer for Playwright test results, designed for clarity.","directories":{},"_nodeVersion":"20.17.0","dependencies":{"fs-extra":"^11.2.0","commander":"^12.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.3.6","react":"^19.1.1","recharts":"^3.2.1","react-dom":"^19.1.1","typescript":"^5.3.3","@types/react":"^18.2.0","@google/genai":"^1.21.0","@types/fs-extra":"^11.0.4","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"_npmOperationalInternal":{"tmp":"tmp/playwright-clarity-reporter_1.0.0_1759133270886_0.900010077977103","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@dsathishupm/playwright-clarity-reporter","version":"1.0.1","description":"A clean, modern, and intelligent HTML report viewer for Playwright test results, designed for clarity.","type":"module","main":"cli.js","bin":{"create-clarity-report":"cli.js"},"scripts":{"dev":"npx vite","build":"npx vite build","prepublishOnly":"npm run build"},"dependencies":{"commander":"^12.0.0","fs-extra":"^11.2.0"},"devDependencies":{"@google/genai":"^1.21.0","@types/fs-extra":"^11.0.4","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0","react":"^19.1.1","react-dom":"^19.1.1","recharts":"^3.2.1","typescript":"^5.3.3","vite":"^6.3.6"},"engines":{"node":">=18.0.0"},"_id":"@dsathishupm/playwright-clarity-reporter@1.0.1","gitHead":"ecbec4ad69c47d5204b9a86597c7f152e4021b5b","_nodeVersion":"20.17.0","_npmVersion":"11.5.2","dist":{"integrity":"sha512-+c/3X10h/glrUA4Sa2Z695U73KMMmNbHvmXf631aJgyu4Ga5/A53CGSTn7EPmoAA/HU7OoGW6YWBI5V8gES+ew==","shasum":"39b66ac4f4a90b3b7cf1e63f71edb4a396185b43","tarball":"https://registry.npmjs.org/@dsathishupm/playwright-clarity-reporter/-/playwright-clarity-reporter-1.0.1.tgz","fileCount":5,"unpackedSize":830911,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCaZ0jG+DyOwI5Bxidic+monXFSmkZFs/qD5gAxZubB1AIgUOTwTuy8y5OJv5jQoeKiQLUYJ1cMdfI1GGS/LyWab6c="}]},"_npmUser":{"name":"dsathishupm","email":"dsathishupm@gmail.com"},"directories":{},"maintainers":[{"name":"dsathishupm","email":"dsathishupm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/playwright-clarity-reporter_1.0.1_1759135382966_0.4639461196654442"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-29T08:07:50.804Z","modified":"2025-09-29T08:43:03.400Z","1.0.0":"2025-09-29T08:07:51.068Z","1.0.1":"2025-09-29T08:43:03.224Z"},"description":"A clean, modern, and intelligent HTML report viewer for Playwright test results, designed for clarity.","maintainers":[{"name":"dsathishupm","email":"dsathishupm@gmail.com"}],"readme":"# Playwright Clarity HTML Reporter\r\n\r\nA clean, modern, and intelligent HTML report viewer for Playwright test results. This library takes the JSON output from a Playwright test run and generates a beautiful, self-contained, single-page application report.\r\n\r\n![Reporter Screenshot](https://i.imgur.com/u7q4eXM.png)\r\n\r\n## Features\r\n\r\n- **Modern Dashboard**: High-level overview of your test run with charts and key metrics.\r\n- **Detailed Test Views**: Drill down into each test suite and test case to see steps, errors, and attachments.\r\n- **AI-Powered Analysis**: Integrated Gemini AI assistant to help diagnose test failures instantly.\r\n- **Filtering & Sorting**: Easily find the tests you're looking for with powerful filtering and sorting options.\r\n- **Self-Contained**: The generated report is a single directory with no external dependencies, making it easy to archive or share.\r\n\r\n### Note on AI Analysis\r\nTo use the AI failure analysis feature, you will need to provide your own Google Gemini API key. The report will prompt you to enter your key the first time you use the feature. Your key is stored securely in your browser's local storage and is never transmitted anywhere except directly to the Google AI API.\r\n\r\n## Installation\r\n\r\nInstall the reporter as a dev dependency in your Playwright project.\r\n\r\n```bash\r\nnpm install --save-dev playwright-clarity-reporter\r\n```\r\n\r\nOr using yarn:\r\n\r\n```bash\r\nyarn add --dev playwright-clarity-reporter\r\n```\r\n\r\n## Usage\r\n\r\nUsing this reporter is a two-step process:\r\n\r\n### Step 1: Configure Playwright's JSON Reporter\r\n\r\nFirst, configure your `playwright.config.ts` to output a JSON report file. This is the data source for our reporter.\r\n\r\n```typescript\r\n// playwright.config.ts\r\nimport { defineConfig } from '@playwright/test';\r\n\r\nexport default defineConfig({\r\n  // ... your other config\r\n  \r\n  reporter: [\r\n    ['list'], // You can keep other reporters\r\n    ['json', { outputFile: 'test-results.json' }]\r\n  ],\r\n});\r\n```\r\n\r\n### Step 2: Generate the HTML Report\r\n\r\nAfter your test run is complete, a `test-results.json` file will be created. Use the `create-clarity-report` command provided by this library to generate the HTML report.\r\n\r\nIt's best to add this to your `package.json` scripts.\r\n\r\n```json\r\n// package.json\r\n{\r\n  \"scripts\": {\r\n    \"test\": \"playwright test\",\r\n    \"posttest\": \"create-clarity-report test-results.json\",\r\n    \"report\": \"create-clarity-report test-results.json -o my-clarity-report\"\r\n  }\r\n}\r\n```\r\n\r\nNow you can run your tests and the report will be generated automatically afterwards:\r\n```bash\r\nnpm test\r\n```\r\nThis will create a new directory named `clarity-report` with your HTML report inside.\r\n\r\nTo specify a different output directory, use the `-o` or `--output` flag:\r\n```bash\r\nnpm run report\r\n```\r\nThis will generate the report in a directory named `my-clarity-report`.\r\n\r\n## Local Development\r\n\r\nIf you want to contribute or modify the reporter UI:\r\n1. Clone the repository.\r\n2. Run `npm install`.\r\n3. Create a `data/mockReport.ts` file with sample data.\r\n4. Run `npm run dev` to start the Vite development server.","readmeFilename":"README.md"}