@xylentis/testgen 1.1.0 → 1.2.0

package/dist/cli.js

@@ -1,18 +1,22 @@
 #!/usr/bin/env node
 import { spawn } from 'node:child_process';
 import fs from 'node:fs';
+import os from 'node:os';
 import path from 'node:path';
 import { parseArgs } from 'node:util';
+import { checkFiles, checkRecording } from './checks.js';
 import { generateTargets, writeTargets } from './generate.js';
-import { generators } from './generators/index.js';
+import { findGenerator, generators } from './generators/index.js';
 import { startCodegen, waitForExit } from './record.js';
-import { parseRecording } from './recording.js';
+import { parseRecording, recordedTestIdAttribute, serializeRecording } from './recording.js';
+import { collectSecrets, redactRecording } from './secrets.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.
 
 Usage:
-  testgen ui [--port <port>] [--no-open]            Web UI: record and watch the code of every target live
+  testgen ui [--port <port>] [--no-open]            Web UI: record, edit and replay steps, watch the code
+                                                    of every target live
   testgen record [url] [options]                    Record in a browser, generate when it is closed
   testgen generate <recording.jsonl> [options]      Generate tests from a saved recording
   testgen targets                                   List the available targets
@@ -24,7 +28,12 @@ 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
+      --log-steps              Selenium: log every step and assertion result (console, TestNG report)
+      --data-driven            Typed, selected and asserted values become columns of a CSV file next
+                               to the test (Java: src/test/resources/<package>/, Go: testdata/); the
+                               test runs once per row. An existing CSV file is never overwritten
       --save <file.jsonl>      record: where to keep the recording (default: <out-dir>/recording.jsonl)
 
 Recorder options (record), same as playwright codegen:
@@ -39,7 +48,9 @@ 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' },
+    'log-steps': { type: 'boolean' },
+    'data-driven': { type: 'boolean' },
     'save': { type: 'string' },
     'browser': { type: 'string', short: 'b' },
     'channel': { type: 'string' },
@@ -66,40 +77,69 @@ 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,
+        logSteps: values['log-steps'],
+        dataDriven: values['data-driven'],
     };
+    if (command === 'generate' || command === 'record') {
+        const requested = [
+            ['logSteps', '--log-steps', values['log-steps']],
+            ['dataDriven', '--data-driven', values['data-driven']],
+        ];
+        for (const [feature, flag, on] of requested) {
+            const ignoredBy = on ? targets.filter(id => !findGenerator(id).features?.includes(feature)) : [];
+            if (ignoredBy.length)
+                console.error(`note: ${flag} only applies to ${generators.filter(g => g.features?.includes(feature)).map(g => g.id).join(', ')}; ignored for ${ignoredBy.join(', ')}.`);
+        }
+    }
     switch (command) {
-        case 'targets':
+        case 'targets': {
+            const width = Math.max(...generators.map(g => g.id.length)) + 2;
             for (const generator of generators)
-                console.log(`${generator.id.padEnd(16)}${generator.framework} (${generator.language})`);
+                console.log(`${generator.id.padEnd(width)}${generator.framework} (${generator.language})`);
             return;
+        }
         case 'generate': {
             const file = rest[0];
             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}.`);
+            const typed = collectSecrets(recording).list.filter(secret => secret.value);
+            if (typed.length) {
+                console.error(`note: ${file} holds the values typed into password fields; the tests read them from ${typed.map(s => s.name).join(', ')}. `
+                    + 'To drop them from the file, open it in testgen ui and download it again.');
+            }
             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).');
-                const [{ files }] = generateTargets(recording, output);
-                process.stdout.write(files[0].content);
-                for (const support of files.slice(1))
-                    console.error(`note: the test also needs ${support.path}; use --out-dir or --output to write it.`);
+                const outputs = generateTargets(recording, output);
+                process.stdout.write(outputs[0].files[0].content);
+                for (const other of outputs[0].files.slice(1))
+                    console.error(`note: the test also needs ${other.path}; use --out-dir or --output to write it.`);
+                reportChecks(recording, outputs);
                 return;
             }
-            report(writeTargets(generateTargets(recording, { ...output, outDir: values['out-dir'] })));
+            const outputs = generateTargets(recording, { ...output, outDir: values['out-dir'] });
+            report(writeTargets(outputs));
+            reportChecks(recording, outputs);
             return;
         }
         case 'record': {
             const outDir = values['out-dir'] ?? (values.output ? undefined : 'generated');
             const save = path.resolve(values.save ?? path.join(outDir ?? path.dirname(values.output), 'recording.jsonl'));
             fs.mkdirSync(path.dirname(save), { recursive: true });
-            fs.rmSync(save, { force: true });
+            // The recorder writes typed passwords too; the saved recording leaves them out.
+            const workDir = fs.mkdtempSync(path.join(os.tmpdir(), 'testgen-record-'));
+            const recordingFile = path.join(workDir, 'recording.jsonl');
             const codegen = {
                 browser: values.browser,
                 channel: values.channel,
@@ -112,20 +152,32 @@ 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);
+            const recorder = startCodegen(rest[0], recordingFile, codegen);
             // Ctrl+C ends the recording, not testgen: the tests are still generated afterwards.
             const stopRecorder = () => recorder.kill('SIGINT');
             process.on('SIGINT', stopRecorder);
             const code = await waitForExit(recorder);
             process.off('SIGINT', stopRecorder);
-            if (!fs.existsSync(save))
-                throw new Error(`Nothing was recorded (the recorder exited with code ${code}).`);
-            console.log(`Recording saved to ${path.relative(process.cwd(), save)}`);
-            report(writeTargets(generateTargets(parseRecording(fs.readFileSync(save, 'utf8'), save), { ...output, outDir })));
+            let recording;
+            try {
+                if (!fs.existsSync(recordingFile))
+                    throw new Error(`Nothing was recorded (the recorder exited with code ${code}).`);
+                recording = parseRecording(fs.readFileSync(recordingFile, 'utf8'), save);
+            }
+            finally {
+                fs.rmSync(workDir, { recursive: true, force: true });
+            }
+            fs.writeFileSync(save, serializeRecording(redactRecording(recording)));
+            const secrets = collectSecrets(recording).list;
+            console.log(`Recording saved to ${path.relative(process.cwd(), save)}`
+                + (secrets.length ? ` without the values typed into password fields (the tests read ${secrets.map(s => s.name).join(', ')})` : ''));
+            const outputs = generateTargets(recording, { ...output, outDir });
+            report(writeTargets(outputs));
+            reportChecks(recording, outputs);
             return;
         }
         case 'ui': {
@@ -142,9 +194,28 @@ async function main(argv) {
             throw new Error(`Unknown command "${command}".\n\n${usage}`);
     }
 }
-function report(files) {
-    for (const file of files)
+function report({ written, kept }) {
+    for (const file of written)
         console.log(`  wrote ${path.relative(process.cwd(), file)}`);
+    for (const file of kept)
+        console.log(`  kept  ${path.relative(process.cwd(), file)} (test data is never overwritten; delete it to start over)`);
+}
+// Checks of the recording, then what each target cannot do; targets with the same TODO are listed once.
+function reportChecks(recording, outputs) {
+    const byMessage = new Map();
+    for (const { generator, files } of outputs) {
+        for (const check of checkFiles(files)) {
+            const entry = byMessage.get(check.message) ?? { level: check.level, targets: [] };
+            entry.targets.push(generator.id);
+            byMessage.set(check.message, entry);
+        }
+    }
+    const lines = [
+        ...checkRecording(recording).map(check => `${check.level === 'warning' ? 'warning' : 'note'}: ${check.message}`),
+        ...[...byMessage].map(([message, { level, targets }]) => `${level === 'warning' ? 'warning' : 'note'}: ${targets.join(', ')}: ${message}`),
+    ];
+    for (const line of lines)
+        console.error(line);
 }
 function openInBrowser(url) {
     const command = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'cmd' : 'xdg-open';

package/dist/editing.js

@@ -0,0 +1,167 @@
+import { describeSelector } from './locator.js';
+import { isEnvironmentVariable, pageOrderProblem, shortcutOf } from './recording.js';
+import { collectSecrets } from './secrets.js';
+import { locatorOrSelectorAsSelector } from './vendor/playwright/locatorParser.js';
+// `secrets` saves collecting them again for each step.
+export function stepFields(recording, index, secrets = collectSecrets(recording)) {
+    const step = stepAt(recording, index);
+    const { action } = step;
+    const fields = {};
+    if ('selector' in action)
+        fields.locator = describeSelector(action.selector);
+    const label = valueLabels[action.name];
+    if (label) {
+        fields.valueLabel = label;
+        fields.value = valueOf(action);
+    }
+    if (action.name === 'assertText')
+        fields.substring = action.substring;
+    if (action.name === 'assertChecked')
+        fields.checked = action.checked;
+    if (action.name === 'fill') {
+        const secret = secrets.of(index);
+        if (secret)
+            fields.secret = secret.name;
+        fields.secretChosen = step.secret !== undefined;
+    }
+    return fields;
+}
+export function deleteStep(recording, index) {
+    stepAt(recording, index);
+    return checked({ ...recording, actions: recording.actions.filter((_, i) => i !== index) });
+}
+// Moves step `index` so that it becomes step `to`.
+export function moveStep(recording, index, to) {
+    const step = stepAt(recording, index);
+    stepAt(recording, to);
+    const actions = recording.actions.filter((_, i) => i !== index);
+    actions.splice(to, 0, step);
+    return checked({ ...recording, actions });
+}
+// `testIdAttribute` reads getByTestId() in a typed locator.
+export function editStep(recording, index, change, testIdAttribute) {
+    const step = stepAt(recording, index);
+    let action = step.action;
+    const edited = { ...step };
+    if (change.locator !== undefined) {
+        if (!('selector' in action))
+            throw new Error(`Step ${index + 1} has no locator.`);
+        action = { ...action, selector: parseLocatorText(change.locator, testIdAttribute) };
+    }
+    if (change.value !== undefined)
+        action = withValue(action, change.value, index);
+    if (change.substring !== undefined) {
+        if (action.name !== 'assertText')
+            throw new Error(`Step ${index + 1} does not check a text.`);
+        action = { ...action, substring: change.substring };
+    }
+    if (change.checked !== undefined) {
+        if (action.name !== 'assertChecked')
+            throw new Error(`Step ${index + 1} does not check a checkbox.`);
+        action = { ...action, checked: change.checked };
+    }
+    if (change.secret !== undefined) {
+        if (action.name !== 'fill')
+            throw new Error(`Only steps that type a value can keep it in an environment variable.`);
+        if (typeof change.secret === 'string' && !isEnvironmentVariable(change.secret))
+            throw new Error(`"${change.secret}" is not an environment variable name: use letters, digits and _, e.g. TEST_PASSWORD.`);
+        if (change.secret === null)
+            delete edited.secret;
+        else
+            edited.secret = change.secret;
+    }
+    edited.action = action;
+    return checked({ ...recording, actions: recording.actions.map((s, i) => i === index ? edited : s) });
+}
+const valueLabels = {
+    fill: 'Text',
+    select: 'Options',
+    assertText: 'Expected text',
+    assertValue: 'Expected value',
+    navigate: 'URL',
+    openPage: 'URL',
+    press: 'Key',
+    setInputFiles: 'Files',
+};
+function valueOf(action) {
+    switch (action.name) {
+        case 'fill':
+        case 'assertText':
+            return action.text;
+        case 'select':
+            return action.options.join('\n');
+        case 'assertValue':
+            return action.value;
+        case 'navigate':
+        case 'openPage':
+            return action.url;
+        case 'press':
+            return shortcutOf(action);
+        case 'setInputFiles':
+            return action.files.join('\n');
+        default:
+            return '';
+    }
+}
+function withValue(action, value, index) {
+    const lines = value.split(/\r?\n/).map(line => line.trim()).filter(Boolean);
+    switch (action.name) {
+        case 'fill':
+            return { ...action, text: value };
+        case 'assertText':
+            return { ...action, text: value };
+        case 'assertValue':
+            return { ...action, value };
+        case 'select':
+            if (!lines.length)
+                throw new Error(`Step ${index + 1} needs at least one option to select.`);
+            return { ...action, options: lines };
+        case 'setInputFiles':
+            return { ...action, files: lines };
+        case 'navigate':
+        case 'openPage':
+            if (!value.trim() && action.name === 'navigate')
+                throw new Error(`Step ${index + 1} needs a URL.`);
+            return { ...action, url: value.trim() };
+        case 'press':
+            return { ...action, ...parseShortcut(value, index) };
+        default:
+            throw new Error(`Step ${index + 1} has no value to change.`);
+    }
+}
+// "Shift+Enter" → key and the recorder's modifier bits (Alt 1, Control 2, Meta 4, Shift 8).
+function parseShortcut(shortcut, index) {
+    const parts = shortcut.trim().split(/\+(?=.)/);
+    const key = parts.pop();
+    if (!key)
+        throw new Error(`Step ${index + 1} needs a key, e.g. Enter or Control+A.`);
+    const bits = { Alt: 1, Control: 2, ControlOrMeta: 2, Meta: 4, Shift: 8 };
+    let modifiers = 0;
+    for (const part of parts) {
+        if (!bits[part])
+            throw new Error(`Unknown modifier "${part}" in step ${index + 1}: use Alt, Control, ControlOrMeta, Meta or Shift.`);
+        modifiers |= bits[part];
+    }
+    return { key, modifiers };
+}
+// A locator as written in a Playwright test (with or without `page.`) or a selector → selector.
+function parseLocatorText(text, testIdAttribute) {
+    const locator = text.trim().replace(/^(await\s+)?page\d*\./, '').replace(/;$/, '');
+    const selector = locator ? locatorOrSelectorAsSelector('javascript', locator, testIdAttribute) : '';
+    if (!selector)
+        throw new Error(`Cannot read the locator "${text.trim()}". Write it as in a Playwright test, e.g. getByRole('button', { name: 'Sign in' }), getByLabel('Email') or locator('#email').`);
+    return selector;
+}
+function stepAt(recording, index) {
+    const step = Number.isInteger(index) ? recording.actions[index] : undefined;
+    if (!step)
+        throw new Error(`There is no step ${index + 1}.`);
+    return step;
+}
+function checked(recording) {
+    const problem = pageOrderProblem(recording);
+    if (problem)
+        throw new Error(problem);
+    return recording;
+}
+//# sourceMappingURL=editing.js.map

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,12 +16,25 @@ 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, logSteps: options.logSteps, dataDriven: options.dataDriven });
         if (options.output)
             files[0] = { ...files[0], path: path.basename(options.output) };
-        return { generator, directory, files };
+        // Java data files are classpath resources: src/test/java/<package> → src/test/resources/<package>.
+        const resources = generator.language === 'Java' ? resourceDirectory(directory) : undefined;
+        return {
+            generator,
+            directory,
+            files: files.map(file => file.data && resources ? { ...file, path: path.relative(directory, path.join(resources, file.path)) } : file),
+        };
     });
 }
+function resourceDirectory(directory) {
+    const absolute = path.resolve(directory);
+    const match = /([\\/]src[\\/](?:test|main|it)[\\/])java(?=[\\/]|$)/.exec(absolute);
+    if (!match)
+        return undefined;
+    return path.join(absolute.slice(0, match.index) + match[1] + 'resources', absolute.slice(match.index + match[0].length));
+}
 // Java: package from the path below src/test/java (or src/main/java). Go: the directory name when it
 // is a valid package name (the generator falls back to "e2e").
 function defaultPackage(generator, directory) {
@@ -33,15 +48,19 @@ function defaultPackage(generator, directory) {
     return undefined;
 }
 export function writeTargets(outputs) {
-    const written = [];
+    const result = { written: [], kept: [] };
     for (const { directory, files } of outputs) {
-        fs.mkdirSync(directory, { recursive: true });
         for (const file of files) {
             const filePath = path.join(directory, file.path);
+            if (file.data && fs.existsSync(filePath)) {
+                result.kept.push(filePath);
+                continue;
+            }
+            fs.mkdirSync(path.dirname(filePath), { recursive: true });
             fs.writeFileSync(filePath, file.content);
-            written.push(filePath);
+            result.written.push(filePath);
         }
     }
-    return written;
+    return result;
 }
 //# sourceMappingURL=generate.js.map

package/dist/generators/index.js

@@ -1,8 +1,8 @@
 import { playwrightGo } from './playwright-go.js';
 import { playwrightTs } from './playwright-ts.js';
-import { seleniumJava } from './selenium-java.js';
+import { seleniumJava, seleniumJavaTestng } from './selenium-java.js';
 import { seleniumJs } from './selenium-js.js';
-export const generators = [playwrightTs, playwrightGo, seleniumJava, seleniumJs];
+export const generators = [playwrightTs, playwrightGo, seleniumJava, seleniumJavaTestng, seleniumJs];
 export function findGenerator(id) {
     const generator = generators.find(g => g.id === id);
     if (!generator)

package/dist/generators/javascript-body.js

@@ -1,13 +1,40 @@
-import { asLocator } from '../vendor/playwright/locatorGenerators.js';
+import { JavaScriptLocatorFactory, asLocator, asLocatorWithFactory } from '../vendor/playwright/locatorGenerators.js';
 import { formatObject } from '../vendor/playwright/stringUtils.js';
 import { PageAliases, isBlankUrl, shortcutOf, signalsOf, toKeyboardModifiers } from '../recording.js';
+import { isEmpty, joinPieces } from './test-data.js';
 import { singleQuote } from './writer.js';
+const javaScriptPieces = {
+    text: singleQuote,
+    column: (column) => `row.${column.name}`,
+    secret: (secret) => `secret(${singleQuote(secret.name)})`,
+};
+// `const rows = readCsv(...)` for a data-driven test, its column list wrapped at 120 characters.
+export function writeReadCsv(w, dataFile, columns) {
+    w.line(`// Data-driven: the test runs once per row of ${dataFile}, next to this file. Its first row holds the recorded values.`);
+    const head = `const rows = readCsv(path.join(__dirname, ${singleQuote(dataFile)}), [`;
+    const names = columns.map(c => singleQuote(c.name));
+    if (head.length + names.join(', ').length + 3 <= 120) {
+        w.line(`${head}${names.join(', ')}]);`);
+        return;
+    }
+    w.line(head);
+    const lines = [''];
+    for (const name of names) {
+        const last = lines[lines.length - 1];
+        if (last && 2 + last.length + name.length + 2 > 120)
+            lines.push(name + ',');
+        else
+            lines[lines.length - 1] = (last ? last + ' ' : '') + name + ',';
+    }
+    w.indent(() => lines.forEach(line => w.line(line)));
+    w.line(']);');
+}
 // Test body written against the Playwright JavaScript API. Used by the Playwright target and by
 // the Selenium JavaScript target, whose support file implements the same API on WebDriver.
 // Follows Playwright's own `playwright-test` code generator.
 export function writeJavaScriptBody(w, recording, options) {
     const aliases = new PageAliases();
-    for (const actionInContext of recording.actions) {
+    recording.actions.forEach((actionInContext, index) => {
         const action = actionInContext.action;
         // Resolve before skipping, so pages are numbered in the order they are opened.
         const pageAlias = aliases.alias(actionInContext.pageGuid);
@@ -16,11 +43,11 @@ export function writeJavaScriptBody(w, recording, options) {
                 w.line(`const ${pageAlias} = await page.context().newPage();`);
             if (!isBlankUrl(action.url))
                 w.line(`await ${pageAlias}.goto(${singleQuote(action.url)});`);
-            continue;
+            return;
         }
         // The test runner closes pages itself.
         if (action.name === 'closePage')
-            continue;
+            return;
         const signals = signalsOf(actionInContext);
         if (signals.dialog) {
             w.line(`${pageAlias}.once('dialog', dialog => {`);
@@ -38,17 +65,22 @@ export function writeJavaScriptBody(w, recording, options) {
             w.line(`const ${download}Promise = ${pageAlias}.waitForEvent('download');`);
         if (signals.download && !download)
             w.line(options.todo('the next step starts a download, which is not checked here.'));
-        w.line(actionCall(pageAlias, actionInContext, options));
+        const literals = {
+            value: (text) => options.values.value(index, text),
+            locator: (selector) => javaScriptLocator(selector, text => expression(options.values.locator(index, text))),
+        };
+        w.line(actionCall(pageAlias, actionInContext, options, literals));
         if (popupAlias)
             w.line(`const ${popupAlias} = await ${popupAlias}Promise;`);
         if (download)
             w.line(`const ${download} = await ${download}Promise;`);
         if (recording.header.generateExpectSignal && signals.expect)
-            w.line(`await expect(${pageAlias}.${asLocator('javascript', signals.expect.selector)}).toBeVisible();`);
-    }
+            w.line(`await expect(${pageAlias}.${literals.locator(signals.expect.selector)}).toBeVisible();`);
+    });
 }
-function actionCall(subject, { action }, options) {
-    const locator = 'selector' in action ? `${subject}.${asLocator('javascript', action.selector)}` : subject;
+function actionCall(subject, { action }, options, literals) {
+    const locator = 'selector' in action ? `${subject}.${literals.locator(action.selector)}` : subject;
+    const value = (text) => joinPieces(literals.value(text), javaScriptPieces);
     switch (action.name) {
         case 'click': {
             const method = action.clickCount === 2 ? 'dblclick' : 'click';
@@ -71,7 +103,7 @@ function actionCall(subject, { action }, options) {
         case 'uncheck':
             return `await ${locator}.uncheck();`;
         case 'fill':
-            return `await ${locator}.fill(${singleQuote(action.text)});`;
+            return `await ${locator}.fill(${value(action.text)});`;
         case 'setInputFiles':
             return `await ${locator}.setInputFiles(${formatObject(action.files.length === 1 ? action.files[0] : action.files)});`;
         case 'press':
@@ -79,15 +111,15 @@ function actionCall(subject, { action }, options) {
         case 'navigate':
             return `await ${subject}.goto(${singleQuote(action.url)});`;
         case 'select':
-            return `await ${locator}.selectOption(${formatObject(action.options.length === 1 ? action.options[0] : action.options)});`;
+            return `await ${locator}.selectOption(${action.options.length === 1 ? value(action.options[0]) : formatObject(action.options)});`;
         case 'assertText':
-            return `await expect(${locator}).${action.substring ? 'toContainText' : 'toHaveText'}(${singleQuote(action.text)});`;
+            return `await expect(${locator}).${action.substring ? 'toContainText' : 'toHaveText'}(${value(action.text)});`;
         case 'assertChecked':
             return `await expect(${locator})${action.checked ? '' : '.not'}.toBeChecked();`;
         case 'assertVisible':
             return `await expect(${locator}).toBeVisible();`;
         case 'assertValue':
-            return `await expect(${locator}).${action.value ? `toHaveValue(${singleQuote(action.value)})` : 'toBeEmpty()'};`;
+            return `await expect(${locator}).${isEmpty(literals.value(action.value)) ? 'toBeEmpty()' : `toHaveValue(${value(action.value)})`};`;
         case 'assertSnapshot':
             if (action.ariaSnapshot)
                 return `await expect(${locator}).toMatchAriaSnapshot(${singleQuote(action.ariaSnapshot)});`;
@@ -96,6 +128,52 @@ function actionCall(subject, { action }, options) {
             return options.todo(`unsupported recorded action ${JSON.stringify(action)}`);
     }
 }
+// An expression for a locator text, or undefined to keep the text as a literal.
+function expression(pieces) {
+    return pieces.length === 1 && 'text' in pieces[0] ? undefined : joinPieces(pieces, javaScriptPieces);
+}
+// Playwright's own JavaScript locator code, with some texts written as expressions. Those texts are
+// rendered as placeholders first, so that everything else keeps Playwright's formatting.
+function javaScriptLocator(selector, textExpression) {
+    const expressions = [];
+    const placeholder = (text) => {
+        const replacement = typeof text === 'string' ? textExpression(text) : undefined;
+        if (replacement === undefined)
+            return text;
+        expressions.push(replacement);
+        return `__testgen_${expressions.length - 1}__`;
+    };
+    const inner = new JavaScriptLocatorFactory();
+    const factory = {
+        generateLocator(base, kind, body, options = {}) {
+            switch (kind) {
+                case 'role':
+                    return inner.generateLocator(base, kind, body, { ...options, name: placeholder(options.name) });
+                case 'default':
+                    return inner.generateLocator(base, kind, body, { ...options, hasText: placeholder(options.hasText), hasNotText: placeholder(options.hasNotText) });
+                case 'has-text':
+                case 'has-not-text':
+                case 'test-id':
+                case 'text':
+                case 'alt':
+                case 'placeholder':
+                case 'label':
+                case 'title':
+                    return inner.generateLocator(base, kind, placeholder(body), options);
+                default:
+                    return inner.generateLocator(base, kind, body, options);
+            }
+        },
+        chainLocators: locators => inner.chainLocators(locators),
+    };
+    try {
+        return asLocatorWithFactory(factory, selector).replace(/'__testgen_(\d+)__'/g, (_, i) => expressions[Number(i)]);
+    }
+    catch {
+        // Not a selector Playwright can turn into locators: asLocator() keeps it as it is.
+        return asLocator('javascript', selector);
+    }
+}
 function formatOptions(value) {
     return Object.values(value).some(v => v !== undefined) ? formatObject(value) : '';
 }