@xylentis/testgen 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+## 1.1.0 (2026-10-06)
+
+- Khi ghi thao tác không còn mở cửa sổ Playwright Inspector, chỉ còn trình duyệt bạn đang thao tác. Code xem trong giao diện testgen hoặc trong các file sinh ra.
+- Thêm `testgen record --inspector` để hiện lại Inspector khi cần.
+
+## 1.0.0 (2026-10-05)
+
+- Bản đầu tiên. Ghi thao tác bằng recorder của Playwright, sinh test cho `playwright-ts`, `playwright-go`, `selenium-java`, `selenium-js`.
+- Có giao diện web (`testgen ui`) xem code của mọi target ngay khi đang ghi.

package/README.md

@@ -39,7 +39,7 @@ testgen ui                  # mở http://127.0.0.1:9323
 1. Nhập URL, chọn trình duyệt rồi bấm **Record**.
 2. Một cửa sổ trình duyệt mở ra. Bạn thao tác như người dùng thật: click, gõ, chọn…
    - Thanh công cụ của recorder nằm ở đầu trang, dùng để thêm assert: *Assert visibility*, *Assert text*, *Assert value*.
-   - Cửa sổ Playwright Inspector cũng mở ra và hiện code Playwright, bạn có thể bỏ qua cửa sổ này.
+   - Cửa sổ Playwright Inspector được ẩn đi, chỉ còn trình duyệt bạn đang thao tác. Muốn hiện lại thì dùng `testgen record --inspector`.
 3. Trong khi bạn thao tác, giao diện testgen cập nhật **danh sách bước** và **code của cả 4 target**.
 4. Đóng trình duyệt hoặc bấm **Stop** khi xong.
 5. Với từng target, bạn có thể **Copy**, **Download** hoặc **Save files** để lưu thẳng vào thư mục project. Đường dẫn tính từ thư mục bạn chạy `testgen ui`.
@@ -77,6 +77,7 @@ testgen targets                                            # liệt kê target
 | `--test-id-attribute` | Thuộc tính dùng cho `getByTestId` (mặc định `data-testid`). |
 | `--save` | (`record`) Nơi lưu bản ghi `.jsonl`. |
 | `--browser`, `--channel`, `--device`, `--viewport-size`, `--lang`, `--timezone`, `--color-scheme`, `--user-agent`, `--ignore-https-errors`, `--load-storage`, `--save-storage` | (`record`) Giống hệt `playwright codegen`. |
+| `--inspector` | (`record`) Hiện thêm cửa sổ Playwright Inspector (mặc định ẩn). |
 
 ## Chạy test đã sinh
 
@@ -129,7 +130,7 @@ Bên dưới vẫn là Selenium WebDriver: các hành động dùng `WebElement.
 
 ```
  Bạn thao tác trên trình duyệt
-        │  playwright codegen --target=jsonl  (recorder của Playwright, ghi lại mỗi bước)
+        │  recorder của Playwright (như `playwright codegen --target=jsonl`, Inspector ẩn), ghi lại mỗi bước
         ▼
  recording.jsonl   ── danh sách bước, chưa gắn với ngôn ngữ nào (click, fill, assertText…)
         │  selector → chuỗi locator: dùng lại mã của Playwright (src/vendor/playwright)

package/dist/cli.js

@@ -31,6 +31,7 @@ Recorder options (record), same as playwright codegen:
   --browser <chromium|firefox|webkit>  --channel <chrome|msedge|...>  --device <name>
   --viewport-size <w,h>  --lang <locale>  --timezone <id>  --color-scheme <light|dark>
   --user-agent <ua>  --ignore-https-errors  --load-storage <file>  --save-storage <file>
+  --inspector                 also show Playwright's Inspector window (hidden by default)
 `;
 const options = {
     'target': { type: 'string', short: 't' },
@@ -51,6 +52,7 @@ const options = {
     'ignore-https-errors': { type: 'boolean' },
     'load-storage': { type: 'string' },
     'save-storage': { type: 'string' },
+    'inspector': { type: 'boolean' },
     'port': { type: 'string', default: '9323' },
     'host': { type: 'string', default: '127.0.0.1' },
     'open': { type: 'boolean', default: true },
@@ -111,6 +113,7 @@ async function main(argv) {
                 loadStorage: values['load-storage'],
                 saveStorage: values['save-storage'],
                 testIdAttribute: values['test-id-attribute'],
+                inspector: values.inspector,
             };
             console.log('Recording... interact with the page, then close the browser window (or press Ctrl+C) to generate the tests.');
             const recorder = startCodegen(rest[0], save, codegen);

package/dist/record.js

@@ -1,32 +1,18 @@
 import { spawn } from 'node:child_process';
-import { createRequire } from 'node:module';
-import path from 'node:path';
-function playwrightCli() {
-    const require = createRequire(import.meta.url);
-    return path.join(path.dirname(require.resolve('playwright-core/package.json')), 'cli.js');
-}
-export function codegenArguments(url, outputFile, options) {
-    const args = ['codegen', '--target=jsonl', '--output', outputFile];
-    const flags = [
-        ['browser', '--browser'], ['channel', '--channel'], ['device', '--device'], ['viewportSize', '--viewport-size'],
-        ['lang', '--lang'], ['timezone', '--timezone'], ['colorScheme', '--color-scheme'], ['userAgent', '--user-agent'],
-        ['loadStorage', '--load-storage'], ['saveStorage', '--save-storage'], ['testIdAttribute', '--test-id-attribute'],
-    ];
-    for (const [key, flag] of flags) {
-        const value = options[key];
-        if (typeof value === 'string' && value)
-            args.push(flag, value);
-    }
-    if (options.ignoreHttpsErrors)
-        args.push('--ignore-https-errors');
-    if (url)
-        args.push(url);
-    return args;
-}
-// Starts the Playwright recorder; it rewrites `outputFile` (JSONL) after every recorded action
-// and exits when its browser window is closed.
+import { fileURLToPath } from 'node:url';
+// Compiled: dist/recorder-process.js. From sources (tests), Node runs the .ts file directly.
+const recorderProcess = fileURLToPath(new URL(import.meta.url.endsWith('.ts') ? './recorder-process.ts' : './recorder-process.js', import.meta.url));
+// Starts the Playwright recorder in a child process. It rewrites `outputFile` (JSONL) after every
+// recorded action and exits when the recorded browser is closed.
+// TESTGEN_RECORDER_HEADLESS=1 records in a headless browser (for tests).
 export function startCodegen(url, outputFile, options, stdio = 'inherit') {
-    return spawn(process.execPath, [playwrightCli(), ...codegenArguments(url, outputFile, options)], { stdio });
+    const processOptions = {
+        ...options,
+        url,
+        outputFile,
+        headless: !!process.env.TESTGEN_RECORDER_HEADLESS,
+    };
+    return spawn(process.execPath, [recorderProcess, JSON.stringify(processOptions)], { stdio });
 }
 export function waitForExit(child) {
     return new Promise((resolve, reject) => {

package/dist/recorder-process.js

@@ -0,0 +1,102 @@
+// Runs Playwright's recorder (the engine behind `playwright codegen`) in its own process, with the
+// Playwright Inspector window hidden: the user only sees the browser being recorded, and the code
+// is shown by testgen. Mirrors codegen's own browser setup (packages/playwright-core/src/cli).
+//
+// Started by record.ts: node recorder-process.js '<RecorderProcessOptions as JSON>'
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import * as playwright from 'playwright-core';
+async function main(options) {
+    // Playwright's own hook for running the recorder's Inspector window headless.
+    if (!options.inspector)
+        process.env.PWTEST_CLI_HEADLESS = '1';
+    const browserType = { chromium: playwright.chromium, firefox: playwright.firefox, webkit: playwright.webkit }[options.browser ?? 'chromium'];
+    if (!browserType)
+        throw new Error(`Unknown browser "${options.browser}": use chromium, firefox or webkit.`);
+    const launchOptions = { headless: !!options.headless, handleSIGINT: false };
+    if (options.channel)
+        launchOptions.channel = options.channel;
+    let contextOptions = {};
+    if (options.device) {
+        const device = playwright.devices[options.device];
+        if (!device)
+            throw new Error(`Unknown device "${options.device}".`);
+        contextOptions = { ...device };
+    }
+    // Like codegen: a crisp headed browser, and no touch emulation on WebKit for Linux.
+    const headedScaleFactor = os.platform() === 'darwin' ? 2 : 1;
+    if (browserType.name() === 'webkit' && process.platform === 'linux') {
+        delete contextOptions.hasTouch;
+        delete contextOptions.isMobile;
+    }
+    if (options.viewportSize) {
+        const [width, height] = options.viewportSize.split(',').map(Number);
+        if (!width || !height)
+            throw new Error('Invalid viewport size: use "width,height", for example 1280,720.');
+        contextOptions.viewport = { width, height };
+    }
+    if (options.userAgent)
+        contextOptions.userAgent = options.userAgent;
+    if (options.lang)
+        contextOptions.locale = options.lang;
+    if (options.colorScheme)
+        contextOptions.colorScheme = options.colorScheme;
+    if (options.timezone)
+        contextOptions.timezoneId = options.timezone;
+    if (options.loadStorage)
+        contextOptions.storageState = options.loadStorage;
+    if (options.ignoreHttpsErrors)
+        contextOptions.ignoreHTTPSErrors = true;
+    const browser = await browserType.launch(launchOptions);
+    const context = await browser.newContext({ ...contextOptions, ...(options.headless ? {} : { deviceScaleFactor: headedScaleFactor }) });
+    let closing = false;
+    const close = async (code) => {
+        if (closing)
+            return;
+        closing = true;
+        if (options.saveStorage)
+            await context.storageState({ path: options.saveStorage }).catch(() => { });
+        // The recorder rewrites its output file on a 250ms throttle; let the last write land.
+        await new Promise(resolve => setTimeout(resolve, 500));
+        await browser.close().catch(() => { });
+        process.exit(code);
+    };
+    // Closing the last tab ends the recording, as with codegen.
+    context.on('page', page => page.on('close', () => {
+        if (!context.pages().length)
+            void close(0);
+    }));
+    browser.on('disconnected', () => void close(0));
+    for (const signal of ['SIGINT', 'SIGTERM'])
+        process.on(signal, () => void close(0));
+    context.setDefaultTimeout(0);
+    context.setDefaultNavigationTimeout(0);
+    await context._enableRecorder({
+        language: 'jsonl',
+        mode: 'recording',
+        outputFile: path.resolve(options.outputFile),
+        launchOptions: options.channel ? { channel: options.channel } : {},
+        contextOptions,
+        device: options.device,
+        saveStorage: options.saveStorage,
+        testIdAttributeName: options.testIdAttribute,
+        handleSIGINT: false,
+    });
+    const page = await context.newPage();
+    if (options.url)
+        await page.goto(normalizeUrl(options.url)).catch(error => console.error(`testgen: could not open ${options.url}: ${error.message}`));
+}
+// Same rules as codegen: local files become file:// URLs, bare hosts get http://.
+function normalizeUrl(url) {
+    if (fs.existsSync(url))
+        return 'file://' + path.resolve(url);
+    if (!/^(https?:|file:|about:|data:)/.test(url))
+        return 'http://' + url;
+    return url;
+}
+main(JSON.parse(process.argv[2] ?? '{}')).catch(error => {
+    console.error(`testgen: ${error.message}`);
+    process.exit(1);
+});
+//# sourceMappingURL=recorder-process.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xylentis/testgen",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Record a UI test once with the Playwright recorder, then generate it for Playwright (TypeScript, Go) and Selenium (Java, JavaScript).",
   "keywords": [
     "playwright",
@@ -25,7 +25,8 @@
     "runtime",
     "ui",
     "docs/testgen-ui.png",
-    "NOTICE"
+    "NOTICE",
+    "CHANGELOG.md"
   ],
   "engines": {
     "node": ">=22"