updates the snippets for the addon interactions

docs/snippets/angular/my-component-play-function-alt-queries.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/angular';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 

docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx

@@ -1,9 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/angular';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 

docs/snippets/angular/my-component-play-function-composition.ts.mdx

@@ -1,9 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/angular';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 

docs/snippets/angular/my-component-play-function-waitfor.mdx.mdx

@@ -3,11 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-
-import userEvent from '@testing-library/user-event';
+import { screen, fireEvent, userEvent, waitFor } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 

docs/snippets/angular/my-component-play-function-waitfor.ts.mdx

@@ -1,9 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent, waitFor } from '@testing-library/angular';
+import { screen, fireEvent, userEvent, waitFor } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 

docs/snippets/angular/my-component-play-function-with-canvas.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen, within } from '@testing-library/angular';
+import { fireEvent, getByRole, userEvent, within } from '@storybook/testing-library'
 
 import { MyComponent } from './MyComponent.component';
 
@@ -19,6 +16,6 @@ import { MyComponent } from './MyComponent.component';
   play={async ({canvasElement}) => {
     const canvas = within(canvasElement);
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.type(canvas.getByTestId('another-element'), 'something else');
+    await fireEvent.click(canvas.getByRole('another-element'));
   }} />
 ```

docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx

@@ -1,9 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen, within } from '@testing-library/angular';
+import { fireEvent, getByRole, userEvent, within } from '@storybook/testing-library'
 
 import { MyComponent } from './MyComponent.component';
 
@@ -18,7 +16,7 @@ export const ExampleStory = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.type(canvas.getByTestId('another-element'), 'something else');
+    await fireEvent.click(canvas.getByRole('another-element'));
   },
 };
 ```

docs/snippets/angular/my-component-play-function-with-clickevent.mdx.mdx

@@ -3,11 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import { screen, fireEvent} from '@testing-library/angular';
-
-import userEvent from '@testing-library/user-event';
+import { fireEvent,screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 

docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx

@@ -1,9 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent } from '@testing-library/angular';
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 

docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/angular';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 

docs/snippets/angular/my-component-play-function-with-delay.ts.mdx

@@ -1,9 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/angular';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 

docs/snippets/angular/my-component-play-function-with-selectevent.mdx.mdx

@@ -3,16 +3,14 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent } from '@testing-library/angular';
+import { fireEvent, screen } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
 <Meta title="WithSelectEvent" component={MyComponent}/>
 
-<!-- This is a placeholder mocked sleep function to be updated once the addon-interactions is out. -->
+
+<!-- Custom function to emulate a pause -->
 
 export const sleep= (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));

docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx

@@ -1,9 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent } from '@testing-library/angular';
+import { fireEvent, screen } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
@@ -11,7 +9,7 @@ export default {
   component: MyComponent,
 };
 
-// This is a placeholder mocked sleep function to be updated once the addon-interactions is out.
+// Custom function to emulate a pause
 function sleep(ms: any) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }

docs/snippets/angular/register-component-with-play-function.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import { screen, fireEvent } from '@testing-library/angular';
-import userEvent from '@testing-library/user-event';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { RegistrationForm } from './RegistrationForm.component';
 

docs/snippets/angular/register-component-with-play-function.ts.mdx

@@ -1,9 +1,7 @@
 ```ts
 // RegistrationForm.stories.ts
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent } from '@testing-library/angular';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { RegistrationForm } from './RegistrationForm.component';
 

docs/snippets/common/login-form-with-play-function.js.mdx

@@ -1,8 +1,7 @@
 ```js
 // LoginForm.stories.jsx | LoginForm.stories.js | LoginForm.stories.ts | LoginForm.stories.tsx
 
-// These are placeholders and will be updated once the addon-interactions is out
-import userEvent, { screen } from '@storybook/addon-interactions';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { LoginForm } from './LoginForm';
 
@@ -13,14 +12,17 @@ export default {
 };
 
 export const Example = {
-  play: async () => {
-    await userEvent.type(screen.getByTestId('email'), 'emailaddress@provider.com', {
+  play: async ({ canvasElement }) => {
+    // Queries the DOM and looks for the root element of the component and assigns it for a performance boost
+    const canvas = within(canvasElement);
+    
+    await userEvent.type(canvas.getByTestId('email'), 'emailaddress@provider.com', {
       delay: 100,
     });
-    await userEvent.type(screen.getByTestId('password'), 'a-random-password'{
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password'{
       delay: 100,
     });
-    await userEvent.click(screen.getByTestId('submit'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```

docs/snippets/common/login-form-with-play-function.mdx.mdx

@@ -3,9 +3,7 @@
 
 import { Meta, Story} from '@storybook/addon-docs';
 
-<!-- These are placeholders and will be updated once the addon-interactions is out-->
-
-import userEvent, { screen } from '@storybook/addon-interactions';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { LoginForm } from './LoginForm';
 
@@ -15,13 +13,16 @@ import { LoginForm } from './LoginForm';
 
 <Story 
   name="Example"
-  play={async () => {
+  play={async ({ canvasElement }) => {
+    // Queries the DOM and looks for the root element of the component and assigns it for a performance boost
+    const canvas = within(canvasElement);
+    
     await userEvent.type(screen.getByTestId('email'), 'emailaddress@provider.com', {
       delay: 100,
   });
   await userEvent.type(screen.getByTestId('password'), 'a-random-password', {
     delay: 100,
   });
-  await userEvent.click(screen.getByTestId('submit'));
+  await userEvent.click(canvas.getByRole('button'));
 }} />
 ```

docs/snippets/react/my-component-play-function-alt-queries.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/react';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.js';
 

docs/snippets/react/my-component-play-function-alt-queries.mdx.mdx

@@ -3,11 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import { screen } from '@testing-library/react';
-
-import userEvent from '@testing-library/user-event';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.js';
 

docs/snippets/react/my-component-play-function-composition.js.mdx

@@ -1,10 +1,7 @@
 ```js
 // MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
-// These are placeholders until the addon-interaction is out
-
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.js';
 

docs/snippets/react/my-component-play-function-waitfor.js.mdx

@@ -1,10 +1,7 @@
 ```js
 // MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
-// These are placeholders until the addon-interaction is out
-import { screen, waitFor } from '@testing-library/react';
-
-import userEvent from '@testing-library/user-event';
+import { screen, userEvent, waitFor } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.js';
 

docs/snippets/react/my-component-play-function-waitfor.mdx.mdx

@@ -3,11 +3,8 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
+import { screen, userEvent, waitFor } from '@storybook/testing-library';
 
-import { screen, waitFor } from '@testing-library/react';
-
-import userEvent from '@testing-library/user-event';
 
 import { MyComponent } from './MyComponent.js';
 

docs/snippets/react/my-component-play-function-with-canvas.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
-// These are placeholders until the addon-interaction is out
-import { screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { getByRole, userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.js';
 
@@ -18,7 +16,7 @@ export const ExampleStory = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.type(canvas.getByTestId('another-element'), 'something else');
+    await userEvent.click(canvas.getByRole('another-element'));
   },
 };
 ```

docs/snippets/react/my-component-play-function-with-canvas.mdx.mdx

@@ -1,11 +1,7 @@
 ```md
 import { Meta, Story} from '@storybook/addon-docs'
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import { screen, within } from '@testing-library/react';
-
-import userEvent from '@testing-library/user-event';
+import { getByRole, userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.js';
 
@@ -17,7 +13,8 @@ import { MyComponent } from './MyComponent.js';
   name="ExampleStory"
   play={async ({canvasElement}) => {
     const canvas = within(canvasElement);
+    
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.type(canvas.getByTestId('another-element'), 'something else');
+    await userEvent.click(canvas.getByRole('another-element'));
   }} />
 ```

docs/snippets/react/my-component-play-function-with-clickevent.js.mdx

@@ -1,11 +1,7 @@
 ```js
 // MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
-// These are placeholders until the addon-interaction is out
-
-import { screen, fireEvent } from '@testing-library/react';
-
-import userEvent from '@testing-library/user-event';
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.js';
 

docs/snippets/react/my-component-play-function-with-clickevent.mdx.mdx

@@ -3,11 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import { screen, fireEvent } from '@testing-library/react';
-
-import userEvent from '@testing-library/user-event';
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.js';
 

docs/snippets/react/my-component-play-function-with-delay.js.mdx

@@ -1,10 +1,7 @@
 ```js
 // MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
 
-// These are placeholders until the addon-interaction is out
-import { screen } from '@testing-library/react';
-
-import userEvent from '@testing-library/user-event';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.js';
 

docs/snippets/react/my-component-play-function-with-delay.mdx.mdx

@@ -3,11 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import { screen } from '@testing-library/react';
-
-import userEvent from '@testing-library/user-event';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.js';
 

docs/snippets/react/my-component-play-function-with-selectevent.js.mdx

@@ -1,8 +1,7 @@
 ```js
 // MyComponent.js | MyComponent.jsx | MyComponent.ts | MyComponent.tsx
 
-// These are placeholders until the addon-interaction is out
-import { screen, fireEvent } from '@testing-library/react';
+import { fireEvent, screen } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
@@ -10,7 +9,7 @@ export default {
   component: MyComponent,
 };
 
-// This is a placeholder mocked sleep function to be updated once the addon-interactions is out.
+// Custom function to emulate a pause 
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }

docs/snippets/react/my-component-play-function-with-selectevent.mdx.mdx

@@ -3,13 +3,13 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-import { screen, fireEvent} from '@testing-library/react';
+import { fireEvent, screen } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
 <Meta title="WithSelectEvent" component={MyComponent}/>
 
-<!-- This is a placeholder mocked sleep function to be updated once the addon-interactions is out. -->
+<!-- Custom function to emulate a pause -->
 
 export const sleep = (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));

docs/snippets/react/register-component-with-play-function.js.mdx

@@ -1,10 +1,7 @@
 ```js
 // RegistrationForm.stories.js | RegistrationForm.stories.jsx | RegistrationForm.stories.ts | RegistrationForm.stories.tsx
 
-// These are placeholders until the addon-interaction is out
-
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { RegistrationForm } from './RegistrationForm.js';
 

docs/snippets/react/register-component-with-play-function.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import { RegistrationForm } from './RegistrationForm.js';
 

docs/snippets/svelte/my-component-play-function-alt-queries.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/svelte';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 

docs/snippets/svelte/my-component-play-function-alt-queries.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!--These are placeholders until the addon-interaction is out -->
-
-import userEvent from "@testing-library/user-event";
-import { screen } from '@testing-library/svelte';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 

docs/snippets/svelte/my-component-play-function-composition.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/svelte';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 

docs/snippets/svelte/my-component-play-function-waitfor.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent, waitFor } from '@testing-library/svelte';
+import { fireEvent, screen, userEvent, waitFor } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 

docs/snippets/svelte/my-component-play-function-waitfor.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent, waitFor } from "@testing-library/svelte";
+import { fireEvent, screen, userEvent, waitFor } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 

docs/snippets/svelte/my-component-play-function-with-canvas.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen, within } from '@testing-library/svelte';
+import { fireEvent, userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 
@@ -18,7 +16,7 @@ export const ExampleStory = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.type(canvas.getByTestId('another-element'), 'something else');
+    await fireEvent.click(canvas.getByRole('another-element'));
   },
   render: () => ({
     Component: MyComponent,

docs/snippets/svelte/my-component-play-function-with-canvas.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!--These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen, within } from '@testing-library/svelte';
+import { fireEvent, userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 
@@ -18,8 +15,9 @@ import MyComponent from './MyComponent.svelte';
   name="ExampleStory"
   play={async ({canvasElement}) => {
     const canvas = within(canvasElement);
+
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.type(canvas.getByTestId('another-element'), 'something else');
+    await fireEvent.click(canvas.getByRole('another-element'));
   }}
   render={() => ({
     Component: MyComponent

docs/snippets/svelte/my-component-play-function-with-clickevent.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent } from '@testing-library/svelte';
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 

docs/snippets/svelte/my-component-play-function-with-clickevent.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!--These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent } from '@testing-library/svelte';
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 

docs/snippets/svelte/my-component-play-function-with-delay.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/svelte';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 

docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!--These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/svelte';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 

docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx

@@ -1,8 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-import { screen, fireEvent } from '@testing-library/svelte';
+import { fireEvent, screen } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 
@@ -10,7 +9,7 @@ export default {
   component: MyComponent,
 };
 
-// This is a placeholder mocked sleep function to be updated once the addon-interactions is out.
+// Custom function to emulate a pause 
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }

docs/snippets/svelte/my-component-play-function-with-selectevent.mdx.mdx

@@ -3,15 +3,13 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!--These are placeholders until the addon-interaction is out -->
-
-import { screen } from '@testing-library/svelte';
+import { fireEvent, screen } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 
 <Meta title="WithSelectEvent" component={MyComponent} />
 
-<!--This is a placeholder mocked sleep function to be updated once the addon-interactions is out. -->
+<!-- Custom function to emulate a pause -->
 
 export const sleep(ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));

docs/snippets/svelte/register-component-with-play-function.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // RegistrationForm.stories.js
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/svelte';
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
 import RegistrationForm from './RegistrationForm.svelte';
 

docs/snippets/svelte/register-component-with-play-function.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!--These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/svelte';
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
 import RegistrationForm from './RegistrationForm.svelte';
 

docs/snippets/vue/my-component-play-function-alt-queries.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/vue';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 

docs/snippets/vue/my-component-play-function-alt-queries.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/vue';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 

docs/snippets/vue/my-component-play-function-composition.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/vue';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 

docs/snippets/vue/my-component-play-function-waitfor.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent, waitFor } from '@testing-library/vue';
+import { fireEvent, screen, userEvent, waitFor } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 

docs/snippets/vue/my-component-play-function-waitfor.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent, waitFor } from '@testing-library/vue';
+import { fireEvent, screen, userEvent, waitFor } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 

docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx

@@ -1,10 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent } from '@testing-library/vue';
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 

docs/snippets/vue/my-component-play-function-with-clickevent.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent } from '@testing-library/vue';
+import { fireEvent,screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 

docs/snippets/vue/my-component-play-function-with-delay.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/vue';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 

docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/vue';
+import { screen, userEvent } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 

docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx

@@ -1,10 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-// These are placeholders until the addon-interaction is out
-
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent } from '@testing-library/vue';
+import { fireEvent, screen } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
@@ -12,6 +9,10 @@ export default {
   component: MyComponent,
 };
 
+// Custom function to emulate a pause 
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 
 // Queries the element by it's role and fires the event
 

docs/snippets/vue/my-component-play-function-with-selectevent.mdx.mdx

@@ -3,18 +3,15 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen, fireEvent } from '@testing-library/vue';
+import { fireEvent, screen } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
 <Meta title="ExampleChangeEvent" component={MyComponent} />
 
-<!-- This is a placeholder mocked sleep function to be updated once the addon-interactions is out. -->
+<!-- Custom function to emulate a pause -->
 
-export const sleep= (ms) => {
+export const sleep(ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 

docs/snippets/vue/register-component-with-play-function.js.mdx

@@ -1,9 +1,7 @@
 ```js
 // RegistrationForm.stories.js
 
-// These are placeholders until the addon-interaction is out
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/vue';
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
 import RegistrationForm from './RegistrationForm.vue';
 

docs/snippets/vue/register-component-with-play-function.mdx.mdx

@@ -3,10 +3,7 @@
 
 import { Meta, Story } from '@storybook/addon-docs';
 
-<!-- These are placeholders until the addon-interaction is out -->
-
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/vue';
+import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
 import RegistrationForm from './RegistrationForm.vue';
 

docs/writing-stories/play-function.md

@@ -185,7 +185,7 @@ If you need, you can also adjust your `play` function to find elements based on
 
 ## Working with the Canvas
 
-By default, each interaction you write inside your `play` function will be executed starting from the top-level element of the Canvas. This is acceptable for smaller components (e.g., buttons, checkboxes, text inputs), but can be inefficient for complex components (e.g., forms, pages). To accommodate this, you can adjust your interactions to start execution from the component's root. For example:
+By default, each interaction you write inside your `play` function will be executed starting from the top-level element of the Canvas. This is acceptable for smaller components (e.g., buttons, checkboxes, text inputs), but can be inefficient for complex components (e.g., forms, pages), or for multiple stories. To accommodate this, you can adjust your interactions to start execution from the component's root. For example:
 
 <!-- prettier-ignore-start -->