diff --git a/packages/playwright-ct-vue/registerSource.mjs b/packages/playwright-ct-vue/registerSource.mjs
index 407ee9ed5a..c78b3f6ac2 100644
--- a/packages/playwright-ct-vue/registerSource.mjs
+++ b/packages/playwright-ct-vue/registerSource.mjs
@@ -80,10 +80,13 @@ const __pwAllListeners = new Map();
/**
* @param {JsxComponentChild} child
- * @returns {import('vue').VNode | string}
*/
function __pwCreateChild(child) {
- return typeof child === 'string' ? child : __pwCreateWrapper(child);
+ if (Array.isArray(child))
+ return child.map(grandChild => __pwCreateChild(grandChild));
+ if (isComponent(child))
+ return __pwCreateWrapper(child);
+ return child;
}
/**
@@ -133,9 +136,6 @@ function __pwSlotToFunction(slot) {
* @param {Component} component
*/
function __pwCreateComponent(component) {
- if (typeof component === 'string')
- return component;
-
let componentFunc = __pwRegistry.get(component.type);
componentFunc = componentFunc || component.type;
diff --git a/packages/playwright-ct-vue2/registerSource.mjs b/packages/playwright-ct-vue2/registerSource.mjs
index f6985fc97f..e67a22dd2b 100644
--- a/packages/playwright-ct-vue2/registerSource.mjs
+++ b/packages/playwright-ct-vue2/registerSource.mjs
@@ -79,7 +79,11 @@ async function __pwResolveComponent(component) {
* @param {Component | JsxComponentChild} child
*/
function __pwCreateChild(child) {
- return typeof child === 'string' ? child : __pwCreateWrapper(child);
+ if (Array.isArray(child))
+ return child.map(grandChild => __pwCreateChild(grandChild));
+ if (isComponent(child))
+ return __pwCreateWrapper(child);
+ return child;
}
/**
diff --git a/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx b/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx
index 6d9330b5c5..64da25ed0b 100644
--- a/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx
+++ b/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx
@@ -44,3 +44,9 @@ test('render a component with a named slot', async ({ mount }) => {
await expect(component).toContainText('Main Content');
await expect(component).toContainText('Footer');
});
+
+test('render array as child', async ({ mount }) => {
+ const component = await mount({[{[4]}
,[[[2,3]
]]]});
+ await expect(component.getByRole('heading', { level: 4 })).toHaveText('4');
+ await expect(component.getByRole('paragraph')).toHaveText('[2,3]');
+});
diff --git a/tests/components/ct-vue-vite/tests/slots/slots.spec.tsx b/tests/components/ct-vue-vite/tests/slots/slots.spec.tsx
index 6d9330b5c5..64da25ed0b 100644
--- a/tests/components/ct-vue-vite/tests/slots/slots.spec.tsx
+++ b/tests/components/ct-vue-vite/tests/slots/slots.spec.tsx
@@ -44,3 +44,9 @@ test('render a component with a named slot', async ({ mount }) => {
await expect(component).toContainText('Main Content');
await expect(component).toContainText('Footer');
});
+
+test('render array as child', async ({ mount }) => {
+ const component = await mount({[{[4]}
,[[[2,3]
]]]});
+ await expect(component.getByRole('heading', { level: 4 })).toHaveText('4');
+ await expect(component.getByRole('paragraph')).toHaveText('[2,3]');
+});
diff --git a/tests/components/ct-vue2-cli/tests/slots/slots.spec.tsx b/tests/components/ct-vue2-cli/tests/slots/slots.spec.tsx
index 2bde43e7f4..cde13ca16a 100644
--- a/tests/components/ct-vue2-cli/tests/slots/slots.spec.tsx
+++ b/tests/components/ct-vue2-cli/tests/slots/slots.spec.tsx
@@ -40,3 +40,9 @@ test('render a component with a named slot', async ({ mount }) => {
await expect(component).toContainText('Main Content');
await expect(component).toContainText('Footer');
});
+
+test('render array as child', async ({ mount }) => {
+ const component = await mount({[{[4]}
,[[[2,3]
]]]});
+ await expect(component.getByRole('heading', { level: 4 })).toHaveText('4');
+ await expect(component.getByRole('paragraph')).toHaveText('[2,3]');
+});