Docs: Add afterEach guidance

docs/_snippets/after-each-in-meta.md

@@ -0,0 +1,185 @@
+```ts filename="Page.stories.ts" renderer="angular" language="ts"
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Page } from './Page';
+
+const meta: Meta<Page> = {
+  component: Page,
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+};
+export default meta;
+
+type Story = StoryObj<Page>;
+
+export const Default: Story = {
+  async play({ canvas }) {
+    // ...
+  },
+};
+```
+
+```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+
+  const meta = defineMeta({
+    component: Page,
+    // 👇 Runs after each story in this file
+    async afterEach(context) {
+      console.log(`✅ Tested ${context.name} story`);
+    },
+  });
+</script>
+
+<Story name="Default" play={async ({ canvas }) => {
+  // ...
+  }}
+/>
+```
+
+```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Page from './Page.svelte';
+
+export default {
+  component: Page,
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+};
+
+export const Default = {
+  async play({ canvas }) {
+    // ...
+  },
+};
+```
+
+```js filename="Page.stories.js" renderer="common" language="js"
+import { Page } from './Page';
+
+export default {
+  component: Page,
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+};
+
+export const Default = {
+  async play({ canvas }) {
+    // ...
+  },
+};
+```
+
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+
+  const meta = defineMeta({
+    component: Page,
+    // 👇 Runs after each story in this file
+    async afterEach(context) {
+      console.log(`✅ Tested ${context.name} story`);
+    },
+  });
+</script>
+
+<Story name="Default" play={async ({ canvas }) => {
+  // ...
+  }}
+/>
+```
+
+```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+// Replace your-framework with svelte-vite or sveltekit
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import Page from './Page.svelte';
+
+const meta = {
+  component: Page,
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+} satisfies Meta<typeof Page>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  async play({ canvas }) {
+    // ...
+  },
+};
+```
+
+```ts filename="Page.stories.ts" renderer="common" language="ts"
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Page } from './Page';
+
+const meta = {
+  component: Page,
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+} satisfies Meta<typeof Page>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  async play({ canvas }) {
+    // ...
+  },
+};
+```
+
+```js filename="Page.stories.js" renderer="web-components" language="js"
+export default {
+  component: 'my-page',
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+};
+
+export const Default = {
+  async play({ canvas }) {
+    // ...
+  },
+};
+```
+
+```ts filename="Page.stories.ts" renderer="web-components" language="ts"
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+
+const meta: Meta = {
+  component: 'my-page',
+  // 👇 Runs after each story in this file
+  async afterEach(context) {
+    console.log(`✅ Tested ${context.name} story`);
+  },
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  async play({ canvas }) {
+    // ...
+  },
+};
+```

docs/writing-tests/interaction-testing.mdx

@@ -239,6 +239,24 @@ It is _not_ necessary to restore `fn()` mocks, as Storybook will already do that
 
 </Callout>
 
+### Make assertions after interactions
+
+Sometimes, you may need to make assertions or run code after the component has been rendered and interacted with.
+
+#### `afterEach`
+
+`afterEach` runs after the story is rendered and the play function has completed. It can be used at the project level in the preview file (`.storybook/preview.js|ts`), at the component level in the component meta, or at the story level in the story definition. This is useful for making assertions after the component has been rendered and interacted with, such as running checks on the final rendered output or logging information.
+
+Like the `play` function, `afterEach` receives the `context` object, which contains the `args`, `canvas`, and other properties related to the story. You can use this to make assertions or run code after the story has been rendered.
+
+<CodeSnippets path="after-each-in-meta.md" />
+
+<Callout variant="info">
+
+You should not use `afterEach` to reset state in your tests. Because it runs after the story, resetting state here could prevent you from seeing the correct end state of your story. Instead, use the [`beforeEach`'s returned cleanup function](#beforeeach) to reset state, which will run only when navigating between stories to preserve the end state.
+
+</Callout>
+
 ### Group interactions with the step function
 
 For complex flows, it can be worthwhile to group sets of related interactions together using the step function. This allows you to provide a custom label that describes a set of interactions: