diff --git a/tests/components/ct-vue-cli/playwright/index.ts b/tests/components/ct-vue-cli/playwright/index.ts
index 2e32dc82f4..a5e4822f38 100644
--- a/tests/components/ct-vue-cli/playwright/index.ts
+++ b/tests/components/ct-vue-cli/playwright/index.ts
@@ -1,5 +1,6 @@
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
 import { router } from '../src/router';
+import Button from '../src/components/Button.vue';
 import '../src/assets/index.css';
 
 export type HooksConfig = {
@@ -10,6 +11,7 @@ export type HooksConfig = {
 beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
   if (hooksConfig?.routing)
     app.use(router);
+  app.component('Button', Button);
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
 });
 
diff --git a/tests/components/ct-vue-cli/tests/slots/slots.spec.ts b/tests/components/ct-vue-cli/tests/slots/slots.spec.ts
index 4c1e15a299..2af38036b5 100644
--- a/tests/components/ct-vue-cli/tests/slots/slots.spec.ts
+++ b/tests/components/ct-vue-cli/tests/slots/slots.spec.ts
@@ -5,20 +5,32 @@ import NamedSlots from '@/components/NamedSlots.vue';
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {
-      default: 'Main Content',
+      default: '<strong>Main Content</strong>',
     },
   });
-  await expect(component).toContainText('Main Content');
+  await expect(component.getByRole('strong')).toContainText('Main Content');
+});
+
+test('render a component as slot', async ({ mount }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: '<Button title="Submit" />', // component is registered globally in /playwright/index.ts
+    },
+  });
+  await expect(component).toContainText('Submit');
 });
 
 test('render a component with multiple slots', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {
-      default: ['one', 'two'],
+      default: [
+        '<div data-testid="one">One</div>',
+        '<div data-testid="two">Two</div>',
+      ],
     },
   });
-  await expect(component).toContainText('one');
-  await expect(component).toContainText('two');
+  await expect(component.getByTestId('one')).toContainText('One');
+  await expect(component.getByTestId('two')).toContainText('Two');
 });
 
 test('render a component with a named slot', async ({ mount }) => {
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 584b61ee7e..6d9330b5c5 100644
--- a/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx
+++ b/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx
@@ -4,8 +4,12 @@ import DefaultSlot from '@/components/DefaultSlot.vue';
 import NamedSlots from '@/components/NamedSlots.vue';
 
 test('render a default slot', async ({ mount }) => {
-  const component = await mount(<DefaultSlot>Main Content</DefaultSlot>);
-  await expect(component).toContainText('Main Content');
+  const component = await mount(
+    <DefaultSlot>
+      <strong>Main Content</strong>
+    </DefaultSlot>
+  );
+  await expect(component.getByRole('strong')).toContainText('Main Content');
 });
 
 test('render a component as slot', async ({ mount }) => {
@@ -17,15 +21,15 @@ test('render a component as slot', async ({ mount }) => {
   await expect(component).toContainText('Submit');
 });
 
-test('render a component with multiple children', async ({ mount }) => {
+test('render a component with multiple slots', async ({ mount }) => {
   const component = await mount(
     <DefaultSlot>
-      <div id="one">One</div>
-      <div id="two">Two</div>
+      <div data-testid="one">One</div>
+      <div data-testid="two">Two</div>
     </DefaultSlot>
   );
-  await expect(component.locator('#one')).toContainText('One');
-  await expect(component.locator('#two')).toContainText('Two');
+  await expect(component.getByTestId('one')).toContainText('One');
+  await expect(component.getByTestId('two')).toContainText('Two');
 });
 
 test('render a component with a named slot', async ({ mount }) => {