Update CSS Module contribution doc to include adding new VRT (#5205)

* add vrt test details

* Update contributor-docs/migrating-to-css-modules.md

Co-authored-by: Josh Black <[email protected]>

* lint

---------

Co-authored-by: Josh Black <[email protected]>

contributor-docs/migrating-to-css-modules.md

@@ -21,7 +21,6 @@ This guide outlines the steps to follow when refactoring Primer React components
 
 - **Verify VRT (Visual Regression Testing) Coverage:**
   - Check for missing VRT coverage. We utilize the VRT tests to make sure we're matching styling in production with current expectations. Components should have a Storybook story for every "feature" or option available that impacts the UI for VRT to capture in a screenshot.
-  - Make sure there are `dev` stories for any edge cases spotted in production for the component (ie. `sx` prop, custom className, styled system attributes). `dev` stories may include things that we wouldn't normally recommend for the purpose of stress testing what happens when PRC components are overridden with custom styles.
 - **Ensure All Visual Changes Are Completed:**
   - Make necessary visual changes **before** creating the CSS Modules refactor PR.
 
@@ -121,11 +120,65 @@ This guide outlines the steps to follow when refactoring Primer React components
       expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
     })
     ```
-- **Regression Testing:**
-  - Validate that no visual regressions occur when the feature flag is enabled. The `vrt*` tests are setup to compare the feature flagged component with the original component and will fail if there is a mismatch.
 - **Handling `sx` Prop:**
   - Confirm the `sx` prop behaves correctly with the feature flag enabled.
 
+#### Visual regression testing
+
+Validate that no visual regressions occur when the feature flag is enabled. The `vrt*` tests are setup to compare the feature flagged component with the original component and will fail if there is a mismatch.
+
+- Add `dev` stories for any edge cases spotted in production for the component (ie. `sx` prop, custom className, styled system attributes). `dev` stories may include things that we wouldn't normally recommend for the purpose of stress testing what happens when PRC components are overridden with custom styles.
+- Setup VRT tests for `dev` stories. Copy an existing test in the corresponding test file in the [e2e directory](https://github.com/primer/react/tree/main/e2e/components) and update the id to match the new `dev` story.
+
+Example test file:
+
+```ts
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Dev: Test color',
+    id: 'components-{componentname}-dev--customcolor',
+  },
+] as const
+
+test.describe('ComponentName', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `ComponentName.${story.title}.${theme}.png`,
+            )
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})
+```
+
 ---
 
 ## Releasing a Component