reporting-labs 0.1.2 → 0.1.4

package/README.md

@@ -35,6 +35,73 @@ open reporting-labs/index.html
 
 That is all. Everything below is optional.
 
+## Keep the reporter options in their own file (recommended)
+
+As soon as you set more than a title, put the reportingLabs options in a separate file. Your `playwright.config.ts` stays short, and all report settings live in one place.
+
+**Step 1.** Create the file (or let the CLI do it with `npx reporting-labs init`):
+
+```ts
+// reporting-labs.config.ts  (next to playwright.config.ts)
+import type { ReportingLabsOptions } from 'reporting-labs';
+
+const config: ReportingLabsOptions = {
+  title: 'My app – regression',
+  outputFolder: 'reports/reporting-labs',
+  embedVideos: true,
+  metadata: { env: process.env.TEST_ENV ?? 'local' },
+  // links: { story: 'https://yourteam.atlassian.net/browse/{id}' },
+};
+
+export default config;
+```
+
+**Step 2.** Import it in `playwright.config.ts` and add one line to your reporter list. Your other reporters keep working as before.
+
+```ts
+import { defineConfig } from '@playwright/test';
+import reportingLabs from './reporting-labs.config';
+
+export default defineConfig({
+  reporter: [
+    ['list'],
+    ['html', { open: 'never' }],
+    ['reporting-labs', reportingLabs],   // <- this line
+  ],
+});
+```
+
+That is it. The `ReportingLabsOptions` type gives you autocomplete for every option in your editor.
+
+If your reporter list differs between CI and local (a common pattern), add the same line to both branches:
+
+```ts
+reporter: process.env.CI
+  ? [['blob'], ['html', { open: 'never' }], ['reporting-labs', reportingLabs]]
+  : [['list'], ['html', { open: 'never' }], ['reporting-labs', reportingLabs]],
+```
+
+## Examples you can copy
+
+The [`examples/`](https://github.com/naveenanimation20/reporting-labs/tree/main/examples) folder has one small spec per feature. Each one runs offline in a few seconds, so you can read it, run it, and copy what you need.
+
+| Spec | What it shows |
+|---|---|
+| [01-tag-your-tests.spec.ts](https://github.com/naveenanimation20/reporting-labs/blob/main/examples/01-tag-your-tests.spec.ts) | `meta()` with priority, severity, owner, feature, story; the same via tags and annotations |
+| [02-logs-and-test-data.spec.ts](https://github.com/naveenanimation20/reporting-labs/blob/main/examples/02-logs-and-test-data.spec.ts) | `log()` lines and `testData()` as key/value, table and CSV, with secrets masked |
+| [03-api-calls.spec.ts](https://github.com/naveenanimation20/reporting-labs/blob/main/examples/03-api-calls.spec.ts) | `recordApi()` around `request.post`, `api()` for manual records, a 404 in the API tab |
+| [04-steps-and-attachments.spec.ts](https://github.com/naveenanimation20/reporting-labs/blob/main/examples/04-steps-and-attachments.spec.ts) | `test.step()` bars, screenshot / JSON attachments, visual comparison viewer |
+| [05-outcomes.spec.ts](https://github.com/naveenanimation20/reporting-labs/blob/main/examples/05-outcomes.spec.ts) | skip with a reason, fixme, expected failure, timeout, a plain failure, a flaky test |
+| [06-bdd-style.spec.ts](https://github.com/naveenanimation20/reporting-labs/blob/main/examples/06-bdd-style.spec.ts) | Given / When / Then steps rendered as Gherkin |
+| [reporting-labs.config.ts](https://github.com/naveenanimation20/reporting-labs/blob/main/examples/reporting-labs.config.ts) | A complete reporter config, every option commented |
+| [playwright.config.ts](https://github.com/naveenanimation20/reporting-labs/blob/main/examples/playwright.config.ts) | How the reporter sits next to the built-in reporters |
+
+```bash
+git clone https://github.com/naveenanimation20/reporting-labs
+cd reporting-labs/examples && npm install && npx playwright test
+open reporting-labs/index.html
+```
+
 ## A tour of the report
 
 ### Overview: the state of the run in one screen
@@ -86,7 +153,7 @@ test('completes purchase', async ({ page }) => {
 });
 ```
 
-Tags work too: `{ tag: ['@P1', '@severity:critical', '@owner:priya'] }`. Plain annotations (`test.info().annotations.push({ type: 'priority', description: 'P1' })`) are picked up as well.
+Full example: [examples/01-tag-your-tests.spec.ts](https://github.com/naveenanimation20/reporting-labs/blob/main/examples/01-tag-your-tests.spec.ts). Tags work too: `{ tag: ['@P1', '@severity:critical', '@owner:priya'] }`. Plain annotations (`test.info().annotations.push({ type: 'priority', description: 'P1' })`) are picked up as well.
 
 Turn story, epic or issue keys into links:
 
@@ -111,7 +178,7 @@ test('creates an order', async ({ request }) => {
 });
 ```
 
-Passwords, tokens, API keys, `Authorization` / `Cookie` headers, JWTs and `Bearer …` values are masked as `****` everywhere. Add your own keys with `maskKeys: ['otp', 'pan']`.
+Full examples: [02-logs-and-test-data.spec.ts](https://github.com/naveenanimation20/reporting-labs/blob/main/examples/02-logs-and-test-data.spec.ts) and [03-api-calls.spec.ts](https://github.com/naveenanimation20/reporting-labs/blob/main/examples/03-api-calls.spec.ts). Passwords, tokens, API keys, `Authorization` / `Cookie` headers, JWTs and `Bearer …` values are masked as `****` everywhere. Add your own keys with `maskKeys: ['otp', 'pan']`.
 
 ## Run history: new vs known, flaky, slower
 
@@ -194,7 +261,7 @@ reporter: [['reporting-labs', {
 }]]
 ```
 
-`npx reporting-labs init` writes a starter `reporting-labs.config.ts`.
+`npx reporting-labs init` writes a starter `reporting-labs.config.ts`; see [Keep the reporter options in their own file](#keep-the-reporter-options-in-their-own-file-recommended).
 
 ## Running in CI
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reporting-labs",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "reportingLabs – beautiful, customizable single-file HTML test reports. One line of config. Playwright adapter included, more runners on the way.",
   "keywords": [
     "test-report",