more polishing and snippets adjustments

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

@@ -0,0 +1,39 @@
+```md
+<!-- MyComponent.stories.mdx -->
+
+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 { MyComponent } from './MyComponent.component';
+
+<!-- 👇 Marking the onSubmit with this configuration will log the event in the Actions panel -->
+
+<Meta title="WithAsync" component={MyComponent} argTypes={{ onSubmit: { action: true }}/>
+
+<!-- The delay option sets the amount of milliseconds between characters being typed-->
+
+<Story
+  name="ExampleAsyncStory"
+  play={async () => {
+    const emailInput = screen.getByLabelText('example-element', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'WrongInput', {
+      delay: 100,
+    });
+
+    const Button = screen.getByRole('button');
+
+    await fireEvent.click(Button);
+
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  }} />
+```

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

@@ -0,0 +1,35 @@
+```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 { MyComponent } from './MyComponent.component';
+
+export default {
+  component: MyComponent,
+  //👇 Marking the onSubmit with this configuration will log the event in the Actions panel
+  argTypes: { onSubmit: { action: true } },
+};
+
+export const ExampleAsyncStory = {
+  play: async () => {
+    const emailInput = screen.getByLabelText('example-element', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'WrongInput', {
+      delay: 100,
+    });
+
+    const Button = screen.getByRole('button');
+
+    await fireEvent.click(Button);
+
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  },
+};
+```

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

@@ -18,18 +18,20 @@ export const sleep= (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+<!-- Queries the element by it's role and fires the event -->
+
 <Story 
   name="ExampleChangeEvent"
   play={async () => {
-    fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'One Item' },
-    });
+    const dropdown = screen.getByRole('listbox');
+
+    await fireEvent.change(dropdown, { target: { value: 'One Item'} });
     await sleep(2000);
-    fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'Another Item' },
-    });
+
+    await fireEvent.change(dropdown, { target: { value: 'Another Item' } });
     await sleep(2000);
-    fireEvent.change(screen.getByTestId('select'), {
+
+    await fireEvent.change(dropdown, {
       target: { value: 'Yet another item' },
     });
   }} />

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

@@ -16,17 +16,18 @@ function sleep(ms: any) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+// Queries the element by it's role and fires the event
 export const ExampleChangeEvent = {
   play: async () => {
-    await fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'One Item' },
-    });
+    const dropdown = screen.getByRole('listbox');
+
+    await fireEvent.change(dropdown, { target: { value: 'One Item'} });
     await sleep(2000);
-    await fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'Another Item' },
-    });
+
+    await fireEvent.change(dropdown, { target: { value: 'Another Item' } });
     await sleep(2000);
-    await fireEvent.change(screen.getByTestId('select'), {
+
+    await fireEvent.change(dropdown, {
       target: { value: 'Yet another item' },
     });
   },

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

@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 <!-- These are placeholders until the addon-interaction is out -->
 
-import { screen } from '@testing-library/angular';
+import { screen, fireEvent } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
 import { RegistrationForm } from './RegistrationForm.component';
@@ -17,9 +17,26 @@ import { RegistrationForm } from './RegistrationForm.component';
 <Story
   name="FilledForm"
   play={async () => {
-    await userEvent.type(screen.getByTestId('username'));
-    await userEvent.type(screen.getByTestId('password'));
-    await userEvent.click(screen.getByTestId('submit'));
+    
+    const emailInput = screen.getByLabelText('email', {
+      selector: 'input',
+    });
+   
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = screen.getByLabelText('password', {
+      selector: 'input',
+    });
+    
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.click(submitButton);
   }}
 />
 ```

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

@@ -3,7 +3,7 @@
 
 // These are placeholders until the addon-interaction is out
 import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/angular';
+import { screen, fireEvent } from '@testing-library/angular';
 
 import { RegistrationForm } from './RegistrationForm.component';
 
@@ -15,9 +15,26 @@ export default {
 
 export const FilledForm = {
   play: async () => {
-    await userEvent.type(screen.getByTestId('username'));
-    await userEvent.type(screen.getByTestId('password'));
-    await userEvent.click(screen.getByTestId('submit'));
+    
+    const emailInput = screen.getByLabelText('email', {
+      selector: 'input',
+    });
+   
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = screen.getByLabelText('password', {
+      selector: 'input',
+    });
+    
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.click(submitButton);
   },
 };
 ```

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

@@ -0,0 +1,34 @@
+```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 { MyComponent } from './MyComponent.js';
+
+export default {
+  component: MyComponent,
+  //👇 Marking the onSubmit with this configuration will log the event in the Actions panel
+  argTypes: { onSubmit: { action: true } },
+};
+
+export const ExampleAsyncStory = {
+  play: async () => {
+    const Input = screen.getByLabelText('example-element', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+    const Button = screen.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  },
+};
+```

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

@@ -0,0 +1,35 @@
+```md
+<!-- MyComponent.stories.mdx -->
+
+import { Meta, Story } from '@storybook/addon-docs';
+
+<!-- These are placeholders until the addon-interaction is out -->
+
+import { screen, waitFor } from '@testing-library/react';
+
+import userEvent from '@testing-library/user-event';
+
+import { MyComponent } from './MyComponent.js';
+
+<!-- 👇 Marking the onSubmit with this configuration will log the event in the Actions panel -->
+
+<Meta title="WithAsync" component={MyComponent} argTypes={{ onSubmit: { action: true }}/>
+
+<!-- The delay option sets the amount of milliseconds between characters being typed-->
+
+<Story
+  name="ExampleAsyncStory"
+  play={async () => {
+    const Input = screen.getByLabelText('example-element');
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    const Button = screen.getByRole('button');
+    await userEvent.click(Submit);
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  }} />
+```

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

@@ -14,11 +14,16 @@ export default {
 
 export const DelayedStory = {
   play: async () => {
-    // The delay option sets the amount of milliseconds between characters being typed
-    await userEvent.type(screen.getByTestId('example-element'), 'random string', {
+    
+   const exampleElement= screen.getByLabelText('example-element');
+
+    // The delay option set the ammount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
-    await userEvent.type(screen.getByTestId('another-example-element'), 'another random string', {
+
+    const AnotherExampleElement= screen.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
   },

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

@@ -18,10 +18,15 @@ import { MyComponent } from './MyComponent.js';
 <Story
   name="DelayedStory"
   play={async () => {
-    await userEvent.type(screen.getByTestId('example-element'), 'random string', {
+    const exampleElement= screen.getByLabelText('example-element');
+
+    await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
-    await userEvent.type(screen.getByTestId('another-example-element'), 'another random string', {
+
+    const AnotherExampleElement= screen.getByLabelText('another-example-element');
+    
+    await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
   }} />

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

@@ -15,17 +15,19 @@ function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+ // Queries the element by it's role and fires the event
+
 export const ExampleChangeEvent = {
   play: async () => {
-    await fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'One Item' },
-    });
+    const dropdown = screen.getByRole('listbox');
+
+    await fireEvent.change(dropdown, { target: { value: 'One Item'} });
     await sleep(2000);
-    await fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'Another Item' },
-    });
+
+    await fireEvent.change(dropdown, { target: { value: 'Another Item' } });
     await sleep(2000);
-    await fireEvent.change(screen.getByTestId('select'), {
+
+    await fireEvent.change(dropdown, {
       target: { value: 'Yet another item' },
     });
   },

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

@@ -15,19 +15,20 @@ export const sleep = (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+<!-- Queries the element by it's role and fires the event -->
 <Story 
   name="ExampleChangeEvent"
   play={async () => {
-    fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'One Item' },
-    });
+    const dropdown = screen.getByRole('listbox');
+
+    await fireEvent.change(dropdown, { target: { value: 'One Item'} });
     await sleep(2000);
-    fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'Another Item' },
-    });
+
+    await fireEvent.change(dropdown, { target: { value: 'Another Item' } });
     await sleep(2000);
-      fireEvent.change(screen.getByTestId('select'), {
-    target: { value: 'Yet another item' },
+
+    await fireEvent.change(dropdown, {
+      target: { value: 'Yet another item' },
     });
   }} />
 ```

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

@@ -16,9 +16,25 @@ export default {
 
 export const FilledForm = {
   play: async () => {
-    await userEvent.type(screen.getByTestId('username'));
-    await userEvent.type(screen.getByTestId('password'));
-    await userEvent.click(screen.getByTestId('submit'));
+    
+    const emailInput = screen.getByLabelText('email', {
+      selector: "input",
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+    
+    const passwordInput = screen.getByLabelText('password', {
+      selector: "input",
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    const Submit = screen.getByRole('button');
+    await userEvent.click(Submit);
   },
 };
 ```

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

@@ -17,8 +17,23 @@ import { RegistrationForm } from './RegistrationForm.js';
 <Story
   name="FilledForm"
   play={async () => {
-    await userEvent.type(screen.getByTestId('username'));
-    await userEvent.type(screen.getByTestId('password'));
-    await userEvent.click(screen.getByTestId('submit'));
+    const emailInput = screen.getByLabelText('email', {
+      selector: "input",
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+    
+    const passwordInput = screen.getByLabelText('password', {
+      selector: "input",
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    const Submit = screen.getByRole('button');
+    await userEvent.click(Submit);
   }} />
 ```

docs/snippets/svelte/button-story-using-args.js.mdx

@@ -7,6 +7,9 @@ export default {
   component: Button,
 };
 
+
+//👇 The render function is a framework specific construct to tell how the story should render
+
 export const Primary = {
   args: {
     backgroundColor: '#ff0',

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

@@ -0,0 +1,38 @@
+```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 MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+  //👇 Marking the onSubmit with this configuration will log the event in the Actions panel
+  argTypes: { onSubmit: { action: true } },
+};
+
+export const ExampleAsyncStory = {
+  play: async () => {
+    const exampleElement = screen.getByLabelText('example-element', {
+      selector: 'input',
+    });
+
+    // The delay option set the ammount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'WrongInput', {
+      delay: 100,
+    });
+
+    const Button = screen.getByRole('button');
+    await fireEvent.click(Button);
+
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  },
+  render: () => ({
+    component: MyComponent,
+  }),
+};
+```

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

@@ -0,0 +1,36 @@
+```md
+<!-- MyComponent.stories.mdx -->
+
+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 MyComponent from './MyComponent.svelte';
+
+<!-- 👇 Marking the onSubmit with this configuration will log the event in the Actions panel-->
+
+<Meta title="WithAsync" component={MyComponent} argTypes={{ onSubmit: { action: true }}/>
+
+<Story
+  name="ExampleAsyncStory"
+  play={async () => {
+    const Input = screen.getByLabelText('example-element');
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    const Button = screen.getByRole('button');
+
+    await fireEvent.click(Button);
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+
+  }}
+  render={() => ({
+    component: MyComponent,
+  })} />
+```

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

@@ -15,17 +15,18 @@ function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+ // Queries the element by it's role and fires the event
 export const ExampleChangeEvent = {
   play: async () => {
-    await fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'One Item' },
-    });
+    const dropdown = screen.getByRole('listbox');
+
+    await fireEvent.change(dropdown, { target: { value: 'One Item'} });
     await sleep(2000);
-    await fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'Another Item' },
-    });
+
+    await fireEvent.change(dropdown, { target: { value: 'Another Item' } });
     await sleep(2000);
-    await fireEvent.change(screen.getByTestId('select'), {
+
+    await fireEvent.change(dropdown, {
       target: { value: 'Yet another item' },
     });
   },

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

@@ -17,22 +17,24 @@ export const sleep(ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+<!--  Queries the element by it's role and fires the event -->
+
 <Story 
   name="ExampleChangeEvent"
-  play={ async () => {
-    await fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'One Item' },
-    });
+  play={async () => {
+    const dropdown = screen.getByRole('listbox');
+
+    await fireEvent.change(dropdown, { target: { value: 'One Item'} });
     await sleep(2000);
-    await fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'Another Item' },
+
+    await fireEvent.change(dropdown, { target: { value: 'Another Item' } });
+    await sleep(2000);
+
+    await fireEvent.change(dropdown, {
+      target: { value: 'Yet another item' },
     });
-   await sleep(2000);
-   await fireEvent.change(screen.getByTestId('select'), {
-     target: { value: 'Yet another item' },
-   });
   }}
-  render={()=>({
+  render={() => ({
     Component: MyComponent,
   })} />
 ```

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

@@ -15,9 +15,26 @@ export default {
 
 export const FilledForm = {
   play: async () => {
-    await userEvent.type(screen.getByTestId('username'), 'username');
-    await userEvent.type(screen.getByTestId('password'), 'password');
-    await userEvent.click(screen.getByTestId('submit'));
+    
+    const emailInput = screen.getByLabelText('email', {
+      selector: 'input',
+    });
+   
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = screen.getByLabelText('password', {
+      selector: 'input',
+    });
+    
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.click(submitButton);
   },
   render: () => ({
     Component: MyComponent,

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

@@ -17,9 +17,26 @@ import RegistrationForm from './RegistrationForm.svelte';
 <Story
   name="FilledForm"
   play={async () => {
-    await userEvent.type(screen.getByTestId('username'), 'username');
-    await userEvent.type(screen.getByTestId('password'), 'password');
-    await userEvent.click(screen.getByTestId('submit'));
+    
+    const emailInput = screen.getByLabelText('email', {
+      selector: 'input',
+    });
+   
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = screen.getByLabelText('password', {
+      selector: 'input',
+    });
+    
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.click(submitButton);
   }}
   render={() => ({
     Component: RegistrationForm,

docs/snippets/vue/button-story-using-args.2.js.mdx

@@ -7,6 +7,8 @@ export default {
   component: Button,
 };
 
+//👇 The render function is a framework specific construct to tell how the story should render
+
 export const Primary = {
   args: {
     backgroundColor: '#ff0',

docs/snippets/vue/button-story-using-args.3.js.mdx

@@ -7,6 +7,8 @@ export default {
   component: Button,
 };
 
+//👇 The render function is a framework specific construct to tell how the story should render
+
 export const Primary = {
   args: {
     backgroundColor: '#ff0',

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

@@ -0,0 +1,39 @@
+```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 MyComponent from './MyComponent.vue';
+
+export default {
+  component: MyComponent,
+  //👇 Marking the onSubmit with this configuration will log the event in the Actions panel
+  argTypes: { onSubmit: { action: true } },
+};
+
+export const ExampleAsyncStory = {
+  play: async () => {
+    const exampleElement = screen.getByLabelText('example-element', {
+      selector: 'input',
+    });
+
+    // The delay option set the ammount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'WrongInput', {
+      delay: 100,
+    });
+
+    const Button = screen.getByRole('button');
+    await fireEvent.click(Button);
+
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  },
+  render: () => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  }),
+};
+```

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

@@ -0,0 +1,36 @@
+```md
+<!-- MyComponent.stories.mdx -->
+
+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 MyComponent from './MyComponent.vue';
+
+<!-- 👇 Marking the onSubmit with this configuration will log the event in the Actions panel-->
+
+<Meta title="WithAsync" component={MyComponent} argTypes={{ onSubmit: { action: true }}/>
+
+<Story
+  name="ExampleAsyncStory"
+  play={async () => {
+    const Input = screen.getByLabelText('example-element');
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    const Button = screen.getByRole('button');
+
+    await fireEvent.click(Button);
+    await waitFor(async () => {
+      await userEvent.hover(screen.getByTestId('error'));
+    });
+  }}
+  render={() => ({
+    components: { MyComponent },
+    template: '<MyComponent />',
+  })} />
+```

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

@@ -13,11 +13,16 @@ export default {
 
 export const DelayedStory = {
   play: async () => {
+
+    const exampleElement= screen.getByLabelText('example-element');
+
     // The delay option set the ammount of milliseconds between characters being typed
-    await userEvent.type(screen.getByTestId('example-element'), 'random string', {
+    await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
-    await userEvent.type(screen.getByTestId('another-example-element'), 'another random string', {
+
+    const AnotherExampleElement= screen.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
   },

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

@@ -17,10 +17,15 @@ import MyComponent from './MyComponent.vue';
 <Story
   name="DelayedStory"
   play={async () => {
-    await userEvent.type(screen.getByTestId('example-element'), 'random string', {
+    const exampleElement= screen.getByLabelText('example-element');
+
+    await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
-    await userEvent.type(screen.getByTestId('another-example-element'), 'another random string', {
+
+    const AnotherExampleElement= screen.getByLabelText('another-example-element');
+    
+    await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
   }}

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

@@ -12,17 +12,20 @@ export default {
   component: MyComponent,
 };
 
+
+// Queries the element by it's role and fires the event
+
 export const ExampleChangeEvent = {
   play: async () => {
-    fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'One Item' },
-    });
+    const dropdown = screen.getByRole('listbox');
+
+    await fireEvent.change(dropdown, { target: { value: 'One Item'} });
     await sleep(2000);
-    fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'Another Item' },
-    });
+
+    await fireEvent.change(dropdown, { target: { value: 'Another Item' } });
     await sleep(2000);
-    fireEvent.change(screen.getByTestId('select'), {
+
+    await fireEvent.change(dropdown, {
       target: { value: 'Yet another item' },
     });
   },

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

@@ -18,18 +18,20 @@ export const sleep= (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+<!--  Queries the element by it's role and fires the event -->
+
 <Story 
   name="ExampleChangeEvent"
   play={async () => {
-    fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'One Item' },
-    });
+    const dropdown = screen.getByRole('listbox');
+
+    await fireEvent.change(dropdown, { target: { value: 'One Item'} });
     await sleep(2000);
-    fireEvent.change(screen.getByTestId('select'), {
-      target: { value: 'Another Item' },
-    });
+
+    await fireEvent.change(dropdown, { target: { value: 'Another Item' } });
     await sleep(2000);
-    fireEvent.change(screen.getByTestId('select'), {
+
+    await fireEvent.change(dropdown, {
       target: { value: 'Yet another item' },
     });
   }}

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

@@ -15,9 +15,26 @@ export default {
 
 export const FilledForm = {
   play: async () => {
-    await userEvent.type(screen.getByTestId('username'));
-    await userEvent.type(screen.getByTestId('password'));
-    await userEvent.click(screen.getByTestId('submit'));
+    const emailInput = screen.getByLabelText('email', {
+      selector: 'input',
+    });
+   
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = screen.getByLabelText('password', {
+      selector: 'input',
+    });
+    
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.click(submitButton);
+    
   },
   render: () => ({
     components: { RegistrationForm },

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

@@ -17,9 +17,25 @@ import RegistrationForm from './RegistrationForm.vue';
 <Story
   name="FilledForm"
   play={async () => {
-    await userEvent.type(screen.getByTestId('username'));
-    await userEvent.type(screen.getByTestId('password'));
-    await userEvent.click(screen.getByTestId(submit'));
+    const emailInput = screen.getByLabelText('email', {
+      selector: 'input',
+    });
+   
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = screen.getByLabelText('password', {
+      selector: 'input',
+    });
+    
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    const submitButton = screen.getByRole('button');
+
+    await fireEvent.click(submitButton);
   }}
   render={() => ({
     components: { RegistrationForm },

docs/writing-stories/args.md

@@ -54,7 +54,7 @@ In the above example, we use the [object spread](https://developer.mozilla.org/e
 
 ## Component args
 
-You can also define args at the component level; they will apply to all the component's stories unless you overwrite them. To do so, use the `arg` key on the `default` CSF export:
+You can also define args at the component level; they will apply to all the component's stories unless you overwrite them. To do so, use the `args` key on the `default` CSF export:
 
 <!-- prettier-ignore-start -->
 
@@ -93,9 +93,7 @@ Here's how you can combine args for multiple stories of the same component.
 <!-- prettier-ignore-end -->
 
 <div class="aside">
-
-💡<strong>Note:</strong> If you find yourself applying this pattern often, you should consider using [component-level args](#component-args).
-
+💡<strong>Note:</strong> If you find yourself re-using the same args for most of a component's stories, you should consider using [component-level args](#component-args).
 </div>
 
 Args are useful when writing stories for composite components that are assembled from other components. Composite components often pass their arguments unchanged to their child components, and similarly, their stories can be compositions of their child components stories. With args, you can directly compose the arguments:
@@ -146,7 +144,7 @@ You can also override the set of initial args for the active story by adding an
 ?path=/story/avatar--default&args=style:rounded;size:100
 ```
 
-As a safety guard against [XSS](https://owasp.org/www-community/attacks/xss/) attacks, the arg's keys and values provided in the URL are limited to alphanumeric characters, spaces, underscores, and dashes. Any other types will be ignored and removed from the URL, but you can still use them with the Controls addon and code.
+As a safeguard against [XSS](https://owasp.org/www-community/attacks/xss/) attacks, the arg's keys and values provided in the URL are limited to alphanumeric characters, spaces, underscores, and dashes. Any other types will be ignored and removed from the URL, but you can still use them with the Controls addon and [within your story](#mapping-to-complex-arg-values).
 
 The `args` param is always a set of `key: value` pairs delimited with a semicolon `;`. Values will be coerced (cast) to their respective `argTypes` (which may have been automatically inferred). Objects and arrays are supported. Special values `null` and `undefined` can be set by prefixing with a bang `!`. For example, `args=obj.key:val;arr[0]:one;arr[1]:two;nil:!null` will be interpreted as:
 

docs/writing-stories/decorators.md

@@ -38,9 +38,9 @@ Some components require a “harness” to render in a useful way. For instance,
 
 ## “Context” for mocking
 
-Framework-specific libraries (e.g., React's Styled Components, Vue's Fortawesome) may require additional configuration to render correctly in Storybook.
+Framework-specific libraries (e.g., [Styled Components](https://styled-components.com/), [Fortawesome](https://github.com/FortAwesome/vue-fontawesome) for Vue) may require additional configuration to render correctly in Storybook.
 
-For example, if you're working with React's Styled components and your components use themes, add a single global decorator to [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) to enable them. Or with Vue, extend Storybook's application and register your library:
+For example, if you're working with Styled Components and your components use a theme, add a single global decorator to [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) to provide it. Or with Vue, extend Storybook's application and register your library:
 
 <!-- prettier-ignore-start -->
 
@@ -59,7 +59,7 @@ For example, if you're working with React's Styled components and your component
 
 <!-- prettier-ignore-end -->
 
-In the example above, the values provided are hardcoded. Still, you may want to vary them, either per-story basis (i.e., if the values you're adding are relevant to a specific story) or in a user-controlled way (e.g., provide a theme switcher or a different set of icons).
+In the example above, the values provided are hardcoded. Still, you may want to vary them, either on a per-story basis (i.e., if the values you're providing are relevant to a specific story) or in a user-controlled way (e.g., provide a theme switcher or a different set of icons).
 
 The second argument to a decorator function is the **story context** which in particular contains the keys:
 

docs/writing-stories/introduction.md

@@ -222,7 +222,7 @@ This parameter would instruct the backgrounds addon to reconfigure itself whenev
 
 ### Using decorators
 
-Decorators are a mechanism to wrap a component in arbitrary markup when rendering a story. Components are often created with assumptions about ‘where’ they render. Your styles might expect a theme or layout wrapper. Or your UI might expect specific context or data providers.
+Decorators are a mechanism to wrap a component in arbitrary markup when rendering a story. Components are often created with assumptions about ‘where’ they render. Your styles might expect a theme or layout wrapper, or your UI might expect specific context or data providers.
 
 A simple example is adding padding to a component’s stories. Accomplish this using a decorator that wraps the stories in a `div` with padding, like so:
 

docs/writing-stories/play-function.md

@@ -6,7 +6,7 @@ title: 'Play function'
 
 ## Setup the interactions addon
 
-We recommend installing Storybook's `addon-interactions` before you start writing stories with the `play` function. It's the perfect complement for it, including a handy set of UI controls to allow you command over the execution flow. At any time, you can pause, resume, rewind, and step through each interaction. Also providing you with an easy-to-use debugger for potential issues.
+We recommend installing Storybook's [`addon-interactions`](/addons/@storybook/addon-interactions/) before you start writing stories with the `play` function. It's the perfect complement for it, including a handy set of UI controls to allow you command over the execution flow. At any time, you can pause, resume, rewind, and step through each interaction. Also providing you with an easy-to-use debugger for potential issues.
 
 Run the following command to install the addon.
 
@@ -78,34 +78,11 @@ Thanks to the [Component Story Format](../api/csf.md), an ES6 module based file
 
 By combining the stories, you're recreating the entire component workflow and can spot potential issues while reducing the boilerplate code you need to write.
 
-## Delaying interactions
-
-Assuming that you're working with a component with validation logic implemented (e.g., email validation, password strength). In that case, you can introduce delays within your `play` function to emulate user interaction and assert if the values provided are valid or not. For example:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-   'react/my-component-play-function-with-delay.js.mdx',
-   'react/my-component-play-function-with-delay.mdx.mdx',
-   'angular/my-component-play-function-with-delay.ts.mdx',
-   'angular/my-component-play-function-with-delay.mdx.mdx',
-   'vue/my-component-play-function-with-delay.js.mdx',
-   'vue/my-component-play-function-with-delay.mdx.mdx',
-   'svelte/my-component-play-function-with-delay.js.mdx',
-   'svelte/my-component-play-function-with-delay.mdx.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-When Storybook loads the story, it interacts with the component, filling in its inputs and triggering any validation logic defined.
-
 ## Working with events
 
 Most modern UIs are built focusing on interaction (e.g., button clicks, selecting options, ticking checkboxes), providing rich experiences to the end-user. With the `play` function, you can incorporate the same level of interaction into your stories.
 
-The most common scenario for component interaction is a button click. If you need to reproduce it in your story, you can adjust your story's `play` function to the following:
+The most common scenario for component interaction is a button click. If you need to reproduce it in your story, you can define your story's `play` function to the following:
 
 <!-- prettier-ignore-start -->
 
@@ -145,6 +122,46 @@ Asides from click events, you can also script additional events with the `play`
 
 <!-- prettier-ignore-end -->
 
+In addition to events, you can also create interactions with the `play` function based on other types of asynchronous methods. For instance, let's assume that you're working with a component with validation logic implemented (e.g., email validation, password strength). In that case, you can introduce delays within your `play` function to emulate user interaction and assert if the values provided are valid or not:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'react/my-component-play-function-with-delay.js.mdx',
+   'react/my-component-play-function-with-delay.mdx.mdx',
+   'angular/my-component-play-function-with-delay.ts.mdx',
+   'angular/my-component-play-function-with-delay.mdx.mdx',
+   'vue/my-component-play-function-with-delay.js.mdx',
+   'vue/my-component-play-function-with-delay.mdx.mdx',
+   'svelte/my-component-play-function-with-delay.js.mdx',
+   'svelte/my-component-play-function-with-delay.mdx.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+When Storybook loads the story, it interacts with the component, filling in its inputs and triggering any validation logic defined.
+
+You can also use the `play` function to verify the existence of an element based on a specific interaction. For instance, if you're working on a component and want to check what happens if a user introduces the wrong information. In that case, you could write the following story:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'react/my-component-play-function-waitfor.js.mdx',
+   'react/my-component-play-function-waitfor.mdx.mdx',
+   'angular/my-component-play-function-waitfor.ts.mdx',
+   'angular/my-component-play-function-waitfor.mdx.mdx',
+   'vue/my-component-play-function-waitfor.js.mdx',
+   'vue/my-component-play-function-waitfor.mdx.mdx',
+   'svelte/my-component-play-function-waitfor.js.mdx',
+   'svelte/my-component-play-function-waitfor.mdx.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ## Querying elements
 
 If you need, you can also adjust your `play` function to find elements based on queries (e.g., role, text content). For example:
@@ -187,4 +204,4 @@ With each interaction you write inside your `play` function when Storybook execu
 
 <!-- prettier-ignore-end -->
 
-Applying these changes into your stories, you'll get a performance boost and improved error handling with the `addon-interactions`.
+Applying these changes to your stories can provide a performance boost and improved error handling with [`addon-interactions`](/addons/@storybook/addon-interactions/).