diff --git a/tests/components/ct-react-vite/src/components/Counter.tsx b/tests/components/ct-react-vite/src/components/Counter.tsx
index acb2cc5f1a..cce35000c8 100644
--- a/tests/components/ct-react-vite/src/components/Counter.tsx
+++ b/tests/components/ct-react-vite/src/components/Counter.tsx
@@ -18,8 +18,8 @@ import { useLayoutEffect, useRef, useState } from "react"
      }
    }, [])
    return <div onClick={() => props.onClick?.('hello')}>
-     <div id="props">{ props.count }</div>
-     <div id="remount-count">{ remountCount }</div>
+     <div data-testid="props">{ props.count }</div>
+     <div data-testid="remount-count">{ remountCount }</div>
      { props.children }
    </div>
  }
diff --git a/tests/components/ct-react-vite/tests/callbacks.spec.tsx b/tests/components/ct-react-vite/tests/callbacks.spec.tsx
index d8d5010523..d9d15dac16 100644
--- a/tests/components/ct-react-vite/tests/callbacks.spec.tsx
+++ b/tests/components/ct-react-vite/tests/callbacks.spec.tsx
@@ -23,6 +23,6 @@ test('execute callback when a child node is clicked', async ({ mount }) => {
       <span onClick={() => (clickFired = true)}>Main Content</span>
     </DefaultChildren>
   );
-  await component.locator('text=Main Content').click();
+  await component.getByText('Main Content').click();
   expect(clickFired).toBeTruthy();
 });
diff --git a/tests/components/ct-react-vite/tests/children.spec.tsx b/tests/components/ct-react-vite/tests/children.spec.tsx
index d676315253..2db9fea017 100644
--- a/tests/components/ct-react-vite/tests/children.spec.tsx
+++ b/tests/components/ct-react-vite/tests/children.spec.tsx
@@ -22,12 +22,12 @@ test('render a component as child', async ({ mount }) => {
 test('render multiple children', async ({ mount }) => {
   const component = await mount(
     <DefaultChildren>
-      <div id="one">One</div>
-      <div id="two">Two</div>
+      <div data-testid="one">One</div>
+      <div data-testid="two">Two</div>
     </DefaultChildren>
   );
-  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 named children', async ({ mount }) => {
diff --git a/tests/components/ct-react-vite/tests/update.spec.tsx b/tests/components/ct-react-vite/tests/update.spec.tsx
index 1e3ef16239..cb2b06258a 100644
--- a/tests/components/ct-react-vite/tests/update.spec.tsx
+++ b/tests/components/ct-react-vite/tests/update.spec.tsx
@@ -3,13 +3,13 @@ import Counter from '@/components/Counter';
 
 test('update props without remounting', async ({ mount }) => {
   const component = await mount(<Counter count={9001} />);
-  await expect(component.locator('#props')).toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('9001');
 
   await component.update(<Counter count={1337} />);
   await expect(component).not.toContainText('9001');
-  await expect(component.locator('#props')).toContainText('1337');
+  await expect(component.getByTestId('props')).toContainText('1337');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update callbacks without remounting', async ({ mount }) => {
@@ -26,7 +26,7 @@ test('update callbacks without remounting', async ({ mount }) => {
   await component.click();
   expect(messages).toEqual(['hello']);
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update slots without remounting', async ({ mount }) => {
@@ -37,5 +37,5 @@ test('update slots without remounting', async ({ mount }) => {
   await expect(component).not.toContainText('Default Slot');
   await expect(component).toContainText('Test Slot');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
diff --git a/tests/components/ct-react/src/components/Counter.tsx b/tests/components/ct-react/src/components/Counter.tsx
index acb2cc5f1a..cce35000c8 100644
--- a/tests/components/ct-react/src/components/Counter.tsx
+++ b/tests/components/ct-react/src/components/Counter.tsx
@@ -18,8 +18,8 @@ import { useLayoutEffect, useRef, useState } from "react"
      }
    }, [])
    return <div onClick={() => props.onClick?.('hello')}>
-     <div id="props">{ props.count }</div>
-     <div id="remount-count">{ remountCount }</div>
+     <div data-testid="props">{ props.count }</div>
+     <div data-testid="remount-count">{ remountCount }</div>
      { props.children }
    </div>
  }
diff --git a/tests/components/ct-react/tests/callbacks.spec.tsx b/tests/components/ct-react/tests/callbacks.spec.tsx
index d8d5010523..d9d15dac16 100644
--- a/tests/components/ct-react/tests/callbacks.spec.tsx
+++ b/tests/components/ct-react/tests/callbacks.spec.tsx
@@ -23,6 +23,6 @@ test('execute callback when a child node is clicked', async ({ mount }) => {
       <span onClick={() => (clickFired = true)}>Main Content</span>
     </DefaultChildren>
   );
-  await component.locator('text=Main Content').click();
+  await component.getByText('Main Content').click();
   expect(clickFired).toBeTruthy();
 });
diff --git a/tests/components/ct-react/tests/children.spec.tsx b/tests/components/ct-react/tests/children.spec.tsx
index d676315253..2db9fea017 100644
--- a/tests/components/ct-react/tests/children.spec.tsx
+++ b/tests/components/ct-react/tests/children.spec.tsx
@@ -22,12 +22,12 @@ test('render a component as child', async ({ mount }) => {
 test('render multiple children', async ({ mount }) => {
   const component = await mount(
     <DefaultChildren>
-      <div id="one">One</div>
-      <div id="two">Two</div>
+      <div data-testid="one">One</div>
+      <div data-testid="two">Two</div>
     </DefaultChildren>
   );
-  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 named children', async ({ mount }) => {
diff --git a/tests/components/ct-react/tests/update.spec.tsx b/tests/components/ct-react/tests/update.spec.tsx
index 1e3ef16239..cb2b06258a 100644
--- a/tests/components/ct-react/tests/update.spec.tsx
+++ b/tests/components/ct-react/tests/update.spec.tsx
@@ -3,13 +3,13 @@ import Counter from '@/components/Counter';
 
 test('update props without remounting', async ({ mount }) => {
   const component = await mount(<Counter count={9001} />);
-  await expect(component.locator('#props')).toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('9001');
 
   await component.update(<Counter count={1337} />);
   await expect(component).not.toContainText('9001');
-  await expect(component.locator('#props')).toContainText('1337');
+  await expect(component.getByTestId('props')).toContainText('1337');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update callbacks without remounting', async ({ mount }) => {
@@ -26,7 +26,7 @@ test('update callbacks without remounting', async ({ mount }) => {
   await component.click();
   expect(messages).toEqual(['hello']);
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update slots without remounting', async ({ mount }) => {
@@ -37,5 +37,5 @@ test('update slots without remounting', async ({ mount }) => {
   await expect(component).not.toContainText('Default Slot');
   await expect(component).toContainText('Test Slot');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
diff --git a/tests/components/ct-solid/tests/callbacks.spec.tsx b/tests/components/ct-solid/tests/callbacks.spec.tsx
index b9a35ea09f..3b4559d084 100644
--- a/tests/components/ct-solid/tests/callbacks.spec.tsx
+++ b/tests/components/ct-solid/tests/callbacks.spec.tsx
@@ -23,6 +23,6 @@ test('execute callback when a child node is clicked', async ({ mount }) => {
       <span onClick={() => (clickFired = true)}>Main Content</span>
     </DefaultChildren>
   );
-  await component.locator('text=Main Content').click();
+  await component.getByText('Main Content').click();
   expect(clickFired).toBeTruthy();
 });
diff --git a/tests/components/ct-solid/tests/children.spec.tsx b/tests/components/ct-solid/tests/children.spec.tsx
index 8632415ecb..59c032b030 100644
--- a/tests/components/ct-solid/tests/children.spec.tsx
+++ b/tests/components/ct-solid/tests/children.spec.tsx
@@ -13,12 +13,12 @@ test('render a default child', async ({ mount }) => {
 test('render multiple children', async ({ mount }) => {
   const component = await mount(
     <DefaultChildren>
-      <div id="one">One</div>
-      <div id="two">Two</div>
+      <div data-testid="one">One</div>
+      <div data-testid="two">Two</div>
     </DefaultChildren>
   );
-  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 as child', async ({ mount }) => {
diff --git a/tests/components/ct-svelte-vite/src/components/Counter.svelte b/tests/components/ct-svelte-vite/src/components/Counter.svelte
index baf642fdcf..d7c6a0b409 100644
--- a/tests/components/ct-svelte-vite/src/components/Counter.svelte
+++ b/tests/components/ct-svelte-vite/src/components/Counter.svelte
@@ -7,8 +7,8 @@ update();
 </script>
 
 <div on:click={() => dispatch('submit', 'hello')}>
-  <div id="props">{count}</div>
-  <div id="remount-count">{remountCount}</div>
+  <div data-testid="props">{count}</div>
+  <div data-testid="remount-count">{remountCount}</div>
   <slot name="main" />
   <slot />
 </div>
diff --git a/tests/components/ct-svelte-vite/tests/update.spec.ts b/tests/components/ct-svelte-vite/tests/update.spec.ts
index c7e7c54081..358204edfa 100644
--- a/tests/components/ct-svelte-vite/tests/update.spec.ts
+++ b/tests/components/ct-svelte-vite/tests/update.spec.ts
@@ -5,15 +5,15 @@ test('update props without remounting', async ({ mount }) => {
   const component = await mount(Counter, {
     props: { count: 9001 },
   });
-  await expect(component.locator('#props')).toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('9001');
 
   await component.update({
     props: { count: 1337 },
   });
   await expect(component).not.toContainText('9001');
-  await expect(component.locator('#props')).toContainText('1337');
+  await expect(component.getByTestId('props')).toContainText('1337');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update event listeners without remounting', async ({ mount }) => {
@@ -28,5 +28,5 @@ test('update event listeners without remounting', async ({ mount }) => {
   await component.click();
   expect(messages).toEqual(['hello']);
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
diff --git a/tests/components/ct-svelte/src/components/Counter.svelte b/tests/components/ct-svelte/src/components/Counter.svelte
index e850f3a35a..e5d59503a1 100644
--- a/tests/components/ct-svelte/src/components/Counter.svelte
+++ b/tests/components/ct-svelte/src/components/Counter.svelte
@@ -7,8 +7,8 @@ update();
 </script>
 
 <div on:click={() => dispatch('submit', 'hello')}>
-  <div id="props">{count}</div>
-  <div id="remount-count">{remountCount}</div>
+  <div data-testid="props">{count}</div>
+  <div data-testid="remount-count">{remountCount}</div>
   <slot name="main" />
   <slot />
 </div>
diff --git a/tests/components/ct-svelte/tests/update.spec.ts b/tests/components/ct-svelte/tests/update.spec.ts
index c7e7c54081..358204edfa 100644
--- a/tests/components/ct-svelte/tests/update.spec.ts
+++ b/tests/components/ct-svelte/tests/update.spec.ts
@@ -5,15 +5,15 @@ test('update props without remounting', async ({ mount }) => {
   const component = await mount(Counter, {
     props: { count: 9001 },
   });
-  await expect(component.locator('#props')).toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('9001');
 
   await component.update({
     props: { count: 1337 },
   });
   await expect(component).not.toContainText('9001');
-  await expect(component.locator('#props')).toContainText('1337');
+  await expect(component.getByTestId('props')).toContainText('1337');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update event listeners without remounting', async ({ mount }) => {
@@ -28,5 +28,5 @@ test('update event listeners without remounting', async ({ mount }) => {
   await component.click();
   expect(messages).toEqual(['hello']);
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
diff --git a/tests/components/ct-vue-cli/src/components/Counter.vue b/tests/components/ct-vue-cli/src/components/Counter.vue
index 29ed704343..8ded37ff23 100644
--- a/tests/components/ct-vue-cli/src/components/Counter.vue
+++ b/tests/components/ct-vue-cli/src/components/Counter.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <span id="remount-count">{{ remountCount }}</span>
-    <span id="rerender-count">{{ count }}</span>
+    <span data-testid="remount-count">{{ remountCount }}</span>
+    <span data-testid="rerender-count">{{ count }}</span>
   </div>
 </template>
 
diff --git a/tests/components/ct-vue-cli/tests/events/events.spec.tsx b/tests/components/ct-vue-cli/tests/events/events.spec.tsx
index 2a1ffea851..24ca6568f2 100644
--- a/tests/components/ct-vue-cli/tests/events/events.spec.tsx
+++ b/tests/components/ct-vue-cli/tests/events/events.spec.tsx
@@ -23,6 +23,6 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
       <span v-on:click={() => (clickFired = true)}>Main Content</span>
     </DefaultSlot>
   );
-  await component.locator('text=Main Content').click();
+  await component.getByText('Main Content').click();
   expect(clickFired).toBeTruthy();
 });
diff --git a/tests/components/ct-vue-cli/tests/update/update.spec.ts b/tests/components/ct-vue-cli/tests/update/update.spec.ts
index c5857445b1..2a4b9d62c1 100644
--- a/tests/components/ct-vue-cli/tests/update/update.spec.ts
+++ b/tests/components/ct-vue-cli/tests/update/update.spec.ts
@@ -7,13 +7,13 @@ test('renderer and keep the component instance intact', async ({ mount }) => {
       count: 9001,
     },
   });
-  await expect(component.locator('#rerender-count')).toContainText('9001');
+  await expect(component.getByTestId('rerender-count')).toContainText('9001');
 
   await component.update({ props: { count: 1337 } });
-  await expect(component.locator('#rerender-count')).toContainText('1337');
+  await expect(component.getByTestId('rerender-count')).toContainText('1337');
 
   await component.update({ props: { count: 42 } });
-  await expect(component.locator('#rerender-count')).toContainText('42');
+  await expect(component.getByTestId('rerender-count')).toContainText('42');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
diff --git a/tests/components/ct-vue-cli/tests/update/update.spec.tsx b/tests/components/ct-vue-cli/tests/update/update.spec.tsx
index 5d675c6de4..72a3815f57 100644
--- a/tests/components/ct-vue-cli/tests/update/update.spec.tsx
+++ b/tests/components/ct-vue-cli/tests/update/update.spec.tsx
@@ -3,13 +3,13 @@ import Counter from '@/components/Counter.vue';
 
 test('renderer and keep the component instance intact', async ({ mount }) => {
   const component = await mount(<Counter count={9001} />);
-  await expect(component.locator('#rerender-count')).toContainText('9001');
+  await expect(component.getByTestId('rerender-count')).toContainText('9001');
 
   await component.update(<Counter count={1337} />);
-  await expect(component.locator('#rerender-count')).toContainText('1337');
+  await expect(component.getByTestId('rerender-count')).toContainText('1337');
 
   await component.update(<Counter count={42} />);
-  await expect(component.locator('#rerender-count')).toContainText('42');
+  await expect(component.getByTestId('rerender-count')).toContainText('42');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
diff --git a/tests/components/ct-vue-vite/src/components/Counter.vue b/tests/components/ct-vue-vite/src/components/Counter.vue
index 9c9fe4009f..296b035701 100644
--- a/tests/components/ct-vue-vite/src/components/Counter.vue
+++ b/tests/components/ct-vue-vite/src/components/Counter.vue
@@ -1,7 +1,7 @@
 <template>
   <div @click="$emit('submit', 'hello')">
-    <div id="props">{{ count }}</div>
-    <div id="remount-count">{{ remountCount }}</div>
+    <div data-testid="props">{{ count }}</div>
+    <div data-testid="remount-count">{{ remountCount }}</div>
     <slot name="main" />
     <slot />
   </div>
diff --git a/tests/components/ct-vue-vite/tests/events/events.spec.tsx b/tests/components/ct-vue-vite/tests/events/events.spec.tsx
index 97bcc7725e..527910b54e 100644
--- a/tests/components/ct-vue-vite/tests/events/events.spec.tsx
+++ b/tests/components/ct-vue-vite/tests/events/events.spec.tsx
@@ -23,6 +23,6 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
       <span v-on:click={() => (clickFired = true)}>Main Content</span>
     </DefaultSlot>
   );
-  await component.locator('text=Main Content').click();
+  await component.getByText('Main Content').click();
   expect(clickFired).toBeTruthy();
 });
diff --git a/tests/components/ct-vue-vite/tests/update/update.spec.js b/tests/components/ct-vue-vite/tests/update/update.spec.js
index 22a507322c..f0adb13114 100644
--- a/tests/components/ct-vue-vite/tests/update/update.spec.js
+++ b/tests/components/ct-vue-vite/tests/update/update.spec.js
@@ -5,15 +5,15 @@ test('update props without remounting', async ({ mount }) => {
   const component = await mount(Counter, {
     props: { count: 9001 },
   });
-  await expect(component.locator('#props')).toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('9001');
 
   await component.update({
     props: { count: 1337 },
   });
   await expect(component).not.toContainText('9001');
-  await expect(component.locator('#props')).toContainText('1337');
+  await expect(component.getByTestId('props')).toContainText('1337');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update event listeners without remounting', async ({ mount }) => {
@@ -28,7 +28,7 @@ test('update event listeners without remounting', async ({ mount }) => {
   await component.click();
   expect(messages).toEqual(['hello']);
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update slots without remounting', async ({ mount }) => {
@@ -43,5 +43,5 @@ test('update slots without remounting', async ({ mount }) => {
   await expect(component).not.toContainText('Default Slot');
   await expect(component).toContainText('Test Slot');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
diff --git a/tests/components/ct-vue-vite/tests/update/update.spec.ts b/tests/components/ct-vue-vite/tests/update/update.spec.ts
index a97ccd587a..114a1274c0 100644
--- a/tests/components/ct-vue-vite/tests/update/update.spec.ts
+++ b/tests/components/ct-vue-vite/tests/update/update.spec.ts
@@ -5,15 +5,15 @@ test('update props without remounting', async ({ mount }) => {
   const component = await mount(Counter, {
     props: { count: 9001 },
   });
-  await expect(component.locator('#props')).toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('9001');
 
   await component.update({
     props: { count: 1337 },
   });
   await expect(component).not.toContainText('9001');
-  await expect(component.locator('#props')).toContainText('1337');
+  await expect(component.getByTestId('props')).toContainText('1337');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update event listeners without remounting', async ({ mount }) => {
@@ -28,7 +28,7 @@ test('update event listeners without remounting', async ({ mount }) => {
   await component.click();
   expect(messages).toEqual(['hello']);
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update slots without remounting', async ({ mount }) => {
@@ -43,5 +43,5 @@ test('update slots without remounting', async ({ mount }) => {
   await expect(component).not.toContainText('Default Slot');
   await expect(component).toContainText('Test Slot');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
diff --git a/tests/components/ct-vue-vite/tests/update/update.spec.tsx b/tests/components/ct-vue-vite/tests/update/update.spec.tsx
index 591844b4ec..86a1b68921 100644
--- a/tests/components/ct-vue-vite/tests/update/update.spec.tsx
+++ b/tests/components/ct-vue-vite/tests/update/update.spec.tsx
@@ -3,13 +3,13 @@ import Counter from '@/components/Counter.vue';
 
 test('update props without remounting', async ({ mount }) => {
   const component = await mount(<Counter count={9001} />);
-  await expect(component.locator('#props')).toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('9001');
 
   await component.update(<Counter count={1337} />);
   await expect(component).not.toContainText('9001');
-  await expect(component.locator('#props')).toContainText('1337');
+  await expect(component.getByTestId('props')).toContainText('1337');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update event listeners without remounting', async ({ mount }) => {
@@ -26,7 +26,7 @@ test('update event listeners without remounting', async ({ mount }) => {
   await component.click();
   expect(messages).toEqual(['hello']);
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update slots without remounting', async ({ mount }) => {
@@ -41,5 +41,5 @@ test('update slots without remounting', async ({ mount }) => {
   await expect(component).not.toContainText('Default Slot');
   await expect(component).toContainText('Test Slot');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
diff --git a/tests/components/ct-vue2-cli/src/components/Counter.vue b/tests/components/ct-vue2-cli/src/components/Counter.vue
index bc3269bf36..10803a53b2 100644
--- a/tests/components/ct-vue2-cli/src/components/Counter.vue
+++ b/tests/components/ct-vue2-cli/src/components/Counter.vue
@@ -1,7 +1,7 @@
 <template>
   <div @click="$emit('submit', 'hello')">
-    <div id="props">{{ count }}</div>
-    <div id="remount-count">{{ remountCount }}</div>
+    <div data-testid="props">{{ count }}</div>
+    <div data-testid="remount-count">{{ remountCount }}</div>
     <slot name="main" />
     <slot />
   </div>
diff --git a/tests/components/ct-vue2-cli/tests/events/events.spec.tsx b/tests/components/ct-vue2-cli/tests/events/events.spec.tsx
index cdac7c704b..9d31d708fb 100644
--- a/tests/components/ct-vue2-cli/tests/events/events.spec.tsx
+++ b/tests/components/ct-vue2-cli/tests/events/events.spec.tsx
@@ -23,6 +23,6 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
       <span v-on:click={() => (clickFired = true)}>Main Content</span>
     </DefaultSlot>
   );
-  await component.locator('text=Main Content').click();
+  await component.getByText('Main Content').click();
   expect(clickFired).toBeTruthy();
 });
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 a4e2ea6c6a..2bde43e7f4 100644
--- a/tests/components/ct-vue2-cli/tests/slots/slots.spec.tsx
+++ b/tests/components/ct-vue2-cli/tests/slots/slots.spec.tsx
@@ -20,12 +20,12 @@ test('render a component as slot', 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 }) => {
diff --git a/tests/components/ct-vue2-cli/tests/update/update.spec.ts b/tests/components/ct-vue2-cli/tests/update/update.spec.ts
index a1ceffe09d..0c45587b8f 100644
--- a/tests/components/ct-vue2-cli/tests/update/update.spec.ts
+++ b/tests/components/ct-vue2-cli/tests/update/update.spec.ts
@@ -5,15 +5,15 @@ test('update props without remounting', async ({ mount }) => {
   const component = await mount(Counter, {
     props: { count: 9001 },
   });
-  await expect(component.locator('#props')).toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('9001');
 
   await component.update({
     props: { count: 1337 },
   });
   await expect(component).not.toContainText('9001');
-  await expect(component.locator('#props')).toContainText('1337');
+  await expect(component.getByTestId('props')).toContainText('1337');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update event listeners without remounting', async ({ mount }) => {
@@ -28,7 +28,7 @@ test('update event listeners without remounting', async ({ mount }) => {
   await component.click();
   expect(messages).toEqual(['hello']);
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update slots without remounting', async ({ mount }) => {
@@ -48,5 +48,5 @@ test('update slots without remounting', async ({ mount }) => {
   });
   await expect(component).toContainText('Default Slot');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
diff --git a/tests/components/ct-vue2-cli/tests/update/update.spec.tsx b/tests/components/ct-vue2-cli/tests/update/update.spec.tsx
index 9e14504ee6..bb93b99118 100644
--- a/tests/components/ct-vue2-cli/tests/update/update.spec.tsx
+++ b/tests/components/ct-vue2-cli/tests/update/update.spec.tsx
@@ -3,13 +3,13 @@ import Counter from '@/components/Counter.vue';
 
 test('update props without remounting', async ({ mount }) => {
   const component = await mount(<Counter count={9001} />);
-  await expect(component.locator('#props')).toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('9001');
 
   await component.update(<Counter count={1337} />);
   await expect(component).not.toContainText('9001');
-  await expect(component.locator('#props')).toContainText('1337');
+  await expect(component.getByTestId('props')).toContainText('1337');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update event listeners without remounting', async ({ mount }) => {
@@ -26,7 +26,7 @@ test('update event listeners without remounting', async ({ mount }) => {
   await component.click();
   expect(messages).toEqual(['hello']);
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });
 
 test('update slots without remounting', async ({ mount }) => {
@@ -41,5 +41,5 @@ test('update slots without remounting', async ({ mount }) => {
   await expect(component).not.toContainText('Default Slot');
   await expect(component).toContainText('Test Slot');
 
-  await expect(component.locator('#remount-count')).toContainText('1');
+  await expect(component.getByTestId('remount-count')).toContainText('1');
 });