storybook/docs/snippets/common/my-component-interaction-test-with-play-function.js.mdx

```js
// MyComponent.stories.js|jsx|ts|tsx

import { expect } from '@storybook/jest';

import { within, waitFor, userEvent } from '@storybook/testing-library';

import { YourForm } from './YourForm';

export default {
  component: YourForm,
};

export const ExampleStory = {
  play: async ({ args, canvasElement }) => {
    // Starts querying the component from its root element
    const canvas = within(canvasElement);

    await userEvent.type(canvas.getByTestId('email'), 'email@email-provider.com');
    await userEvent.type(canvas.getByTestId('password'), 'randompassword');

    // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
    await userEvent.click(canvas.getByTestId('submit'));

    await waitFor(async () => {
      await expect(args.onSubmit).toHaveBeenCalledTimes(1);
      await expect(args.onSubmit).toHaveBeenCalledWith({
        email: 'email@email-provider.com',
        password: 'password',
      });
    });
  },
};
```