fix(vr-tests-react-components): migrate to new StoryWright api to define Steps to resolve VR snapshoting issues

apps/vr-tests-react-components/package.json

@@ -11,7 +11,7 @@
     "start": "storybook dev",
     "test": "just-scripts test",
     "type-check": "tsc -p . --noEmit --baseUrl .",
-    "test-vr": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true"
+    "test-vr": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --bailOnStoriesError"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx

@@ -5,6 +5,7 @@ import { mergeClasses } from '@griffel/react';
 import { propValues, useStyles } from './utils';
 import type { Meta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
+import { Steps, type StoryParameters } from 'storywright';
 
 const BadgeAppearanceTemplate: React.FC<{ appearance: Required<BadgeProps>['appearance'] }> = ({ appearance }) => {
   const styles = useStyles();
@@ -77,6 +78,7 @@ const BadgeAppearanceTemplate: React.FC<{ appearance: Required<BadgeProps>['appe
 
 export default {
   title: 'Badge Converged',
+  parameters: { storyWright: { steps: new Steps().snapshot('normal').end() } } satisfies StoryParameters,
 } satisfies Meta<typeof Badge>;
 
 export const Filled = () => <BadgeAppearanceTemplate appearance={'filled'} />;

apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx

@@ -4,6 +4,7 @@ import { CircleRegular } from '@fluentui/react-icons';
 import { propValues, useStyles } from './utils';
 import type { Meta } from '@storybook/react';
 import { getStoryVariant, RTL } from '../../utilities';
+import { Steps, type StoryParameters } from 'storywright';
 
 const BadgeSampleRow: React.FC<BadgeProps> = props => {
   const styles = useStyles();
@@ -35,6 +36,7 @@ const BadgeSampleRow: React.FC<BadgeProps> = props => {
 
 export default {
   title: 'Badge Converged',
+  parameters: { storyWright: { steps: new Steps().snapshot('normal').end() } } satisfies StoryParameters,
 } satisfies Meta<typeof Badge>;
 
 export const SizeTiny = () => {

apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { Button } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import type { Meta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
+import type { StoryParameters } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export default {
   title: 'Button Converged',
   component: Button,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
+  parameters: { storyWright: { steps } } satisfies StoryParameters,
 } satisfies Meta<typeof Button>;
 
 export const Default = () => <Button id={buttonId}>Hello, world</Button>;

apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { CompoundButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import type { Meta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { getStoryVariant, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
+import type { StoryParameters } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export default {
   title: 'CompoundButton Converged',
   component: CompoundButton,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
+  parameters: { storyWright: { steps } } satisfies StoryParameters,
 } satisfies Meta<typeof CompoundButton>;
 
 export const Outline = () => (

apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Steps } from 'storywright';
+import { Steps, type StoryParameters } from 'storywright';
 import { CompoundButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import type { Meta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { getStoryVariant, RTL } from '../../utilities';
 import { buttonId } from './utils';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
@@ -20,7 +20,7 @@ const steps = new Steps()
 export default {
   title: 'CompoundButton Converged',
   component: CompoundButton,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
+  parameters: { storyWright: { steps } } satisfies StoryParameters,
 } satisfies Meta<typeof CompoundButton>;
 
 export const Default = () => (

apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { MenuButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import type { Meta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { getStoryVariant, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
+import type { StoryParameters } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export default {
   title: 'MenuButton Converged',
   component: MenuButton,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
+  parameters: { storyWright: { steps } } satisfies StoryParameters,
 } satisfies Meta<typeof MenuButton>;
 
 export const Default = () => <MenuButton id={buttonId}>Hello, world</MenuButton>;

apps/vr-tests-react-components/src/stories/Button/SplitButton.stories.tsx

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { SplitButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import type { Meta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
+import type { StoryParameters } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export default {
   title: 'SplitButton Converged',
   component: SplitButton,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
+  parameters: { storyWright: { steps } } satisfies StoryParameters,
 } satisfies Meta<typeof SplitButton>;
 
 export const Default = () => <SplitButton id={buttonId}>Hello, world</SplitButton>;

apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { ToggleButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import type { Meta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
+import type { StoryParameters } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export default {
   title: 'ToggleButton Converged',
   component: ToggleButton,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
+  parameters: { storyWright: { steps } } satisfies StoryParameters,
 } satisfies Meta<typeof ToggleButton>;
 
 export const Default = () => <ToggleButton id={buttonId}>Hello, world</ToggleButton>;

apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
+import { Steps, type StoryParameters } from 'storywright';
 import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
 import { MoreHorizontal24Filled, MoreHorizontal20Filled } from '@fluentui/react-icons';
 import { Body1, Caption1, Text } from '@fluentui/react-text';
@@ -15,13 +15,14 @@ export default {
 
   decorators: [
     story => (
-      <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
-        <div className="testWrapper" style={{ width: '600px' }}>
-          {story()}
-        </div>
-      </StoryWright>
+      <div className="testWrapper" style={{ width: '600px' }}>
+        {story()}
+      </div>
     ),
   ],
+  parameters: {
+    storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() },
+  } satisfies StoryParameters,
 } satisfies Meta<typeof Card>;
 
 export const CardTemplates = () => (

apps/vr-tests-react-components/src/stories/Charts/Legend.stories.tsx

@@ -4,6 +4,8 @@ import { DARK_MODE, getStoryVariant, RTL, TestWrapperDecorator } from '../../uti
 import { Steps, StoryWright } from 'storywright';
 import { Legend, Legends } from '@fluentui/react-charts-preview';
 
+const overflowText = 'Overflow Items';
+
 export default {
   title: 'Charts/Legend',
 
@@ -13,7 +15,16 @@ export default {
       const steps = context.name.includes('Overflow')
         ? new Steps()
             .snapshot('default', { cropTo: '.testWrapper' })
-            .executeScript(`document.querySelectorAll('div[class^="overflowIndicationTextStyle"]')[0].click()`)
+            .executeScript(
+              `document.evaluate(
+                  "//button[contains(text(), 'Overflow Items')]",
+                  document,
+                  null,
+                  XPathResult.FIRST_ORDERED_NODE_TYPE,
+                  null
+              ).singleNodeValue
+              .click()`,
+            )
             .snapshot('expanded', { cropTo: '.testWrapper' })
             .end()
         : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
@@ -278,7 +289,7 @@ export const Overflow = () => {
     <div style={{ width: 400, height: 600, padding: 10, display: 'flex' }}>
       <Legends
         legends={legends}
-        overflowText={'Overflow Items'}
+        overflowText={overflowText}
         allowFocusOnLegends={true}
         canSelectMultipleLegends={false}
       />

apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx

@@ -13,7 +13,7 @@ export default {
       <StoryWright
         steps={new Steps()
           .snapshot('default', { cropTo: '.testWrapper' })
-          .hover('[role=option]')
+          .hover('input')
           .snapshot('hover', { cropTo: '.testWrapper' })
           .keys('input', 'ArrowDown')
           .snapshot('active option', { cropTo: '.testWrapper' })

apps/vr-tests-react-components/src/stories/CustomStyleHooks.stories.tsx

@@ -10,10 +10,14 @@ import type {
 } from '@fluentui/react-button';
 import { FluentProvider, FluentProviderCustomStyleHooks } from '@fluentui/react-provider';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { type StoryParameters, Steps } from 'storywright';
 
 export default {
   title: 'FluentProvider CustomStyleHooks',
   component: FluentProvider,
+  parameters: {
+    storyWright: { steps: new Steps().snapshot('normal').end() },
+  } satisfies StoryParameters,
 } satisfies Meta<typeof FluentProvider>;
 
 export const Default = () => <FluentProvider>Hello, world</FluentProvider>;

apps/vr-tests-react-components/src/stories/Dropdown/Dropdown.stories.tsx

@@ -13,9 +13,9 @@ export default {
       <StoryWright
         steps={new Steps()
           .snapshot('default', { cropTo: '.testWrapper' })
-          .hover('input')
+          .hover('[role=combobox]')
           .snapshot('hover', { cropTo: '.testWrapper' })
-          .focus('input')
+          .focus('[role=combobox]')
           .wait(250) // let focus border animation finish
           .snapshot('focused', { cropTo: '.testWrapper' })
           .end()}

apps/vr-tests-react-components/src/stories/Dropdown/DropdownOptionInteractions.stories.tsx

@@ -14,7 +14,7 @@ export default {
       <StoryWright
         steps={new Steps()
           .snapshot('default', { cropTo: '.testWrapper' })
-          .hover('[role=option]')
+          .hover('[role=combobox]')
           .snapshot('hover', { cropTo: '.testWrapper' })
           .keys('input', 'ArrowDown')
           .snapshot('active option', { cropTo: '.testWrapper' })

apps/vr-tests-react-components/src/stories/Menu/MenuGroups.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
-import { StoryWright } from 'storywright';
 import {
   Menu,
   MenuTrigger,
@@ -17,8 +16,6 @@ import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'
 
 export default {
   title: 'Menu Converged - groups',
-
-  decorators: [story => <StoryWright>{story()}</StoryWright>],
 } satisfies Meta<typeof Menu>;
 
 export const Default = () => (

apps/vr-tests-react-components/src/stories/Menu/MenuItemSelectableWIthLongText.stories.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
 import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItemCheckbox, MenuItem } from '@fluentui/react-menu';
-import { StoryWright } from 'storywright';
 import { CutRegular, CutFilled, bundleIcon } from '@fluentui/react-icons';
 
 const CutIcon = bundleIcon(CutFilled, CutRegular);
 
 export default {
   title: 'Menu Converged - selection',
-  decorators: [story => <StoryWright>{story()}</StoryWright>],
 } satisfies Meta<typeof Menu>;
 
 export const SelectableWithLongText = () => (

apps/vr-tests-react-components/src/stories/Menu/MenuLongContent.stories.tsx

@@ -1,15 +1,12 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
-import { StoryWright } from 'storywright';
 import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, MenuDivider } from '@fluentui/react-menu';
 import { CutRegular, ClipboardPasteRegular } from '@fluentui/react-icons';
 
 import { getStoryVariant, RTL } from '../../utilities';
 
 export default {
   title: 'Menu Converged - long content',
-
-  decorators: [story => <StoryWright>{story()}</StoryWright>],
 } satisfies Meta<typeof Menu>;
 
 export const Default = () => (

apps/vr-tests-react-components/src/stories/ProgressBar.stories.tsx

@@ -1,17 +1,10 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
 import { ProgressBar } from '@fluentui/react-progress';
-import { Steps } from 'storywright';
+import { Steps, type StoryParameters } from 'storywright';
 import { makeStyles } from '@griffel/react';
 
-import {
-  getStoryVariant,
-  withStoryWrightSteps,
-  TestWrapperDecoratorFixedWidth,
-  DARK_MODE,
-  HIGH_CONTRAST,
-  RTL,
-} from '../utilities';
+import { getStoryVariant, TestWrapperDecoratorFixedWidth, DARK_MODE, HIGH_CONTRAST, RTL } from '../utilities';
 
 const useStyles = makeStyles({
   paused: {
@@ -25,10 +18,10 @@ const useStyles = makeStyles({
 export default {
   title: 'ProgressBar converged',
 
-  decorators: [
-    TestWrapperDecoratorFixedWidth,
-    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
-  ],
+  decorators: [TestWrapperDecoratorFixedWidth],
+  parameters: {
+    storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() },
+  } satisfies StoryParameters,
 } satisfies Meta<typeof ProgressBar>;
 
 export const IndeterminateThickness = () => (

apps/vr-tests-react-components/src/stories/Skeleton.stories.tsx

@@ -1,17 +1,10 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
 import { Skeleton, SkeletonItem } from '@fluentui/react-skeleton';
-import { Steps } from 'storywright';
+import { Steps, type StoryParameters } from 'storywright';
 import { makeStyles } from '@griffel/react';
 
-import {
-  getStoryVariant,
-  withStoryWrightSteps,
-  TestWrapperDecoratorFixedWidth,
-  HIGH_CONTRAST,
-  DARK_MODE,
-  RTL,
-} from '../utilities';
+import { getStoryVariant, TestWrapperDecoratorFixedWidth, HIGH_CONTRAST, DARK_MODE, RTL } from '../utilities';
 
 const useStyles = makeStyles({
   paused: {
@@ -25,10 +18,10 @@ const useStyles = makeStyles({
 export default {
   title: 'Skeleton converged',
 
-  decorators: [
-    TestWrapperDecoratorFixedWidth,
-    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
-  ],
+  decorators: [TestWrapperDecoratorFixedWidth],
+  parameters: {
+    storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() },
+  } satisfies StoryParameters,
 } satisfies Meta<typeof Skeleton>;
 
 export const OpaqueSkeletonWithRectangle = () => (