feat(ct): typed hooks config (#18003)

packages/playwright-ct-react/hooks.d.ts

@@ -18,5 +18,9 @@ type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
-export declare function beforeMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void;
-export declare function afterMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void;
+export declare function beforeMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+): void;
+export declare function afterMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+): void;

packages/playwright-ct-react/index.d.ts

@@ -27,11 +27,11 @@ import type { InlineConfig } from 'vite';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   use?: BasePlaywrightTestConfig['use'] & {
-    ctPort?: number,
-    ctTemplateDir?: string,
-    ctCacheDir?: string,
-    ctViteConfig?: InlineConfig
-  }
+    ctPort?: number;
+    ctTemplateDir?: string;
+    ctCacheDir?: string;
+    ctViteConfig?: InlineConfig;
+  };
 };
 
 type JsonPrimitive = string | number | boolean | null;
@@ -39,8 +39,8 @@ type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
 
-export interface MountOptions {
-  hooksConfig?: JsonObject;
+export interface MountOptions<HooksConfig extends JsonObject> {
+  hooksConfig?: HooksConfig;
 }
 
 interface MountResult extends Locator {
@@ -49,11 +49,15 @@ interface MountResult extends Locator {
 }
 
 export interface ComponentFixtures {
-  mount(component: JSX.Element, options?: MountOptions): Promise<MountResult>;
+  mount<HooksConfig extends JsonObject>(
+    component: JSX.Element,
+    options?: MountOptions<HooksConfig>
+  ): Promise<MountResult>;
 }
 
 export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
-  PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
+  PlaywrightWorkerArgs & PlaywrightWorkerOptions
+>;
 
 export { expect, devices } from '@playwright/test';

packages/playwright-ct-solid/hooks.d.ts

@@ -18,5 +18,9 @@ type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
-export declare function beforeMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void;
-export declare function afterMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void;
+export declare function beforeMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+): void;
+export declare function afterMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+): void;

packages/playwright-ct-solid/index.d.ts

@@ -27,11 +27,11 @@ import type { InlineConfig } from 'vite';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   use?: BasePlaywrightTestConfig['use'] & {
-    ctPort?: number,
-    ctTemplateDir?: string,
-    ctCacheDir?: string,
-    ctViteConfig?: InlineConfig
-  }
+    ctPort?: number;
+    ctTemplateDir?: string;
+    ctCacheDir?: string;
+    ctViteConfig?: InlineConfig;
+  };
 };
 
 type JsonPrimitive = string | number | boolean | null;
@@ -39,8 +39,8 @@ type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
 
-export interface MountOptions {
-  hooksConfig?: JsonObject;
+export interface MountOptions<HooksConfig extends JsonObject> {
+  hooksConfig?: HooksConfig;
 }
 
 interface MountResult extends Locator {
@@ -48,11 +48,15 @@ interface MountResult extends Locator {
 }
 
 export interface ComponentFixtures {
-  mount(component: JSX.Element, options?: MountOptions): Promise<MountResult>;
+  mount<HooksConfig extends JsonObject>(
+    component: JSX.Element,
+    options?: MountOptions<HooksConfig>
+  ): Promise<MountResult>;
 }
 
 export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
-  PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
+  PlaywrightWorkerArgs & PlaywrightWorkerOptions
+>;
 
 export { expect, devices } from '@playwright/test';

packages/playwright-ct-svelte/hooks.d.ts

@@ -14,11 +14,18 @@
  * limitations under the License.
  */
 
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponent } from 'svelte';
 
 type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
-export declare function beforeMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void;
-export declare function afterMount(callback: (params: { hooksConfig: JsonObject, svelteComponent: SvelteComponent }) => Promise<void>): void;
+export declare function beforeMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+): void;
+export declare function afterMount<HooksConfig extends JsonObject>(
+  callback: (params: {
+    hooksConfig: HooksConfig;
+    svelteComponent: SvelteComponent;
+  }) => Promise<void>
+): void;

packages/playwright-ct-svelte/index.d.ts

@@ -24,15 +24,15 @@ import type {
   Locator,
 } from '@playwright/test';
 import type { InlineConfig } from 'vite';
-import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime'
+import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   use?: BasePlaywrightTestConfig['use'] & {
-    ctPort?: number,
-    ctTemplateDir?: string,
-    ctCacheDir?: string,
-    ctViteConfig?: InlineConfig
-  }
+    ctPort?: number;
+    ctTemplateDir?: string;
+    ctCacheDir?: string;
+    ctViteConfig?: InlineConfig;
+  };
 };
 
 type JsonPrimitive = string | number | boolean | null;
@@ -42,27 +42,36 @@ type JsonObject = { [Key in string]?: JsonValue };
 
 type Slot = string | string[];
 
-export interface MountOptions<Component extends SvelteComponent = SvelteComponent> {
+export interface MountOptions<
+  HooksConfig extends JsonObject,
+  Component extends SvelteComponent
+> {
   props?: ComponentProps<Component>;
   slots?: Record<string, Slot> & { default?: Slot };
   on?: Record<string, Function>;
-  hooksConfig?: JsonObject;
+  hooksConfig?: HooksConfig;
 }
 
 interface MountResult<Component extends SvelteComponent> extends Locator {
   unmount(): Promise<void>;
-  update(options: Omit<MountOptions<Component>, 'hooksConfig'|'slots'>): Promise<void>
+  update(
+    options: Omit<MountOptions<never, Component>, 'hooksConfig' | 'slots'>
+  ): Promise<void>;
 }
 
 interface ComponentFixtures {
-  mount<Component extends SvelteComponent>(
+  mount<
+    HooksConfig extends JsonObject,
+    Component extends SvelteComponent = SvelteComponent
+  >(
     component: new (...args: any[]) => Component,
-    options?: MountOptions<Component>
+    options?: MountOptions<HooksConfig, Component>
   ): Promise<MountResult<Component>>;
 }
 
 export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
-  PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
+  PlaywrightWorkerArgs & PlaywrightWorkerOptions
+>;
 
 export { expect, devices } from '@playwright/test';

packages/playwright-ct-vue/hooks.d.ts

@@ -14,11 +14,19 @@
  * limitations under the License.
  */
 
-import { App, ComponentPublicInstance } from 'vue';
+import type { App, ComponentPublicInstance } from 'vue';
 
 type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
-export declare function beforeMount(callback: (params: { app: App, hooksConfig: JsonObject }) => Promise<void>): void;
-export declare function afterMount(callback: (params: { app: App, hooksConfig: JsonObject, instance: ComponentPublicInstance }) => Promise<void>): void;
+export declare function beforeMount<HooksConfig extends JsonObject>(
+  callback: (params: { app: App; hooksConfig: HooksConfig }) => Promise<void>
+): void;
+export declare function afterMount<HooksConfig extends JsonObject>(
+  callback: (params: {
+    app: App;
+    hooksConfig: HooksConfig;
+    instance: ComponentPublicInstance;
+  }) => Promise<void>
+): void;

packages/playwright-ct-vue/index.d.ts

@@ -27,11 +27,11 @@ import type { InlineConfig } from 'vite';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   use?: BasePlaywrightTestConfig['use'] & {
-    ctPort?: number,
-    ctTemplateDir?: string,
-    ctCacheDir?: string,
-    ctViteConfig?: InlineConfig
-  }
+    ctPort?: number;
+    ctTemplateDir?: string;
+    ctCacheDir?: string;
+    ctViteConfig?: InlineConfig;
+  };
 };
 
 type JsonPrimitive = string | number | boolean | null;
@@ -41,31 +41,46 @@ type JsonObject = { [Key in string]?: JsonValue };
 
 type Slot = string | string[];
 
-export interface MountOptions<Props = Record<string, unknown>> {
+export interface MountOptions<
+HooksConfig extends JsonObject,
+Props extends Record<string, unknown>
+> {
   props?: Props;
   slots?: Record<string, Slot> & { default?: Slot };
   on?: Record<string, Function>;
-  hooksConfig?: JsonObject;
+  hooksConfig?: HooksConfig;
 }
 
-interface MountResult<Props = Record<string, unknown>> extends Locator {
+interface MountResult<
+  Props extends Record<string, unknown>
+> extends Locator {
   unmount(): Promise<void>;
-  update(options: Omit<MountOptions<Props>, 'hooksConfig'>): Promise<void>
+  update(options: Omit<MountOptions<never, Props>, 'hooksConfig'>): Promise<void>;
 }
 
 interface MountResultJsx extends Locator {
   unmount(): Promise<void>;
-  update(component: JSX.Element): Promise<void>
+  update(component: JSX.Element): Promise<void>;
 }
 
 export interface ComponentFixtures {
   mount(component: JSX.Element): Promise<MountResultJsx>;
-  mount(component: any, options?: MountOptions): Promise<MountResult>;
-  mount<Props>(component: any, options: MountOptions & { props: Props }): Promise<MountResult<Props>>;
+  mount<HooksConfig extends JsonObject>(
+    component: any,
+    options?: MountOptions<HooksConfig, Record<string, unknown>>
+  ): Promise<MountResult<Record<string, unknown>>>;
+  mount<
+    HooksConfig extends JsonObject,
+    Props extends Record<string, unknown> = Record<string, unknown>
+  >(
+    component: any,
+    options: MountOptions<HooksConfig, never> & { props: Props }
+  ): Promise<MountResult<Props>>;
 }
 
 export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
-  PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
+  PlaywrightWorkerArgs & PlaywrightWorkerOptions
+>;
 
 export { expect, devices } from '@playwright/test';

packages/playwright-ct-vue2/hooks.d.ts

@@ -20,5 +20,18 @@ type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 type JsonArray = JsonValue[];
 type JsonObject = { [Key in string]?: JsonValue };
-export declare function beforeMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void;
-export declare function afterMount(callback: (params: { hooksConfig: JsonObject, instance: CombinedVueInstance<Vue, object, object, object, Record<never, any>> }) => Promise<void>): void;
+export declare function beforeMount<HooksConfig extends JsonObject>(
+  callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
+): void;
+export declare function afterMount<HooksConfig extends JsonObject>(
+  callback: (params: {
+    hooksConfig: HooksConfig;
+    instance: CombinedVueInstance<
+      Vue,
+      object,
+      object,
+      object,
+      Record<never, any>
+    >;
+  }) => Promise<void>
+): void;

packages/playwright-ct-vue2/index.d.ts

@@ -27,11 +27,11 @@ import type { InlineConfig } from 'vite';
 
 export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   use?: BasePlaywrightTestConfig['use'] & {
-    ctPort?: number,
-    ctTemplateDir?: string,
-    ctCacheDir?: string,
-    ctViteConfig?: InlineConfig
-  }
+    ctPort?: number;
+    ctTemplateDir?: string;
+    ctCacheDir?: string;
+    ctViteConfig?: InlineConfig;
+  };
 };
 
 type JsonPrimitive = string | number | boolean | null;
@@ -41,31 +41,49 @@ type JsonObject = { [Key in string]?: JsonValue };
 
 type Slot = string | string[];
 
-export interface MountOptions<Props = Record<string, unknown>> {
+export interface MountOptions<
+  HooksConfig extends JsonObject,
+  Props extends Record<string, unknown>
+> {
   props?: Props;
   slots?: Record<string, Slot> & { default?: Slot };
   on?: Record<string, Function>;
   hooksConfig?: JsonObject;
 }
 
-interface MountResult<Props = Record<string, unknown>> extends Locator {
+interface MountResult<
+  HooksConfig extends JsonObject,
+  Props extends Record<string, unknown>
+> extends Locator {
   unmount(): Promise<void>;
-  update(options: Omit<MountOptions<Props>, 'hooksConfig'>): Promise<void>
+  update(
+    options: Omit<MountOptions<HooksConfig, Props>, 'hooksConfig'>
+  ): Promise<void>;
 }
 
 interface MountResultJsx extends Locator {
   unmount(): Promise<void>;
-  update(component: JSX.Element): Promise<void>
+  update(component: JSX.Element): Promise<void>;
 }
 
 export interface ComponentFixtures {
   mount(component: JSX.Element): Promise<MountResultJsx>;
-  mount(component: any, options?: MountOptions): Promise<MountResult>;
-  mount<Props>(component: any, options: MountOptions & { props: Props }): Promise<MountResult<Props>>;
+  mount<HooksConfig extends JsonObject>(
+    component: any,
+    options?: MountOptions<HooksConfig, any>
+  ): Promise<MountResult<HooksConfig, any>>;
+  mount<
+    HooksConfig extends JsonObject,
+    Props extends Record<string, unknown> = Record<string, unknown>
+  >(
+    component: any,
+    options: MountOptions<HooksConfig, any> & { props: Props }
+  ): Promise<MountResult<HooksConfig, Props>>;
 }
 
 export const test: TestType<
   PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
-  PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
+  PlaywrightWorkerArgs & PlaywrightWorkerOptions
+>;
 
 export { expect, devices } from '@playwright/test';

tests/components/ct-react-vite/playwright/index.ts

@@ -2,10 +2,14 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks';
 
-beforeMount(async ({ hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });
 
-afterMount(async ({}) => {
+afterMount<HooksConfig>(async () => {
   console.log(`After mount`);
 });

tests/components/ct-react-vite/src/tests.spec.tsx

@@ -5,6 +5,7 @@ import MultipleChildren from './components/MultipleChildren';
 import MultiRoot from './components/MultiRoot';
 import Counter from './components/Counter';
 import EmptyFragment from './components/EmptyFragment';
+import type { HooksConfig } from '../playwright';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
@@ -101,7 +102,7 @@ test('execute callback when a child node is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = [];
   page.on('console', m => messages.push(m.text()));
-  await mount(<Button title="Submit" />, {
+  await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: {
       route: 'A'
     }

tests/components/ct-react/playwright/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/playwright/index.js"></script>
+    <script type="module" src="/playwright/index.ts"></script>
   </body>
 </html>

tests/components/ct-react/playwright/index.ts

@@ -1,10 +1,14 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks';
 
-beforeMount(async ({ hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });
 
-afterMount(async ({}) => {
+afterMount<HooksConfig>(async () => {
   console.log(`After mount`);
 });

tests/components/ct-react/src/tests.spec.tsx

@@ -8,6 +8,7 @@ import MultipleChildren from './components/MultipleChildren';
 import MultiRoot from './components/MultiRoot';
 import Counter from './components/Counter';
 import EmptyFragment from './components/EmptyFragment';
+import type { HooksConfig } from '../playwright';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
@@ -104,7 +105,7 @@ test('execute callback when a child node is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = [];
   page.on('console', m => messages.push(m.text()));
-  await mount(<Button title="Submit" />, {
+  await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: {
       route: 'A'
     }

tests/components/ct-solid/playwright/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/playwright/index.js"></script>
+    <script type="module" src="/playwright/index.ts"></script>
   </body>
 </html>

tests/components/ct-solid/playwright/index.ts

@@ -1,10 +1,14 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-solid/hooks';
 
-beforeMount(async ({ hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });
 
-afterMount(async ({}) => {
+afterMount<HooksConfig>(async () => {
   console.log(`After mount`);
 });

tests/components/ct-solid/src/tests.spec.tsx

@@ -4,6 +4,7 @@ import DefaultChildren from './components/DefaultChildren';
 import MultipleChildren from './components/MultipleChildren';
 import MultiRoot from './components/MultiRoot';
 import EmptyFragment from './components/EmptyFragment';
+import type { HooksConfig } from '../playwright';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
@@ -76,7 +77,7 @@ test('execute callback when a child node is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = [];
   page.on('console', (m) => messages.push(m.text()));
-  await mount(<Button title="Submit" />, {
+  await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: {
       route: 'A',
     },

tests/components/ct-svelte-vite/playwright/index.ts

@@ -1,11 +1,14 @@
-//@ts-check
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks';
 
-beforeMount(async ({ hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });
 
-afterMount(async ({}) => {
+afterMount<HooksConfig>(async () => {
   console.log(`After mount`);
 });

tests/components/ct-svelte-vite/src/tests.spec.ts

@@ -21,6 +21,7 @@ import DefaultSlot from './components/DefaultSlot.svelte';
 import NamedSlots from './components/NamedSlots.svelte';
 import MultiRoot from './components/MultiRoot.svelte';
 import Empty from './components/Empty.svelte';
+import type { HooksConfig } from '../playwright';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
@@ -102,7 +103,7 @@ test('render a component with a named slot', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(Button, {
+  await mount<HooksConfig>(Button, {
     props: {
       title: 'Submit'
     },

tests/components/ct-svelte/playwright/index.ts

@@ -2,10 +2,14 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks';
 
-beforeMount(async ({ hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });
   
-afterMount(async ({}) => {
+afterMount<HooksConfig>(async () => {
   console.log(`After mount`);
 });

tests/components/ct-svelte/src/tests.spec.ts

@@ -22,6 +22,7 @@ import DefaultSlot from './components/DefaultSlot.svelte';
 import NamedSlots from './components/NamedSlots.svelte'
 import MultiRoot from './components/MultiRoot.svelte';
 import Empty from './components/Empty.svelte';
+import type { HooksConfig } from '../playwright';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
@@ -108,7 +109,7 @@ test('render a component without options', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(Button, {
+  await mount<HooksConfig>(Button, {
     props: {
       title: 'Submit'
     },

tests/components/ct-vue-cli/playwright/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/playwright/index.js"></script>
+    <script type="module" src="/playwright/index.ts"></script>
   </body>
 </html>

tests/components/ct-vue-cli/playwright/index.ts

@@ -2,10 +2,14 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
 
-beforeMount(async ({ app, hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
 });
 
-afterMount(async ({ instance }) => {
+afterMount<HooksConfig>(async ({ instance }) => {
   console.log(`After mount el: ${instance.$el.constructor.name}`);
 });

tests/components/ct-vue-cli/src/notation-jsx.spec.tsx

@@ -5,6 +5,7 @@ import DefaultSlot from './components/DefaultSlot.vue'
 import NamedSlots from './components/NamedSlots.vue'
 import MultiRoot from './components/MultiRoot.vue'
 import EmptyTemplate from './components/EmptyTemplate.vue'
+import type { HooksConfig } from '../playwright'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -83,7 +84,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(<Button title="Submit" />, {
+  await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: { route: 'A' }
   })
   expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])

tests/components/ct-vue-cli/src/notation-vue.spec.ts

@@ -6,6 +6,7 @@ import NamedSlots from './components/NamedSlots.vue'
 import MultiRoot from './components/MultiRoot.vue'
 import Component from './components/Component.vue'
 import EmptyTemplate from './components/EmptyTemplate.vue'
+import type { HooksConfig } from '../playwright'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -89,7 +90,7 @@ test('render a component without options', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(Button, {
+  await mount<HooksConfig>(Button, {
     props: {
       title: 'Submit'
     },

tests/components/ct-vue-vite/playwright/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/playwright/index.js"></script>
+    <script type="module" src="/playwright/index.ts"></script>
   </body>
 </html>

tests/components/ct-vue-vite/playwright/index.ts

@@ -2,10 +2,14 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
 
-beforeMount(async ({ app, hooksConfig }) => {
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
 });
 
-afterMount(async ({ instance }) => {
+afterMount<HooksConfig>(async ({ instance }) => {
   console.log(`After mount el: ${instance.$el.constructor.name}`);
 });

tests/components/ct-vue-vite/src/notation-jsx.spec.tsx

@@ -5,6 +5,7 @@ import DefaultSlot from './components/DefaultSlot.vue'
 import NamedSlots from './components/NamedSlots.vue'
 import MultiRoot from './components/MultiRoot.vue'
 import EmptyTemplate from './components/EmptyTemplate.vue'
+import type { HooksConfig } from '../playwright'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -113,7 +114,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(<Button title="Submit" />, {
+  await mount<HooksConfig>(<Button title="Submit" />, {
     hooksConfig: { route: 'A' }
   })
   expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])

tests/components/ct-vue-vite/src/notation-vue.spec.ts

@@ -7,6 +7,7 @@ import NamedSlots from './components/NamedSlots.vue'
 import MultiRoot from './components/MultiRoot.vue'
 import Component from './components/Component.vue'
 import EmptyTemplate from './components/EmptyTemplate.vue'
+import type { HooksConfig } from '../playwright'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -118,7 +119,7 @@ test('render a component without options', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(Button, {
+  await mount<HooksConfig>(Button, {
     props: {
       title: 'Submit'
     },

tests/components/ct-vue2-cli/playwright/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/playwright/index.js"></script>
+    <script type="module" src="/playwright/index.ts"></script>
   </body>
 </html>

tests/components/ct-vue2-cli/playwright/index.ts

@@ -2,6 +2,10 @@
 import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue2/hooks';
 
+export type hooksConfig = {
+  route: string;
+}
+
 beforeMount(async ({ hooksConfig }) => {
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
 });

tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx

@@ -4,6 +4,7 @@ import Counter from './components/Counter.vue'
 import DefaultSlot from './components/DefaultSlot.vue'
 import NamedSlots from './components/NamedSlots.vue'
 import EmptyTemplate from './components/EmptyTemplate.vue'
+import type { hooksConfig } from '../playwright'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -113,7 +114,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(<Button title="Submit" />, {
+  await mount<hooksConfig>(<Button title="Submit" />, {
     hooksConfig: { route: 'A' }
   })
   expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount el: HTMLButtonElement'])

tests/components/ct-vue2-cli/src/notation-vue.spec.ts

@@ -5,6 +5,7 @@ import DefaultSlot from './components/DefaultSlot.vue'
 import NamedSlots from './components/NamedSlots.vue'
 import Component from './components/Component.vue'
 import EmptyTemplate from './components/EmptyTemplate.vue'
+import type { hooksConfig } from '../playwright'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -122,7 +123,7 @@ test('render a component without options', async ({ mount }) => {
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = []
   page.on('console', m => messages.push(m.text()))
-  await mount(Button, {
+  await mount<hooksConfig>(Button, {
     props: {
       title: 'Submit'
     },