Smart Test Snippet Generator

A free Visual Studio Code extension for Playwright JavaScript/TypeScript automation.

v0.1.0 adds Smart Test Gap Advisor, an offline assistant that compares an open Playwright test file with a local static HTML form and suggests potentially missing native browser-validation checks. It keeps the original snippet generator.

1. Generate Smart Snippet (existing feature)

Select a supported Playwright action, open the Command Palette (Ctrl+Shift+P), and run Smart Snippet: Generate Smart Snippet (previously listed as Generate Smart Snippet). Supports page.click(), page.fill(), page.check(), page.hover(), and page.locator().

For example, selecting:

await page.fill('Email', 'test@example.com');

suggests this locator-based replacement:

await page.getByLabel('Email').fill('test@example.com');

Important: The original conversion command is a simple text transformation; it does not inspect the browser. Confirm the locator exists before running the resulting test.

2. Find Potential Test Gaps (new feature)

What it does: Reads actual HTML5 input attributes from a local .html/.htm file and compares supported validation cases with the open .ts/.js Playwright test file.

It proposes checks only when it finds source evidence:

Try it using the included demo

1. Open the downloaded source folder in VS Code. If using the packaged VSIX, install it from Extensions → … → Install from VSIX….
2. Open examples/registration.spec.ts.
3. Press Ctrl+Shift+P and run Smart Snippet: Find Potential Test Gaps.
4. Choose examples/registration.html.
5. You should see five potential suggestions for Email and Age: required Email, invalid Email, required Age, below Age minimum, and above Age maximum.
6. Select Preview all suggested checks, or select one and choose Preview suggested code / Insert at cursor in original test.
7. To insert, put your cursor on a blank line inside an existing Playwright test. Review the inserted code and run your Playwright test against the actual application.

Example of a generated check (when the HTML includes <input id="email" type="email" required>):

// Email: invalid email format — suggested from static HTML (type="email").
// Paste INSIDE a Playwright test after navigating to this form.
await page.locator('input[id="email"]').fill('not-an-email');
await expect(page.locator('input[id="email"]')).toBeInvalid();

When you use Gap Advisor, it also displays one informational diagnostic at the top of the test file. It updates if you edit the test or the selected HTML file during the VS Code session.

Scope and honest limitations

• Static, local HTML only in v0.1.0. It does not analyze dynamic React/Angular rendering, live websites, backend rules, data-driven test matrices, or remote pages.
• It recognizes only required, single-address type="email", and number min/max constraints. It skips controls without a unique ID/name selector.
• Detection of existing coverage is heuristic and scoped to the open test file. “Potential gap” is not proof that the scenario is absent elsewhere in the suite.
• The proposed CSS locators are derived from local HTML but are not verified in a running browser. HTML5 toBeInvalid() checks browser-native validity, not application-specific error messages.
• The sample Playwright test intentionally does not navigate to a working app. Supply your own valid URL and test environment when trying to execute tests.
• No telemetry, network calls, AI service, or code upload is used by this feature.

Develop and test

With Node.js installed:

npm install
npm run compile
npm test

Press F5 in VS Code to launch an Extension Development Host and try the commands on examples/registration.spec.ts.

To make a standard package after testing:

npm install -g @vscode/vsce
vsce package

If you want to help improve the extension, open an issue at GitHub Issues.

MIT licensed.