diff --git a/packages/playwright-ct-vue/registerSource.mjs b/packages/playwright-ct-vue/registerSource.mjs index 2dfb41defd..a5955353db 100644 --- a/packages/playwright-ct-vue/registerSource.mjs +++ b/packages/playwright-ct-vue/registerSource.mjs @@ -223,9 +223,12 @@ const appKey = Symbol('appKey'); const wrapperKey = Symbol('wrapperKey'); window.playwrightMount = async (component, rootElement, hooksConfig) => { - const wrapper = createWrapper(component); const app = createApp({ - render: () => wrapper + render: () => { + const wrapper = createWrapper(component); + rootElement[wrapperKey] = wrapper; + return wrapper; + } }); setDevtoolsHook(createDevTools(), {}); @@ -233,7 +236,6 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => { await hook({ app, hooksConfig }); const instance = app.mount(rootElement); rootElement[appKey] = app; - rootElement[wrapperKey] = wrapper; for (const hook of /** @type {any} */(window).__pw_hooks_after_mount || []) await hook({ app, hooksConfig, instance }); diff --git a/tests/components/ct-vue-vite/playwright/index.ts b/tests/components/ct-vue-vite/playwright/index.ts index c9951c0163..ff31bfe92f 100644 --- a/tests/components/ct-vue-vite/playwright/index.ts +++ b/tests/components/ct-vue-vite/playwright/index.ts @@ -1,12 +1,13 @@ -//@ts-check -import '../src/assets/index.css'; import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks'; +import Button from '../src/components/Button.vue'; +import '../src/assets/index.css'; export type HooksConfig = { route: string; } beforeMount(async ({ app, hooksConfig }) => { + app.component('Button', Button); console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`); }); diff --git a/tests/components/ct-vue-vite/src/notation-vue.spec.js b/tests/components/ct-vue-vite/src/notation-vue.spec.js index fa5a1a51ce..03ba922f2f 100644 --- a/tests/components/ct-vue-vite/src/notation-vue.spec.js +++ b/tests/components/ct-vue-vite/src/notation-vue.spec.js @@ -87,6 +87,15 @@ test('render a default slot', async ({ mount }) => { await expect(component.getByRole('strong')).toContainText('Main Content') }) +test('render a component as slot', async ({ mount, page }) => { + const component = await mount(DefaultSlot, { + slots: { + default: '