@xylentis/testgen 1.0.0 → 1.1.1

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# 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.
+- Code sinh ra luôn dùng thuộc tính test id mà bản ghi đã dùng. Trước đây, đổi **Test id attribute** trong giao diện sau khi ghi, hoặc truyền `--test-id-attribute` khác cho `testgen generate`, làm `getByTestId(...)` tìm theo sai thuộc tính. Nay giao diện hiện ghi chú khi ô này khác với bản ghi, còn `testgen generate` báo khi bỏ qua tùy chọn.
+- README: thêm mục về cách recorder chọn locator và cách xử lý web nhiều ngôn ngữ (i18n).
+
+## 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,14 +39,15 @@ 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`.
 
 Một số thao tác khác:
 
-- **Đổi Test name / Package / Test id attribute:** code sinh lại ngay.
+- **Đổi Test name / Package:** code sinh lại ngay.
+- **Test id attribute:** đặt trước khi bấm **Record**. Code luôn dùng thuộc tính mà bản ghi đã dùng, nên đổi sau khi ghi chỉ có tác dụng cho lần ghi sau. Giao diện hiện ghi chú khi hai giá trị khác nhau. Xem thêm mục **Locator và web nhiều ngôn ngữ** bên dưới.
 - **Download recording:** lưu file `.jsonl` để lần sau sinh lại.
 - **Open recording…:** mở lại một file đã lưu.
 
@@ -74,9 +75,37 @@ testgen targets                                            # liệt kê target
 | `-d, --out-dir` | Thư mục ra. Nếu có nhiều target thì mỗi target một thư mục con. |
 | `-n, --name` | Tên test. Mặc định lấy từ tên file `--output`, nếu không có thì là `recorded`. |
 | `--package` | Package cho Java/Go. Java tự lấy từ đường dẫn sau `src/test/java/`, Go tự lấy từ tên thư mục. |
-| `--test-id-attribute` | Thuộc tính dùng cho `getByTestId` (mặc định `data-testid`). |
+| `--test-id-attribute` | Thuộc tính recorder dùng cho `getByTestId` (mặc định `data-testid`). Khi sinh code, testgen dùng thuộc tính đã lưu trong bản ghi; tùy chọn này chỉ có tác dụng với bản ghi không có bước `getByTestId` nào. |
 | `--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). |
+
+## Locator và web nhiều ngôn ngữ (i18n)
+
+testgen giữ nguyên locator mà recorder của Playwright chọn. Recorder ưu tiên theo thứ tự:
+
+1. test id: `getByTestId('welcome')`, theo thuộc tính `data-testid` hoặc thuộc tính đặt bằng `--test-id-attribute`;
+2. role + tên (accessible name, thường là chữ hiển thị): `getByRole('button', { name: 'Sign in' })`;
+3. placeholder, label, alt, text, title;
+4. `#id`; sau đó mới đến tên thẻ và vị trí.
+
+`#id` xếp sau vì id thường do framework sinh ra và đổi giữa các lần build (`:r1:` của React, `mat-input-0` của Angular Material). Id trông như chuỗi ngẫu nhiên thì recorder bỏ qua hẳn. Ví dụ trong app demo, `<input id="email">` có label "Email" nên thành `getByRole('textbox', { name: 'Email' })` chứ không phải `#email`.
+
+Vì vậy, nếu app không có test id, phần lớn locator dựa vào chữ trên trang. Test ghi trên giao diện tiếng Anh sẽ gãy khi chạy trên giao diện tiếng Việt: `getByRole('button', { name: 'Sign in' })` không khớp với nút "Đăng nhập". Có ba cách xử lý:
+
+- **Cố định ngôn ngữ khi chạy test.** Ghi với `--lang`, code sinh ra sẽ đặt cùng locale (Selenium: thêm `--lang` cho Chrome và Edge):
+
+  ```bash
+  testgen record https://your-app.example --lang en-US
+  ```
+
+  Cách này chỉ có tác dụng khi app chọn ngôn ngữ theo trình duyệt. Nếu app chọn theo URL (`/en/...`), cookie hay cài đặt tài khoản thì cần cố định ngôn ngữ ở đó, ví dụ ghi từ URL `/en/...` hoặc dùng tài khoản test có ngôn ngữ cố định.
+
+- **Thêm test id vào app.** Đây là cách bền nhất khi một test phải chạy trên nhiều ngôn ngữ, vì test id luôn được ưu tiên. App dùng thuộc tính khác thì khai báo khi ghi, ví dụ `--test-id-attribute data-qa`.
+
+- **Dùng `id` sẵn có làm test id:** `--test-id-attribute id`, hoặc nhập `id` vào ô **Test id attribute** trong giao diện. Phần tử có id thành `getByTestId('email')`, phần tử không có id vẫn dùng role + tên. Chỉ nên dùng khi id do người viết đặt, vì với test id recorder không lọc các id sinh tự động.
+
+Thuộc tính test id được lưu trong bản ghi, và code sinh ra luôn dùng đúng thuộc tính đó. Vì vậy hãy chọn thuộc tính **trước khi ghi**. `--test-id-attribute` khi chạy `generate` chỉ có tác dụng với bản ghi không có bước `getByTestId` nào.
 
 ## Chạy test đã sinh
 
@@ -129,7 +158,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

@@ -6,7 +6,7 @@ import { parseArgs } from 'node:util';
 import { generateTargets, writeTargets } from './generate.js';
 import { generators } from './generators/index.js';
 import { startCodegen, waitForExit } from './record.js';
-import { parseRecording } from './recording.js';
+import { parseRecording, recordedTestIdAttribute } from './recording.js';
 import { startUiServer } from './ui/server.js';
 const usage = `testgen: record a UI test once with the Playwright recorder, then generate it for several
 frameworks and languages.
@@ -24,13 +24,15 @@ Output options:
                                (default for record: ./generated)
   -n, --name <name>            Test name (default: taken from --output, else "recorded")
       --package <name>         Java or Go package (default: derived from the output path)
-      --test-id-attribute <a>  Attribute used by getByTestId (default: data-testid)
+      --test-id-attribute <a>  Attribute for getByTestId when recording (default: data-testid);
+                               generated code keeps the one the recording was made with
       --save <file.jsonl>      record: where to keep the recording (default: <out-dir>/recording.jsonl)
 
 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' },
@@ -38,7 +40,7 @@ const options = {
     'out-dir': { type: 'string', short: 'd' },
     'name': { type: 'string', short: 'n' },
     'package': { type: 'string' },
-    'test-id-attribute': { type: 'string', default: 'data-testid' },
+    'test-id-attribute': { type: 'string' },
     'save': { type: 'string' },
     'browser': { type: 'string', short: 'b' },
     'channel': { type: 'string' },
@@ -51,6 +53,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 },
@@ -64,12 +67,13 @@ async function main(argv) {
         return;
     }
     const targets = values.target ? values.target.split(',').map(t => t.trim()).filter(Boolean) : generators.map(g => g.id);
+    const testIdAttribute = values['test-id-attribute'] ?? 'data-testid';
     const output = {
         targets,
         output: values.output,
         name: values.name,
         packageName: values.package,
-        testIdAttribute: values['test-id-attribute'],
+        testIdAttribute,
     };
     switch (command) {
         case 'targets':
@@ -81,6 +85,9 @@ async function main(argv) {
             if (!file)
                 throw new Error('Usage: testgen generate <recording.jsonl> [options]');
             const recording = parseRecording(fs.readFileSync(file, 'utf8'), file);
+            const recorded = recordedTestIdAttribute(recording);
+            if (values['test-id-attribute'] && recorded && recorded !== values['test-id-attribute'])
+                console.error(`note: ignoring --test-id-attribute ${values['test-id-attribute']}: the recording's getByTestId() steps use ${recorded}.`);
             if (!values.output && !values['out-dir']) {
                 if (targets.length !== 1)
                     throw new Error('Pass --out-dir (or a single --target to print the test to stdout).');
@@ -110,7 +117,8 @@ async function main(argv) {
                 ignoreHttpsErrors: values['ignore-https-errors'],
                 loadStorage: values['load-storage'],
                 saveStorage: values['save-storage'],
-                testIdAttribute: values['test-id-attribute'],
+                testIdAttribute,
+                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/generate.js

@@ -2,11 +2,13 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { findGenerator } from './generators/index.js';
 import { nameFromFileName } from './naming.js';
+import { recordedTestIdAttribute } from './recording.js';
 export function generateTargets(recording, options) {
     if (!options.targets.length)
         throw new Error('Pick at least one target with --target.');
     if (options.output && options.targets.length > 1)
         throw new Error('--output takes a single target; use --out-dir for several targets.');
+    const testIdAttribute = recordedTestIdAttribute(recording) ?? options.testIdAttribute;
     return options.targets.map(id => {
         const generator = findGenerator(id);
         const directory = options.output
@@ -14,7 +16,7 @@ export function generateTargets(recording, options) {
             : path.join(options.outDir ?? '.', options.targets.length > 1 ? generator.id : '');
         const name = options.name ?? (options.output ? nameFromFileName(options.output) : 'recorded');
         const packageName = options.packageName ?? defaultPackage(generator, directory);
-        const files = generator.generate(recording, { name, packageName, testIdAttribute: options.testIdAttribute });
+        const files = generator.generate(recording, { name, packageName, testIdAttribute });
         if (options.output)
             files[0] = { ...files[0], path: path.basename(options.output) };
         return { generator, directory, files };

package/dist/locator.js

@@ -1,4 +1,5 @@
 import { asLocator, asLocatorWithFactory } from './vendor/playwright/locatorGenerators.js';
+import { parseAttributeSelector, parseSelector, visitAllSelectorParts } from './vendor/playwright/selectorParser.js';
 const nestedKinds = ['has', 'hasNot', 'and', 'or', 'chain'];
 export function isRegex(matcher) {
     return typeof matcher === 'object' && matcher !== null;
@@ -46,4 +47,20 @@ export function parseLocator(selector) {
 export function describeSelector(selector) {
     return asLocator('javascript', selector);
 }
+// Attributes behind the selector's getByTestId() calls: internal:testid=[data-testid="welcome"s]
+// gives ['data-testid']. The locator itself only keeps the test id ("welcome").
+export function testIdAttributesOf(selector) {
+    const names = [];
+    try {
+        visitAllSelectorParts(parseSelector(selector), part => {
+            // Several attributes are one comma-separated name, as in Playwright's testIdAttribute option.
+            if (part.name === 'internal:testid')
+                names.push(...parseAttributeSelector(part.body, true).attributes[0].name.split(','));
+        });
+    }
+    catch {
+        // Not a selector Playwright can parse; it has no getByTestId() call.
+    }
+    return names;
+}
 //# sourceMappingURL=locator.js.map

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/dist/recording.js

@@ -1,3 +1,4 @@
+import { testIdAttributesOf } from './locator.js';
 const defaultHeader = { browserName: 'chromium', launchOptions: {}, contextOptions: {} };
 export function parseRecording(text, source = 'recording') {
     let header;
@@ -48,6 +49,22 @@ export function signalsOf(actionInContext) {
         expect: find('expect'),
     };
 }
+// The test id attribute the recording was made with (`--test-id-attribute`), read back from its
+// getByTestId() selectors; undefined when there are none. Generated getByTestId() calls only keep
+// the test id, so the generated code has to configure this same attribute.
+export function recordedTestIdAttribute(recording) {
+    const names = new Set();
+    for (const { action, signals } of recording.actions) {
+        const selectors = signals.flatMap(signal => signal.name === 'expect' ? [signal.selector] : []);
+        if ('selector' in action)
+            selectors.push(action.selector);
+        for (const selector of selectors) {
+            for (const name of testIdAttributesOf(selector))
+                names.add(name);
+        }
+    }
+    return names.size ? [...names].join(',') : undefined;
+}
 // Mirrors Playwright's codegen: the first page and every page opened later get stable names
 // ("page", "page1", ...), assigned in the order the recording mentions them.
 export class PageAliases {

package/dist/ui/server.js

@@ -5,7 +5,7 @@ import path from 'node:path';
 import { generateTargets, writeTargets } from '../generate.js';
 import { generators } from '../generators/index.js';
 import { describeSelector } from '../locator.js';
-import { PageAliases, parseRecording } from '../recording.js';
+import { PageAliases, parseRecording, recordedTestIdAttribute } from '../recording.js';
 import { startCodegen } from '../record.js';
 const uiRoot = new URL('../../ui/', import.meta.url);
 const staticFiles = {
@@ -216,7 +216,7 @@ function render(state) {
     }
     const aliases = new PageAliases();
     const steps = recording.actions.map(({ action, pageGuid }) => ({ page: aliases.alias(pageGuid), text: describeAction(action) }));
-    return { steps, outputs };
+    return { steps, outputs, recordedTestIdAttribute: recordedTestIdAttribute(recording) };
 }
 function describeAction(action) {
     const target = 'selector' in action ? describeSelector(action.selector) : '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xylentis/testgen",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "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"
@@ -48,4 +49,4 @@
     "typescript": "^7.0.2",
     "vitest": "^5.0.3"
   }
-}
+}

package/ui/app.js

@@ -71,6 +71,12 @@ function render() {
     if (document.activeElement !== input && snapshot.settings[key] !== undefined)
       input.value = snapshot.settings[key];
   }
+  // The code keeps the test id attribute the recording was made with; the field is for the next one.
+  const recorded = snapshot.recordedTestIdAttribute;
+  const next = snapshot.settings.testIdAttribute;
+  $('test-id-note').textContent = recorded && next && recorded !== next
+    ? `This recording was made with "${recorded}", so the code keeps it. "${next}" applies to the next recording.`
+    : '';
   renderTargets();
   renderCode();
 }

package/ui/index.html

@@ -27,7 +27,8 @@
   <section class="options" aria-label="Generation options">
     <label>Test name <input id="name" value="recorded" spellcheck="false"></label>
     <label>Package <input id="package" placeholder="e.g. com.acme.e2e" spellcheck="false"></label>
-    <label>Test id attribute <input id="test-id" value="data-testid" spellcheck="false"></label>
+    <label>Test id attribute <input id="test-id" value="data-testid" spellcheck="false" aria-describedby="test-id-note"></label>
+    <span id="test-id-note" class="note" role="status"></span>
     <span class="spacer"></span>
     <label class="file-button">Open recording… <input id="open" type="file" accept=".jsonl,.json,.txt"></label>
     <a id="download-recording" class="button" href="/api/recording" download="recording.jsonl">Download recording</a>

package/ui/style.css

@@ -102,6 +102,7 @@ body.recording .status { color: var(--recording); font-weight: 600; }
 .file-button { border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; color: var(--text); }
 .file-button input { display: none; }
 .options .button { padding: 4px 10px; }
+.options .note { color: var(--text); }
 
 .error {
   margin: 12px 16px 0;