venetian 0.2.2-aarch64-linux → 0.2.3-aarch64-linux

data/exe/aarch64-linux/package/lib/tools/skills/playwright-component-testing/references/migration.md

@@ -22,6 +22,9 @@ form for the test to assert on). Plain data props travel through `mount(storyId,
 | `ctViteConfig`, `ctPort`, `ctTemplateDir`, `ctCacheDir` | Gone — the gallery runs through the app's own dev server; port lives in `webServer` + `baseURL`; location is `playwright/gallery/` |
 | `defineConfig` from `@playwright/experimental-ct-react` | Plain `defineConfig` from `@playwright/test`, with `baseURL` = gallery URL, `serviceWorkers: 'block'`, `reuseContext: true` (see `SKILL.md`) |
 
+The CT packages were removed in Playwright 1.63 and are no longer published, so migrate while
+pinned to Playwright 1.62 and upgrade once the last spec is ported.
+
 ## Steps
 
 1. Set up the gallery and config per `SKILL.md`. Keep the old CT project running until the last
@@ -39,13 +42,14 @@ form for the test to assert on). Plain data props travel through `mount(storyId,
 4. Port `beforeMount` hooks: app-wide setup into the gallery's `window.mount`; per-test
    `hooksConfig` branches into props interpreted by a story or decorator.
 5. When all specs are green, delete the CT project from the config, drop the
-   `@playwright/experimental-ct-*` dependency, and remove `playwright/index.html`,
-   `playwright/index.ts*` and `playwright/.cache`.
+   `@playwright/experimental-ct-*` dependency, remove `playwright/index.html`,
+   `playwright/index.ts*` and `playwright/.cache`, and lift the Playwright version pin.
 
 ## Gotchas
 
 - **Story ids are strings.** Renaming or moving a story breaks specs at runtime, not compile time
   — and the suffix-matching resolution can silently match a different story after a rename.
+  Gallery types (`typing.md`) turn registered ids into a compile-time check.
 - **Per-test JSX is gone.** Any test that built a different JSX tree per test (children matrices,
   inline wrappers) becomes one story export per composition.
 

data/exe/aarch64-linux/package/lib/tools/skills/playwright-component-testing/references/react.md

@@ -57,6 +57,8 @@ import type { WithTitle } from './Button.story';
 const component = await mount<typeof WithTitle>('components/Button/WithTitle', { title: 'Hello' });
 ```
 
+Alternatively, generate gallery types so the id itself is typed and no type import is needed: `mount('acme-ui/components/Button/WithTitle', { title: 'Hello' })` — see `references/typing.md`.
+
 ## CSS
 
 - Global stylesheets: import them in your gallery entry (`playwright/gallery/main.tsx`, e.g. `import '../../src/index.css'`), mirroring the app's own entry point.

data/exe/aarch64-linux/package/lib/tools/skills/playwright-component-testing/references/typing.md

@@ -0,0 +1,173 @@
+# Typing `mount()`
+
+`mount(storyId, props?)` accepts any string id and any serializable props. Two optional layers
+add type checking on top; both are supported and can be mixed in one project.
+
+| | Explicit story type | Gallery types |
+|---|---|---|
+| Call | `mount<typeof WithTitle>('components/Button/WithTitle', { title })` | `mount('acme-ui/components/Button/WithTitle', { title })` |
+| Checks | props and `update()` | props, `update()`, and the id itself (autocomplete, rename safety) |
+| Needs | `import type { WithTitle } from './Button.story'` in the spec | a generated `stories.d.ts` kept in sync by a gallery plugin |
+| Id grammar | any suffix the gallery resolves | full id, prefixed with the package name |
+
+## Explicit story type
+
+Pass the story type as a template argument. Nothing to set up; works in every project.
+
+```ts
+import type { WithTitle } from './Button.story';
+
+const component = await mount<typeof WithTitle>('components/Button/WithTitle', { title: 'Hello' });
+await component.update({ title: 'Again' });
+```
+
+Use `import type` so the story (and with it React/Vue and CSS imports) is never loaded into the
+Node test process. Function components, class components and `defineComponent` stories all infer
+their props; see the `Typed props` sections in `react.md` / `vue.md` for framework details.
+
+## Gallery types
+
+`@playwright/test` exports an empty `interface Stories {}`. When a story id is a key of `Stories`,
+`mount` types the props from that entry; any other string keeps untyped props, so adoption can be
+partial. A tiny Vite plugin next to the gallery generates `stories.d.ts`, which fills `Stories` in
+via module augmentation:
+
+```ts
+// playwright/gallery/stories.d.ts (generated)
+type StoriesOf<Prefix extends string, Mod> = { [K in keyof Mod & string as `${Prefix}/${K}`]: Mod[K] };
+
+declare module '@playwright/test' {
+  interface Stories extends
+    StoriesOf<'acme-ui/components/Button', typeof import('../../src/components/Button.story')>,
+    StoriesOf<'acme-ui/components/Expandable', typeof import('../../src/components/Expandable.story')> {}
+}
+
+export {};
+```
+
+One line per story file; export names and prop types come from the story module itself, so the
+file only changes when a story file is added, removed or moved. Specs then need no type imports:
+
+```ts
+const component = await mount('acme-ui/components/Button/WithTitle', { title: 'Hello' });
+//                            ^ autocompletes registered ids       ^ checked against WithTitle's props
+```
+
+### Namespace ids with the package name
+
+`Stories` is merged per TypeScript program. In a monorepo whose packages share one `tsconfig`,
+two packages both registering `components/Button/Default` with different props fail with
+`TS2320: Interface 'Stories' cannot simultaneously extend types ...` at the `Stories` declaration,
+and even distinct ids leak into each other's autocomplete. Prefix every id with the package name,
+`<package>/<path under src>/<Export>`, from the start, so the convention holds when a project
+becomes a package. Read the name from `package.json` in both places that derive ids, so they
+cannot drift:
+
+```ts
+// playwright/gallery/main.tsx
+import packageJSON from '../../package.json';
+
+const id = (f: string) => packageJSON.name + '/' + f.replace(/^(\.\.\/)+src\//, '').replace(/\.story\.\w+$/, '');
+```
+
+Suffix resolution keeps working at runtime, so `mount('Button/Primary')` still renders; only the
+full prefixed id is typed.
+
+### The plugin
+
+Framework-agnostic: it only lists story files. Adjust `storyFile` to match the gallery's glob.
+
+```ts
+// playwright/gallery/storyTypes.ts
+import fs from 'fs';
+import path from 'path';
+import type { Plugin } from 'vite';
+
+const storyFile = /\.story\.(tsx|jsx)$/;
+
+export function storyTypes(options: { prefix: string, src: string, outFile: string }): Plugin {
+  const generate = () => {
+    const content = render(listStoryFiles(options.src), options);
+    if (fs.existsSync(options.outFile) && fs.readFileSync(options.outFile, 'utf8') === content)
+      return;
+    fs.writeFileSync(options.outFile, content);
+  };
+  return {
+    name: 'story-types',
+    buildStart() {
+      this.addWatchFile(options.src);
+      generate();
+    },
+    configureServer(server) {
+      const onFile = (file: string) => {
+        if (storyFile.test(file))
+          generate();
+      };
+      server.watcher.on('add', onFile);
+      server.watcher.on('unlink', onFile);
+    },
+  };
+}
+
+function listStoryFiles(dir: string): string[] {
+  const result: string[] = [];
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const file = path.join(dir, entry.name);
+    if (entry.isDirectory())
+      result.push(...listStoryFiles(file));
+    else if (storyFile.test(entry.name))
+      result.push(file);
+  }
+  return result.sort();
+}
+
+function render(files: string[], { prefix, src, outFile }: { prefix: string, src: string, outFile: string }): string {
+  const outDir = path.dirname(outFile);
+  const posix = (p: string) => p.split(path.sep).join('/');
+  const entries = files.map(file => {
+    const id = prefix + '/' + posix(path.relative(src, file)).replace(storyFile, '');
+    const specifier = posix(path.relative(outDir, file)).replace(/\.\w+$/, '');
+    return `    StoriesOf<'${id}', typeof import('${specifier.startsWith('.') ? specifier : './' + specifier}')>`;
+  });
+  const stories = entries.length ? `interface Stories extends\n${entries.join(',\n')} {}` : 'interface Stories {}';
+  return `// Generated by storyTypes.ts, do not edit.
+
+type StoriesOf<Prefix extends string, Mod> = { [K in keyof Mod & string as \`\${Prefix}/\${K}\`]: Mod[K] };
+
+declare module '@playwright/test' {
+  ${stories}
+}
+
+export {};
+`;
+}
+```
+
+Register it on whichever Vite server serves the gallery (the app's `vite.config.ts`, or the
+standalone `playwright/vite.config.ts`):
+
+```ts
+import packageJSON from './package.json';
+import { storyTypes } from './playwright/gallery/storyTypes';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    storyTypes({
+      prefix: packageJSON.name,
+      src: path.resolve(__dirname, 'src'),
+      outFile: path.resolve(__dirname, 'playwright/gallery/stories.d.ts'),
+    }),
+  ],
+});
+```
+
+The file is regenerated on every dev-server start and build, and while the server runs, whenever
+a story file appears or disappears. Its content is deterministic, so **commit it**: type-checking
+in CI or an editor must not depend on a running dev server. Nothing imports the file, so list it
+explicitly in the project's `tsconfig` (`"files": ["playwright/gallery/stories.d.ts"]`) so that
+`tsc` and editors load it.
+
+For `.story.vue` single-file components, map the `default` export to the bare path in
+`StoriesOf` (`K extends 'default' ? Prefix : \`${Prefix}/${K}\``) and rely on `vue-tsc` for the
+SFC's types; a story without inferable props types as `unknown` props, which accepts anything.

data/exe/aarch64-linux/package/lib/tools/skills/playwright-component-testing/references/vue.md

@@ -68,6 +68,8 @@ import type { WithTitle } from './Button.story';
 const component = await mount<typeof WithTitle>('components/Button/WithTitle', { title: 'Hello' });
 ```
 
+Alternatively, generate gallery types so the id itself is typed and no type import is needed: `mount('acme-ui/components/Button/WithTitle', { title: 'Hello' })` — see `references/typing.md`.
+
 Options-API stories (`defineComponent({ props: { ... } })`) infer props the same way. For `.story.vue` SFC stories, prop types are only inferable when the setup generates SFC types (Volar/vue-tsc); otherwise pass the props type directly: `mount<{ title?: string }>('components/Button.primary', { title: 'Hello' })`.
 
 ## CSS

data/exe/aarch64-linux/package/lib/tools/skills/playwright-trace/SKILL.md

@@ -55,12 +55,12 @@ npx playwright trace actions --errors-only
 npx playwright trace action <action-id>
 ```
 
-The `action` command displays available snapshot phases (before, input, after) and the exact command to extract them.
+The `action` command displays available snapshot phases (before, action, after) and the exact command to extract them.
 
 ### Requests
 
 ```bash
-# All network requests: method, status, URL, duration, size
+# All network requests: start time (on the `trace actions` clock), method, status, URL, duration, size
 npx playwright trace requests
 
 # Filter by URL pattern
@@ -94,6 +94,9 @@ npx playwright trace console --browser
 
 # Only stdout/stderr (no browser console)
 npx playwright trace console --stdio
+
+# Filter by message text pattern
+npx playwright trace console --grep "failed to fetch"
 ```
 
 ### Errors
@@ -112,7 +115,7 @@ The `snapshot` command loads the DOM snapshot for an action into a headless brow
 npx playwright trace snapshot <action-id>
 
 # Use a specific phase
-npx playwright trace snapshot <action-id> --name before
+npx playwright trace snapshot <action-id> --phase before
 
 # Run eval to query the DOM
 npx playwright trace snapshot <action-id> -- eval "document.title"

data/exe/aarch64-linux/package/lib/tools/utils/extension.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var extension_exports = {};
 __export(extension_exports, {
   findPlaywrightExtensionProfile: () => findPlaywrightExtensionProfile,
+  isExtensionInstalledInProfile: () => isExtensionInstalledInProfile,
   isPlaywrightExtensionInstalled: () => isPlaywrightExtensionInstalled,
   playwrightExtensionId: () => playwrightExtensionId,
   playwrightExtensionInstallUrl: () => playwrightExtensionInstallUrl
@@ -77,12 +78,21 @@ async function isPlaywrightExtensionInstalled(userDataDir) {
 async function isExtensionInstalledInProfile(profileDir) {
   if (await pathExists(import_path.default.join(profileDir, "Extensions", playwrightExtensionId)))
     return true;
+  for (const fileName of ["Preferences", "Secure Preferences"]) {
+    if (await hasExtensionSettingsRecord(import_path.default.join(profileDir, fileName)))
+      return true;
+  }
+  return false;
+}
+async function hasExtensionSettingsRecord(prefsPath) {
+  let prefs;
   try {
-    const prefs = await import_fs.default.promises.readFile(import_path.default.join(profileDir, "Preferences"), "utf-8");
-    return prefs.includes(`"${playwrightExtensionId}"`);
+    prefs = JSON.parse(await import_fs.default.promises.readFile(prefsPath, "utf-8"));
   } catch {
     return false;
   }
+  const record = prefs?.extensions?.settings?.[playwrightExtensionId];
+  return !!record && typeof record === "object" && Object.keys(record).length > 0;
 }
 async function pathExists(p) {
   try {
@@ -95,6 +105,7 @@ async function pathExists(p) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   findPlaywrightExtensionProfile,
+  isExtensionInstalledInProfile,
   isPlaywrightExtensionInstalled,
   playwrightExtensionId,
   playwrightExtensionInstallUrl