@lvce-editor/test-with-playwright 22.7.0 → 22.8.0

package/README.md

@@ -37,7 +37,11 @@ test('sample.hello-world', async () => {
 - `--reuse-page`: run browser tests through `/tests/_all.html` on one page
 - `--timeout`: test timeout in milliseconds, defaults to `30000` or `600000` with `--reuse-page`
 - `--browser`: browser engine to launch: `chromium`, `firefox`, or `webkit`
+- `--coverage`: collect JavaScript coverage with Chromium and write Istanbul reports to `coverage`
 - `--trace-focus`: add `traceFocus=true` to test URLs
+- `--svg-screenshot-dir`: compare a self-contained SVG screenshot after each passing test with the browser-specific snapshot in this directory
+- `--svg-screenshot-selector`: capture only the first matching element, such as `.Explorer`; defaults to the application body
+- `--update-svg-screenshots`: create or update SVG screenshots in `--svg-screenshot-dir`
 - `--electron-path`: path to an existing Electron app executable
 - `--electron-version`: Lvce release version override; by default Electron uses the installed `@lvce-editor/server` version
 - `--electron-cache-dir`: directory for downloaded Electron apps, defaults to `.test-with-playwright/electron`
@@ -47,9 +51,23 @@ test('sample.hello-world', async () => {
 ## Runtime Notes
 
 - `browser` keeps the server-backed HTML test execution flow.
+- JavaScript coverage is available for Chromium-based browser and Electron runs. It prints a coverage table and writes `coverage/coverage-final.json`, `coverage/coverage-summary.json`, `coverage/coverage.txt`, and `coverage/lcov.info`.
 - `--reuse-page` is browser-only. It loads `/tests/_all.html` once and reads JSON results from a hidden `.TestResults` element.
 - `electron` downloads or reuses the matching Lvce Electron app, launches it with Playwright and a temporary user data directory, and runs each test module against the first window.
 - `--electron-path` skips downloading and is useful for custom local builds.
+- SVG screenshots are not supported with `--reuse-page`, because that mode exposes only the final application state.
+
+## SVG Screenshot Tests
+
+Add `--svg-screenshot-dir=./snapshots` to compare each passing test's final application state with a committed SVG. Use `--svg-screenshot-selector=.Explorer` for a focused Explorer View snapshot. Snapshot names include the runtime, for example `viewlet.explorer-open.chromium.svg`, so browser-specific output does not conflict.
+
+Create or intentionally update the snapshots with:
+
+```sh
+npm run e2e -- --svg-screenshot-dir=./snapshots --update-svg-screenshots
+```
+
+The screenshot converts the rendered DOM to SVG shapes with the computed visual properties already applied. Fonts and images are inlined, test result overlays are excluded, animations and carets are frozen, and no page scripts are included. A mismatch writes an adjacent `.actual` file for inspection and fails the test.
 
 ## Reuse Page Results
 

package/dist/main.js

@@ -122,6 +122,7 @@ const getHelpMessage = () => {
 
 Options:
   --browser=<browser>       Browser to run tests in: chromium, firefox, or webkit
+  --coverage                Collect JavaScript coverage and write Istanbul reports
   --runtime=<runtime>       Runtime to run tests in: browser or electron
   --electron                Run tests in Electron and infer the matching Lvce version
   --filter=<pattern>        Only run tests matching the filter
@@ -129,9 +130,12 @@ Options:
   --reuse-page              Run browser tests through /tests/_all.html on one page
   --only-extension=<path>   Path to the extension under test
   --server-path=<path>      Path to the editor server entrypoint
+  --svg-screenshot-dir=<p>  Compare SVG screenshots with snapshots in this directory
+  --svg-screenshot-selector=<css>  Capture only the matching element
   --test-path=<path>        Path to the test files
   --timeout=<ms>            Test timeout in milliseconds
   --trace-focus             Log focus changes while tests run
+  --update-svg-screenshots  Create or update expected SVG screenshots
   --electron-path=<path>    Path to an existing Electron app executable
   --electron-version=<ver>  Override the inferred Lvce release version
   --electron-cache-dir=<p>  Directory for downloaded Electron apps
@@ -411,6 +415,16 @@ const setOptionalPositiveNumber = (result, key, value, name) => {
     result[key] = toPositiveNumber(value, name);
   }
 };
+const setOptionalString = (result, key, value) => {
+  if (value) {
+    result[key] = toCliString(value);
+  }
+};
+const setFlag = (result, key, value) => {
+  if (value) {
+    result[key] = true;
+  }
+};
 const getRuntime = parsed => {
   if (parsed.electron) {
     return 'electron';
@@ -426,6 +440,7 @@ const parseCliArgs = argv => {
   if (parsed.browser) {
     result.browser = String(parsed.browser);
   }
+  setFlag(result, 'coverage', parsed.coverage);
   const runtime = getRuntime(parsed);
   if (runtime) {
     result.runtime = runtime;
@@ -452,6 +467,8 @@ const parseCliArgs = argv => {
   if (parsed['server-path']) {
     result.serverPath = String(parsed['server-path']);
   }
+  setOptionalString(result, 'svgScreenshotDir', parsed['svg-screenshot-dir']);
+  setOptionalString(result, 'svgScreenshotSelector', parsed['svg-screenshot-selector']);
   if (parsed['electron-path']) {
     result.electronPath = String(parsed['electron-path']);
   }
@@ -472,6 +489,7 @@ const parseCliArgs = argv => {
   if (parsed['trace-focus']) {
     result.traceFocus = true;
   }
+  setFlag(result, 'updateSvgScreenshots', parsed['update-svg-screenshots']);
   return result;
 };
 
@@ -491,13 +509,15 @@ const defaultTimeout = 30_000;
 const reusePageDefaultTimeout = 600_000;
 const defaultOptions = {
   browser: 'chromium',
+  coverage: false,
   extensionPath: '',
   headless: false,
   help: false,
   reusePage: false,
   runtime: 'browser',
   testPath: '',
-  timeout: defaultTimeout
+  timeout: defaultTimeout,
+  updateSvgScreenshots: false
 };
 const isBrowser = value => {
   return browsers.includes(value);
@@ -519,9 +539,21 @@ const getOptions = ({
   }
   const browser = parsedArgs.browser ?? defaultOptions.browser;
   const runtime = parsedArgs.runtime ?? defaultOptions.runtime;
+  if (parsedArgs.coverage && runtime === 'browser' && browser !== 'chromium') {
+    throw new Error('[test-with-playwright] --coverage is only supported with Chromium-based browsers');
+  }
   if (parsedArgs.reusePage && runtime === 'electron') {
     throw new Error('[test-with-playwright] --reuse-page is only supported with --runtime=browser');
   }
+  if (parsedArgs.reusePage && parsedArgs.svgScreenshotDir) {
+    throw new Error('[test-with-playwright] --svg-screenshot-dir is not supported with --reuse-page');
+  }
+  if (parsedArgs.updateSvgScreenshots && !parsedArgs.svgScreenshotDir) {
+    throw new Error('[test-with-playwright] --update-svg-screenshots requires --svg-screenshot-dir');
+  }
+  if (parsedArgs.svgScreenshotSelector && !parsedArgs.svgScreenshotDir) {
+    throw new Error('[test-with-playwright] --svg-screenshot-selector requires --svg-screenshot-dir');
+  }
   const reusePage = parsedArgs.reusePage ?? defaultOptions.reusePage;
   const timeout = parsedArgs.timeout ?? (reusePage ? reusePageDefaultTimeout : defaultTimeout);
   return {
@@ -1920,12 +1952,14 @@ const RunAllTests = 'RunAllTests';
 const runAllTests = async ({
   browser,
   commandMap,
+  coverage,
   cwd,
   filter,
   headless,
   onlyExtension,
   reusePage,
   runtimeOptions,
+  svgScreenshotOptions,
   testPath,
   testWorkerUri,
   timeout,
@@ -1939,7 +1973,7 @@ const runAllTests = async ({
     path,
     stdio: 'inherit'
   });
-  await rpc.invoke(RunAllTests, onlyExtension, testPath, cwd, browser, headless, timeout, runtimeOptions, traceFocus, filter, reusePage);
+  await rpc.invoke(RunAllTests, onlyExtension, testPath, cwd, browser, headless, timeout, runtimeOptions, traceFocus, filter, reusePage, svgScreenshotOptions, coverage);
   await rpc.dispose();
 };
 
@@ -1955,6 +1989,7 @@ const handleCliArgs = async ({
   });
   const {
     browser,
+    coverage,
     electronArgs,
     electronCacheDir,
     electronEnv,
@@ -1967,9 +2002,12 @@ const handleCliArgs = async ({
     reusePage,
     runtime,
     serverPath,
+    svgScreenshotDir,
+    svgScreenshotSelector,
     testPath,
     timeout,
-    traceFocus
+    traceFocus,
+    updateSvgScreenshots
   } = options;
   if (help) {
     console.info(getHelpMessage());
@@ -2001,6 +2039,7 @@ const handleCliArgs = async ({
   await runAllTests({
     browser,
     commandMap,
+    coverage,
     cwd,
     filter,
     headless,
@@ -2008,6 +2047,16 @@ const handleCliArgs = async ({
     onlyExtension,
     reusePage,
     runtimeOptions,
+    ...(svgScreenshotDir && {
+      svgScreenshotOptions: {
+        directory: resolve$1(cwd, svgScreenshotDir),
+        name: runtime === 'electron' ? 'electron' : browser,
+        ...(svgScreenshotSelector && {
+          selector: svgScreenshotSelector
+        }),
+        update: updateSvgScreenshots
+      }
+    }),
     testPath,
     testWorkerUri,
     timeout,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/test-with-playwright",
-  "version": "22.7.0",
+  "version": "22.8.0",
   "description": "CLI tool for running Playwright tests",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
   "main": "dist/main.js",
   "bin": "bin/test-with-playwright.js",
   "dependencies": {
-    "@lvce-editor/test-with-playwright-worker": "22.7.0",
+    "@lvce-editor/test-with-playwright-worker": "22.8.0",
     "@lvce-editor/test-worker": "^17.2.0"
   },
   "engines": {