test(ct): remove locators (#21963)

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 data-testid="props">{ props.count }</div>
-     <div id="remount-count">{ remountCount }</div>
+     <div data-testid="remount-count">{ remountCount }</div>
      { props.children }
    </div>
  }

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();
 });

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 data-testid="one">One</div>
-      <div id="two">Two</div>
+      <div data-testid="two">Two</div>
     </DefaultChildren>
   );
-  await expect(component.locator('#one')).toContainText('One');
+  await expect(component.getByTestId('one')).toContainText('One');
-  await expect(component.locator('#two')).toContainText('Two');
+  await expect(component.getByTestId('two')).toContainText('Two');
 });
 
 test('render named children', async ({ mount }) => {

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');
 });

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 data-testid="props">{ props.count }</div>
-     <div id="remount-count">{ remountCount }</div>
+     <div data-testid="remount-count">{ remountCount }</div>
      { props.children }
    </div>
  }

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();
 });

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 data-testid="one">One</div>
-      <div id="two">Two</div>
+      <div data-testid="two">Two</div>
     </DefaultChildren>
   );
-  await expect(component.locator('#one')).toContainText('One');
+  await expect(component.getByTestId('one')).toContainText('One');
-  await expect(component.locator('#two')).toContainText('Two');
+  await expect(component.getByTestId('two')).toContainText('Two');
 });
 
 test('render named children', async ({ mount }) => {

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');
 });

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();
 });

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 data-testid="one">One</div>
-      <div id="two">Two</div>
+      <div data-testid="two">Two</div>
     </DefaultChildren>
   );
-  await expect(component.locator('#one')).toContainText('One');
+  await expect(component.getByTestId('one')).toContainText('One');
-  await expect(component.locator('#two')).toContainText('Two');
+  await expect(component.getByTestId('two')).toContainText('Two');
 });
 
 test('render a component as child', async ({ mount }) => {

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 data-testid="props">{count}</div>
-  <div id="remount-count">{remountCount}</div>
+  <div data-testid="remount-count">{remountCount}</div>
   <slot name="main" />
   <slot />
 </div>

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');
 });

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 data-testid="props">{count}</div>
-  <div id="remount-count">{remountCount}</div>
+  <div data-testid="remount-count">{remountCount}</div>
   <slot name="main" />
   <slot />
 </div>

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');
 });

tests/components/ct-vue-cli/src/components/Counter.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <span id="remount-count">{{ remountCount }}</span>
+    <span data-testid="remount-count">{{ remountCount }}</span>
-    <span id="rerender-count">{{ count }}</span>
+    <span data-testid="rerender-count">{{ count }}</span>
   </div>
 </template>
 

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();
 });

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');
 });

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');
 });

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 data-testid="props">{{ count }}</div>
-    <div id="remount-count">{{ remountCount }}</div>
+    <div data-testid="remount-count">{{ remountCount }}</div>
     <slot name="main" />
     <slot />
   </div>

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();
 });

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');
 });

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');
 });

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');
 });

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 data-testid="props">{{ count }}</div>
-    <div id="remount-count">{{ remountCount }}</div>
+    <div data-testid="remount-count">{{ remountCount }}</div>
     <slot name="main" />
     <slot />
   </div>

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();
 });

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 data-testid="one">One</div>
-      <div id="two">Two</div>
+      <div data-testid="two">Two</div>
     </DefaultSlot>
   );
-  await expect(component.locator('#one')).toContainText('One');
+  await expect(component.getByTestId('one')).toContainText('One');
-  await expect(component.locator('#two')).toContainText('Two');
+  await expect(component.getByTestId('two')).toContainText('Two');
 });
 
 test('render a component with a named slot', async ({ mount }) => {

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');
 });

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');
 });