Docs: Test runner minor fixes

docs/snippets/common/test-runner-a11y-config.js.mdx

@@ -4,7 +4,7 @@
 const { injectAxe, checkA11y } = require('axe-playwright');
 
 /*
- * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api
  * to learn more about the test-runner hooks API.
  */
 module.exports = {

docs/snippets/common/test-runner-a11y-config.ts.mdx

@@ -1,12 +1,11 @@
 ```ts
 // .storybook/test-runner.ts
 
-import { injectAxe, checkA11y } from 'axe-playwright';
-
 import type { TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y } from 'axe-playwright';
 
 /*
- * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api
  * to learn more about the test-runner hooks API.
  */
 const a11yConfig: TestRunnerConfig = {

docs/snippets/common/test-runner-a11y-configure.js.mdx

@@ -6,7 +6,7 @@ const { injectAxe, checkA11y, configureAxe } = require('axe-playwright');
 const { getStoryContext } = require('@storybook/test-runner');
 
 /*
- * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api
  * to learn more about the test-runner hooks API.
  */
 module.exports = {

docs/snippets/common/test-runner-a11y-configure.ts.mdx

@@ -1,14 +1,13 @@
 ```ts
 // .storybook/test-runner.ts
 
-import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
-
+import type { TestRunnerConfig } from '@storybook/test-runner';
 import { getStoryContext } from '@storybook/test-runner';
 
-import type { TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
 
 /*
- * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api
  * to learn more about the test-runner hooks API.
  */
 const a11yConfig: TestRunnerConfig = {

docs/snippets/common/test-runner-a11y-disable.js.mdx

@@ -1,12 +1,11 @@
 ```js
 // .storybook/test-runner.js
 
-const { injectAxe, checkA11y } = require('axe-playwright');
-
 const { getStoryContext } = require('@storybook/test-runner');
 
+const { injectAxe, checkA11y } = require('axe-playwright');
 /*
- * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api
  * to learn more about the test-runner hooks API.
  */
 module.exports = {

docs/snippets/common/test-runner-a11y-disable.ts.mdx

@@ -1,14 +1,13 @@
 ```ts
 // .storybook/test-runner.ts
 
-import { injectAxe, checkA11y } from 'axe-playwright';
-
+import type { TestRunnerConfig } from '@storybook/test-runner';
 import { getStoryContext } from '@storybook/test-runner';
 
-import type { TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y } from 'axe-playwright';
 
 /*
- * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+ * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api
  * to learn more about the test-runner hooks API.
  */
 const a11yConfig: TestRunnerConfig = {

docs/snippets/common/test-runner-helper-function.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // .storybook/test-runner.js
 
-const { getStoryContext } = require('@storybook/test-runner');
+const { getStoryContext, waitForPageReady } = require('@storybook/test-runner');
 
 module.exports = {
   // Hook that is executed before the test runner starts running tests
@@ -23,6 +23,9 @@ module.exports = {
     // Get the entire context of a story, including parameters, args, argTypes, etc.
     const storyContext = await getStoryContext(page, context);
 
+    // This utility function is designed for image snapshot testing. It will wait for the page to be fully loaded, including all the async items (e.g., images, fonts, etc.).
+    await waitForPageReady(page);
+
     // Add your configuration here.
   },
 };

docs/snippets/common/test-runner-helper-function.ts.mdx

@@ -2,8 +2,7 @@
 // .storybook/test-runner.ts
 
 import type { TestRunnerConfig } from '@storybook/test-runner';
-
-import { getStoryContext } from '@storybook/test-runner';
+import { getStoryContext, waitForPageReady } from '@storybook/test-runner';
 
 const config: TestRunnerConfig = {
   // Hook that is executed before the test runner starts running tests
@@ -25,6 +24,9 @@ const config: TestRunnerConfig = {
     // Get the entire context of a story, including parameters, args, argTypes, etc.
     const storyContext = await getStoryContext(page, context);
 
+    // This utility function is designed for image snapshot testing. It will wait for the page to be fully loaded, including all the async items (e.g., images, fonts, etc.).
+    await waitForPageReady(page);
+
     // Add your configuration here.
   },
 };

docs/writing-tests/accessibility-testing.md

@@ -89,7 +89,7 @@ Out of the box, Storybook's accessibility addon includes a set of accessibility
 
 #### Global a11y configuration
 
-If you need to dismiss an accessibility rule or modify its settings across all stories, you can add the following to your [storybook/preview.js](../configure/overview.md#configure-story-rendering):
+If you need to dismiss an accessibility rule or modify its settings across all stories, you can add the following to your [`storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering):
 
 <!-- prettier-ignore-start -->
 
@@ -170,7 +170,7 @@ Disable accessibility testing for stories or components by adding the following
 
 The most accurate way to check accessibility is manually on real devices. However, you can use automated tools to catch common accessibility issues. For example, [Axe](https://www.deque.com/axe/), on average, catches upwards to [57% of WCAG issues](https://www.deque.com/blog/automated-testing-study-identifies-57-percent-of-digital-accessibility-issues/) automatically.
 
-These tools work by auditing the rendered DOM against heuristics based on [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) rules and other industry-accepted best practices. You can then integrate these tools into your test automation pipeline using the Storybook [test runner](./test-runner.md#test-hook-api-experimental) and [axe-playwright](https://github.com/abhinaba-ghosh/axe-playwright).
+These tools work by auditing the rendered DOM against heuristics based on [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) rules and other industry-accepted best practices. You can then integrate these tools into your test automation pipeline using the Storybook [test runner](./test-runner.md#test-hook-api) and [axe-playwright](https://github.com/abhinaba-ghosh/axe-playwright).
 
 ### Setup
 
@@ -190,7 +190,7 @@ Run the following command to install the required dependencies.
 
 <!-- prettier-ignore-end -->
 
-Add a new [configuration file](./test-runner.md#test-hook-api-experimental) inside your Storybook directory with the following inside:
+Add a new [configuration file](./test-runner.md#test-hook-api) inside your Storybook directory with the following inside:
 
 <!-- prettier-ignore-start -->
 
@@ -205,7 +205,7 @@ Add a new [configuration file](./test-runner.md#test-hook-api-experimental) insi
 
 <div class="aside">
 
-💡 `preRender` and `postRender` are convenient hooks that allow you to extend the test runner's default configuration. They are **experimental** and subject to changes. Read more about them [here](./test-runner.md#test-hook-api-experimental).
+💡 `preRender` and `postRender` are convenient hooks that allow you to extend the test runner's default configuration. Read more about them [here](./test-runner.md#test-hook-api).
 
 </div>
 

docs/writing-tests/test-runner.md

@@ -190,19 +190,19 @@ However, you might want to pair the test runner and Chromatic in some cases.
 
 ## Advanced configuration
 
-### Test hook API (experimental)
+### Test hook API
 
 The test-runner renders a story and executes its [play function](../writing-stories/play-function.md) if one exists. However, certain behaviors are impossible to achieve via the play function, which executes in the browser. For example, if you want the test-runner to take visual snapshots for you, this is possible via Playwright/Jest but must be executed in Node.
 
 The test-runner exports test hooks that can be overridden globally to enable use cases like visual or DOM snapshots. These hooks give you access to the test lifecycle _before_ and _after_ the story is rendered.
 Listed below are the available hooks and an overview of how to use them.
 
-| Hook         | Description                                                                                        |
-| ------------ | -------------------------------------------------------------------------------------------------- |
-| `prepare`    | Prepares the browser for tests<br/>`async prepare({ page, browserContext, testRunnerConfig }) {}`  |
-| `setup`      | Executes once before all the tests run<br/>`setup() {}`                                            |
-| `preRender`  | Executes before a story is rendered<br/>`async preRender(page, context) {}`                        |
-| `postRender` | Executes after the story is rendered<br/>`async postRender(page, context) {}`                      |
+| Hook         | Description                                                                                       |
+| ------------ | ------------------------------------------------------------------------------------------------- |
+| `prepare`    | Prepares the browser for tests<br/>`async prepare({ page, browserContext, testRunnerConfig }) {}` |
+| `setup`      | Executes once before all the tests run<br/>`setup() {}`                                           |
+| `preRender`  | Executes before a story is rendered<br/>`async preRender(page, context) {}`                       |
+| `postRender` | Executes after the story is rendered<br/>`async postRender(page, context) {}`                     |
 
 <div class="aside">