qaify-playwright-reporter 0.1.0 → 0.2.0

package/README.md

@@ -10,15 +10,21 @@ Rancangan: [03 · Struktur Backend §7](../03-struktur-backend.md#7-reporter-pla
 2. Di repo:
 
    ```bash
-   npm i -D qaify-playwright-reporter
-   npx qaify init            # tulis .github/workflows/qa.yml (tidak menimpa; --force untuk menimpa)
+   npm i -D @playwright/test qaify-playwright-reporter
+   npx qaify init
    ```
 
+   `qaify init` tidak pernah menimpa file yang sudah ada (kecuali `qa.yml` dengan `--force`):
+   - `.github/workflows/qa.yml`, dari [`templates/qa.yml`](templates/qa.yml);
+   - bila belum ada config Playwright: `playwright.config.ts` dengan `testDir: tests/e2e` dan `testMatch: *.e2e.ts`, sehingga unit test `*.test.ts` milik Vitest/Jest tidak ikut. Reporter QA Factory sudah terpasang, dan `webServer` dideteksi dari `package.json` (Vite, Next, Nuxt, Astro, CRA);
+   - bila belum ada test e2e: contoh `tests/e2e/smoke.e2e.ts` ("halaman utama terbuka").
+   - Repo Laravel atau yang tidak dikenali tidak diberi `webServer`. Isi `BASE_URL` atau tambahkan `webServer` sendiri; sampai saat itu contoh test di-skip, tetapi tetap hijau.
+
 3. Buat secret `QA_FACTORY_TOKEN`, variable `QA_FACTORY_URL`, dan opsional secret `CLAUDE_CODE_OAUTH_TOKEN` (lihat di bawah), lalu push.
 
-Template ada di [`templates/qa.yml`](templates/qa.yml). Bila aplikasi butuh database dummy, sediakan script `npm run db:seed`; tanpa script itu langkahnya dilewati.
+Bila aplikasi butuh database dummy, sediakan script `npm run db:seed`; tanpa script itu langkahnya dilewati.
 
-`playwright.config.ts`:
+Sudah punya `playwright.config.ts`? `qaify init` tidak mengubahnya. Tambahkan reporter sendiri:
 
 ```ts
 reporter: [

package/dist/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 // Sekali di repo yang diuji:
-//   qaify init [--force]                     tulis .github/workflows/qa.yml
+//   qaify init [--force]                     tulis qa.yml (+ playwright.config.ts & contoh test bila belum ada)
 //   qaify check                              cek URL, token, dan repo pemilik token (awal job test)
 // Job analyze di qa.yml (bin lama `playwright-reporter` tetap bisa dipakai):
 //   qaify analyze --conclusion "${{ needs.test.result }}"
@@ -11,7 +11,7 @@ import { appendFile, readFile, writeFile } from 'node:fs/promises';
 import { INSTRUCTIONS, RESULT_SCHEMA } from './ai.js';
 import { aiQueue, aiSubmit, analyze, CONCLUSIONS, parseArgs } from './analyze.js';
 import { createClient, describeProblem, MISSING_CONFIG, runFromEnv, warn } from './client.js';
-import { init, NEXT_STEPS, WORKFLOW_PATH } from './init.js';
+import { init, NEXT_STEPS } from './init.js';
 import { check } from './check.js';
 const USAGE = `Pemakaian:
   qaify init [--force]
@@ -26,8 +26,10 @@ const run = runFromEnv();
 // semua perintah exit 0 kecuali argumen salah: platform bermasalah tidak boleh membuat workflow merah
 switch (args.command) {
     case 'init': {
-        const { written } = await init(process.cwd(), args.force);
-        console.log(written ? `qa-factory: ${WORKFLOW_PATH} dibuat` : `qa-factory: ${WORKFLOW_PATH} sudah ada, tidak ditimpa (pakai --force)`);
+        for (const action of await init(process.cwd(), args.force)) {
+            const mark = { created: '+', skipped: '=', hint: '!' }[action.kind];
+            console.log(`qa-factory: ${mark} ${action.message}`);
+        }
         console.log(`\n${NEXT_STEPS}`);
         break;
     }

package/dist/init.d.ts

@@ -1,7 +1,32 @@
 export declare const WORKFLOW_PATH: string;
-export declare const NEXT_STEPS = "Langkah berikutnya:\n  1. playwright.config.ts:\n       reporter: [['list'], ['qaify-playwright-reporter']],\n       use: { trace: 'retain-on-failure', video: 'retain-on-failure', screenshot: 'only-on-failure' },\n     Nama project selain chromium/firefox/webkit: ['qaify-playwright-reporter', { browsers: { 'Mobile Safari': 'webkit' } }]\n  2. GitHub \u2192 Settings \u2192 Secrets and variables \u2192 Actions:\n       secret   QA_FACTORY_TOKEN         (Pengaturan \u2192 Token Reporter di QA Factory)\n       variable QA_FACTORY_URL           (URL API QA Factory)\n       secret   CLAUDE_CODE_OAUTH_TOKEN  (opsional: `claude setup-token`, analisis AI dengan langganan Claude Anda)\n  3. Commit .github/workflows/qa.yml lalu push.";
-/** Tulis .github/workflows/qa.yml dari template; file yang sudah ada tidak ditimpa kecuali force. */
-export declare function init(cwd: string, force?: boolean): Promise<{
-    path: string;
-    written: boolean;
-}>;
+export declare const CONFIG_PATH = "playwright.config.ts";
+export declare const E2E_DIR: string;
+export declare const SMOKE_PATH: string;
+export declare const REPORTER_SNIPPET = "reporter: [['list'], ['qaify-playwright-reporter']],\nuse: { trace: 'retain-on-failure', video: 'retain-on-failure', screenshot: 'only-on-failure' },";
+export declare const NEXT_STEPS = "Langkah berikutnya:\n  1. GitHub \u2192 Settings \u2192 Secrets and variables \u2192 Actions:\n       secret   QA_FACTORY_TOKEN         (Pengaturan \u2192 Token Reporter di QA Factory)\n       variable QA_FACTORY_URL           (URL API QA Factory, tab Variables)\n       secret   CLAUDE_CODE_OAUTH_TOKEN  (opsional: `claude setup-token`, analisis AI dengan langganan Claude Anda)\n  2. Cek lokal (opsional): npx playwright install chromium && npx playwright test\n  3. Commit file di atas lalu push.";
+export interface InitAction {
+    kind: 'created' | 'skipped' | 'hint';
+    path?: string;
+    message: string;
+}
+export interface WebServer {
+    command: string;
+    port: number;
+}
+interface PackageJson {
+    scripts?: Record<string, string>;
+    dependencies?: Record<string, string>;
+    devDependencies?: Record<string, string>;
+}
+/**
+ * Perintah menyalakan aplikasi untuk webServer Playwright, dari package.json.
+ * null: tidak dikenali, atau Laravel (`npm run dev` di sana hanya server aset, bukan aplikasinya).
+ */
+export declare function detectWebServer(pkg: PackageJson, isLaravel: boolean): WebServer | null;
+export declare function playwrightConfig(server: WebServer | null): string;
+/**
+ * Siapkan repo untuk QA Factory: workflow qa.yml, dan bila belum ada Playwright, config + contoh test.
+ * File yang sudah ada tidak pernah diubah (kecuali qa.yml dengan force); config milik pengguna hanya diberi catatan.
+ */
+export declare function init(cwd: string, force?: boolean): Promise<InitAction[]>;
+export {};

package/dist/init.js

@@ -1,25 +1,133 @@
-import { access, mkdir, readFile, writeFile } from 'node:fs/promises';
+import { access, mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 export const WORKFLOW_PATH = join('.github', 'workflows', 'qa.yml');
-// dist/init.js → ../templates/qa.yml (ikut terbit lewat "files" di package.json)
-const TEMPLATE = new URL('../templates/qa.yml', import.meta.url);
+export const CONFIG_PATH = 'playwright.config.ts';
+export const E2E_DIR = join('tests', 'e2e');
+export const SMOKE_PATH = join(E2E_DIR, 'smoke.e2e.ts');
+// dist/init.js → ../templates/* (ikut terbit lewat "files" di package.json)
+const WORKFLOW_TEMPLATE = new URL('../templates/qa.yml', import.meta.url);
+const SMOKE_TEMPLATE = new URL('../templates/smoke.e2e.ts', import.meta.url);
+const CONFIG_FILES = ['playwright.config.ts', 'playwright.config.js', 'playwright.config.mjs', 'playwright.config.cjs'];
+export const REPORTER_SNIPPET = `reporter: [['list'], ['qaify-playwright-reporter']],
+use: { trace: 'retain-on-failure', video: 'retain-on-failure', screenshot: 'only-on-failure' },`;
 export const NEXT_STEPS = `Langkah berikutnya:
-  1. playwright.config.ts:
-       reporter: [['list'], ['qaify-playwright-reporter']],
-       use: { trace: 'retain-on-failure', video: 'retain-on-failure', screenshot: 'only-on-failure' },
-     Nama project selain chromium/firefox/webkit: ['qaify-playwright-reporter', { browsers: { 'Mobile Safari': 'webkit' } }]
-  2. GitHub → Settings → Secrets and variables → Actions:
+  1. GitHub → Settings → Secrets and variables → Actions:
        secret   QA_FACTORY_TOKEN         (Pengaturan → Token Reporter di QA Factory)
-       variable QA_FACTORY_URL           (URL API QA Factory)
+       variable QA_FACTORY_URL           (URL API QA Factory, tab Variables)
        secret   CLAUDE_CODE_OAUTH_TOKEN  (opsional: \`claude setup-token\`, analisis AI dengan langganan Claude Anda)
-  3. Commit .github/workflows/qa.yml lalu push.`;
-/** Tulis .github/workflows/qa.yml dari template; file yang sudah ada tidak ditimpa kecuali force. */
+  2. Cek lokal (opsional): npx playwright install chromium && npx playwright test
+  3. Commit file di atas lalu push.`;
+const exists = (path) => access(path).then(() => true, () => false);
+/**
+ * Perintah menyalakan aplikasi untuk webServer Playwright, dari package.json.
+ * null: tidak dikenali, atau Laravel (`npm run dev` di sana hanya server aset, bukan aplikasinya).
+ */
+export function detectWebServer(pkg, isLaravel) {
+    if (isLaravel)
+        return null;
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    const scripts = pkg.scripts ?? {};
+    if (scripts.dev) {
+        if (deps.next)
+            return { command: 'npm run dev -- -p 3000', port: 3000 };
+        if (deps.nuxt)
+            return { command: 'npm run dev -- --port 3000', port: 3000 };
+        if (deps.astro)
+            return { command: 'npm run dev -- --port 4321', port: 4321 };
+        if (deps.vite || scripts.dev.includes('vite'))
+            return { command: 'npm run dev -- --port 5173 --strictPort', port: 5173 };
+    }
+    if (deps['react-scripts'] && scripts.start)
+        return { command: 'npm start', port: 3000 };
+    return null;
+}
+export function playwrightConfig(server) {
+    const baseURL = server ? `process.env.BASE_URL ?? 'http://localhost:${server.port}'` : 'process.env.BASE_URL';
+    const webServer = server
+        ? `
+  // menyalakan aplikasi sebelum test; lokal memakai server yang sudah jalan bila ada
+  webServer: {
+    command: '${server.command}',
+    url: 'http://localhost:${server.port}',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },`
+        : `
+  // aplikasi tidak dinyalakan otomatis: isi BASE_URL, atau tambahkan webServer
+  // (https://playwright.dev/docs/test-webserver)`;
+    return `import { defineConfig, devices } from '@playwright/test'
+
+// Dibuat oleh \`npx qaify init\`. Test e2e: tests/e2e/*.e2e.ts — unit test (*.test.ts, Vitest/Jest) tidak ikut.
+// Hasil dikirim ke QA Factory oleh qaify-playwright-reporter (diam bila QA_FACTORY_URL / QA_FACTORY_TOKEN kosong).
+export default defineConfig({
+  testDir: './tests/e2e',
+  testMatch: '**/*.e2e.ts',
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  reporter: [['list'], ['qaify-playwright-reporter']],
+  use: {
+    baseURL: ${baseURL},
+    trace: 'retain-on-failure',
+    video: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],${webServer}
+})
+`;
+}
+async function write(cwd, path, content) {
+    await mkdir(dirname(join(cwd, path)), { recursive: true });
+    await writeFile(join(cwd, path), content);
+}
+/**
+ * Siapkan repo untuk QA Factory: workflow qa.yml, dan bila belum ada Playwright, config + contoh test.
+ * File yang sudah ada tidak pernah diubah (kecuali qa.yml dengan force); config milik pengguna hanya diberi catatan.
+ */
 export async function init(cwd, force = false) {
-    const path = join(cwd, WORKFLOW_PATH);
-    const exists = await access(path).then(() => true, () => false);
-    if (exists && !force)
-        return { path, written: false };
-    await mkdir(dirname(path), { recursive: true });
-    await writeFile(path, await readFile(TEMPLATE, 'utf8'));
-    return { path, written: true };
+    const actions = [];
+    // 1. workflow
+    if ((await exists(join(cwd, WORKFLOW_PATH))) && !force) {
+        actions.push({ kind: 'skipped', path: WORKFLOW_PATH, message: `${WORKFLOW_PATH} sudah ada, tidak ditimpa (pakai --force)` });
+    }
+    else {
+        await write(cwd, WORKFLOW_PATH, await readFile(WORKFLOW_TEMPLATE, 'utf8'));
+        actions.push({ kind: 'created', path: WORKFLOW_PATH, message: `${WORKFLOW_PATH} dibuat` });
+    }
+    const pkg = JSON.parse(await readFile(join(cwd, 'package.json'), 'utf8').catch(() => '{}'));
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    // 2. config Playwright
+    const existing = (await Promise.all(CONFIG_FILES.map(async (f) => ((await exists(join(cwd, f))) ? f : null)))).find(Boolean);
+    if (existing) {
+        actions.push({ kind: 'skipped', path: existing, message: `${existing} sudah ada, tidak diubah` });
+        const content = await readFile(join(cwd, existing), 'utf8');
+        if (!content.includes('qaify-playwright-reporter')) {
+            actions.push({
+                kind: 'hint',
+                path: existing,
+                message: `tambahkan reporter QA Factory di ${existing}:\n${REPORTER_SNIPPET}\nPastikan testDir hanya menunjuk folder test e2e, agar unit test (Vitest/Jest) tidak ikut dijalankan Playwright.`,
+            });
+        }
+    }
+    else {
+        const server = detectWebServer(pkg, await exists(join(cwd, 'artisan')));
+        await write(cwd, CONFIG_PATH, playwrightConfig(server));
+        actions.push({
+            kind: 'created',
+            path: CONFIG_PATH,
+            message: server
+                ? `${CONFIG_PATH} dibuat (aplikasi dinyalakan dengan \`${server.command}\`)`
+                : `${CONFIG_PATH} dibuat — aplikasi tidak dikenali/Laravel: isi BASE_URL atau webServer agar test bisa membuka aplikasi`,
+        });
+        // 3. contoh test bila belum ada test e2e
+        const e2eFiles = await readdir(join(cwd, E2E_DIR)).catch(() => []);
+        if (!e2eFiles.some((f) => f.endsWith('.e2e.ts'))) {
+            await write(cwd, SMOKE_PATH, await readFile(SMOKE_TEMPLATE, 'utf8'));
+            actions.push({ kind: 'created', path: SMOKE_PATH, message: `${SMOKE_PATH} dibuat (contoh — ganti dengan alur penting aplikasi Anda)` });
+        }
+    }
+    // 4. Playwright eksplisit di package.json (npm 7+ memasang peer dependency, tetapi CI lebih aman eksplisit)
+    if (!deps['@playwright/test']) {
+        actions.push({ kind: 'hint', message: 'pasang Playwright: npm i -D @playwright/test' });
+    }
+    return actions;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qaify-playwright-reporter",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Reporter Playwright untuk QA Factory (Qaify): kirim hasil test dan artefak ke /api/ingest, tanpa pernah menggagalkan test.",
   "license": "MIT",
   "author": "ahmdkenz",
@@ -23,8 +23,8 @@
     }
   },
   "bin": {
-    "qaify": "./dist/cli.js",
-    "playwright-reporter": "./dist/cli.js"
+    "qaify": "dist/cli.js",
+    "playwright-reporter": "dist/cli.js"
   },
   "files": [
     "dist",

package/templates/qa.yml

@@ -28,7 +28,8 @@ jobs:
       - run: npx playwright install --with-deps
       # siapkan database seed/dummy di sini bila aplikasi butuh (jangan pernah database produksi)
       - run: npm run db:seed --if-present
-      - run: npx playwright test
+      # hanya testDir di playwright.config (tests/e2e/*.e2e.ts); unit test Vitest/Jest jalankan di step terpisah bila perlu
+      - run: npx playwright test --pass-with-no-tests
 
   # Status final run & analisis kegagalan. Tetap jalan walau test gagal / di-cancel.
   # Analisis AI memakai langganan Claude Pro/Max Anda lewat Claude Code (QA Factory tidak memanggil AI):

package/templates/smoke.e2e.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test'
+
+// Contoh dari `npx qaify init` — ganti/tambah dengan alur penting aplikasi Anda (login, checkout, dst.).
+// File tests/e2e/*.e2e.ts dijalankan Playwright; unit test (*.test.ts) tetap milik Vitest/Jest.
+test('halaman utama terbuka', async ({ page, baseURL }) => {
+  test.skip(!baseURL, 'Atur BASE_URL atau webServer di playwright.config.ts agar test ini membuka aplikasi')
+
+  const res = await page.goto('/')
+  expect(res?.status() ?? 0).toBeLessThan(400)
+  await expect(page.locator('body')).toBeVisible()
+})