diff --git a/apps/vr-tests-react-components/.storybook/main.js b/apps/vr-tests-react-components/.storybook/main.js
index 0d8d34b1fd5f36..19d8aee43c4f29 100644
--- a/apps/vr-tests-react-components/.storybook/main.js
+++ b/apps/vr-tests-react-components/.storybook/main.js
@@ -53,4 +53,8 @@ module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig}
       },
     };
   },
+  // 💡 NOTE: this is necessary for StoryWright. without this the current version "0.0.27-storybook7.9" wont take screenshots for Steps
+  features: {
+    storyStoreV7: false,
+  },
 });
diff --git a/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx b/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx
index 490b3f09ec026b..f9439b64fc5400 100644
--- a/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx
+++ b/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx
@@ -11,13 +11,13 @@ import { bundleIcon, CalendarMonth20Filled, CalendarMonth20Regular } from '@flue
 const CalendarMonth = bundleIcon(CalendarMonth20Filled, CalendarMonth20Regular);
 
 export const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   .hover('.breadcrumb-sample')
-  .snapshot('hover', { cropTo: '.testWrapper' })
+  .snapshot('hover')
   .mouseDown('.breadcrumb-sample')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .snapshot('pressed')
   .focus('.breadcrumb-sample')
-  .snapshot('focused', { cropTo: '.testWrapper' })
+  .snapshot('focused')
   .end();
 
 export const SampleBreadcrumbButtons = (props: BreadcrumbProps) => (
diff --git a/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx
index 95881ec32b35f8..ec4381c63ed6d3 100644
--- a/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx
@@ -9,12 +9,12 @@ import { buttonId } from './utils';
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   // https://github.com/microsoft/fluentui/issues/21998
   // .hover('#button-id')
   // .snapshot('hover', { cropTo: '.testWrapper' })
   .mouseDown('#button-id')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .snapshot('pressed')
   .end();
 
 export default {
diff --git a/apps/vr-tests-react-components/src/stories/Button/utils.ts b/apps/vr-tests-react-components/src/stories/Button/utils.ts
index 651478afafb80e..67e1161345acfa 100644
--- a/apps/vr-tests-react-components/src/stories/Button/utils.ts
+++ b/apps/vr-tests-react-components/src/stories/Button/utils.ts
@@ -10,9 +10,9 @@ export const useStyles = makeStyles({
 });
 
 export const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   .hover('#button-id')
-  .snapshot('hover', { cropTo: '.testWrapper' })
+  .snapshot('hover')
   .mouseDown('#button-id')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .snapshot('pressed')
   .end();
diff --git a/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx
index 174df5aae6913f..6e1268a49e1d8e 100644
--- a/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx
@@ -8,9 +8,7 @@ import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps }
 
 export default {
   title: 'ColorPicker Converged',
-  decorators: [
-    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
-  ],
+  decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })],
 } satisfies Meta<typeof ColorPicker>;
 
 export const Default = () => <SampleColorPicker color={{ h: 109, s: 1, v: 0.91 }} />;
diff --git a/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx b/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx
index ea795f5994ba8b..b1fdd6cc8135ee 100644
--- a/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx
@@ -9,9 +9,7 @@ export default {
   title: 'Image Converged',
 
   decorators: [
-    (story: () => React.ReactNode) => (
-      <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-    ),
+    (story: () => React.ReactNode) => <StoryWright steps={new Steps().snapshot('normal').end()}>{story()}</StoryWright>,
   ],
 } satisfies Meta<typeof Image>;
 
diff --git a/apps/vr-tests-react-components/src/stories/Label.stories.tsx b/apps/vr-tests-react-components/src/stories/Label.stories.tsx
index 08919a31d43675..1315aa7d099255 100644
--- a/apps/vr-tests-react-components/src/stories/Label.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Label.stories.tsx
@@ -7,9 +7,7 @@ import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps }
 export default {
   title: 'Label Converged',
 
-  decorators: [
-    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
-  ],
+  decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })],
 } satisfies Meta<typeof Label>;
 
 export const Root = () => <Label>I'm a label</Label>;
diff --git a/apps/vr-tests-react-components/src/stories/Link/utils.tsx b/apps/vr-tests-react-components/src/stories/Link/utils.tsx
index 9ad2a30f1ac7af..dcb45302663bfe 100644
--- a/apps/vr-tests-react-components/src/stories/Link/utils.tsx
+++ b/apps/vr-tests-react-components/src/stories/Link/utils.tsx
@@ -21,25 +21,25 @@ export const InvertedBackground: React.FC<{ children: React.ReactNode }> = ({ ch
 };
 
 export const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   .hover('.fui-Link')
-  .snapshot('hover', { cropTo: '.testWrapper' })
+  .snapshot('hover')
   // This needs to be added so that the focus outline is shown correctly
   .executeScript("document.getElementsByClassName('fui-Link')[0].setAttribute('data-fui-focus-visible', '')")
   .focus('.fui-Link')
-  .snapshot('focused', { cropTo: '.testWrapper' })
+  .snapshot('focused')
   .executeScript("document.getElementsByClassName('fui-Link')[0].removeAttribute('data-fui-focus-visible')")
   .mouseDown('.fui-Link')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .snapshot('pressed')
   .mouseUp('.fui-Link')
   .end();
 
 // Disabled stories use steps without focus so they do not error out on the focused step.
 export const disabledUnfocusableSteps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   .hover('.fui-Link')
-  .snapshot('hover', { cropTo: '.testWrapper' })
+  .snapshot('hover')
   .mouseDown('.fui-Link')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .snapshot('pressed')
   .mouseUp('.fui-Link')
   .end();
diff --git a/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx b/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx
index b0d4d0cc5bf362..37171428d14ece 100644
--- a/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx
@@ -124,15 +124,17 @@ export const Auto = () => {
 
 export const Square = () => {
   return (
-    <MessageBar shape="square">
-      <MessageBarBody>
-        <MessageBarTitle>Title</MessageBarTitle>
-        Message providing information to the user with actionable insights. <Link>Link</Link>
-      </MessageBarBody>
-      <MessageBarActions containerAction={<Button appearance="transparent" icon={<DismissRegular />} />}>
-        <Button>Action</Button>
-        <Button>Action</Button>
-      </MessageBarActions>
-    </MessageBar>
+    <div className="testWrapper">
+      <MessageBar shape="square">
+        <MessageBarBody>
+          <MessageBarTitle>Title</MessageBarTitle>
+          Message providing information to the user with actionable insights. <Link>Link</Link>
+        </MessageBarBody>
+        <MessageBarActions containerAction={<Button appearance="transparent" icon={<DismissRegular />} />}>
+          <Button>Action</Button>
+          <Button>Action</Button>
+        </MessageBarActions>
+      </MessageBar>
+    </div>
   );
 };
diff --git a/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx b/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx
index 2ac6ca52265ef0..7417a564b7da37 100644
--- a/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx
@@ -41,7 +41,7 @@ export default {
 };
 
 export const Default = () => (
-  <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+  <StoryWright steps={new Steps().snapshot('default').end()}>
     <ShadowRoot>
       <ComponentSet />
     </ShadowRoot>
diff --git a/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx b/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx
index 09e443803c5162..15442ac31c509f 100644
--- a/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx
@@ -10,7 +10,7 @@ export default {
 };
 
 export const Portal: React.FC = () => (
-  <StoryWright steps={new Steps().click('#toggle-menu').snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+  <StoryWright steps={new Steps().click('#toggle-menu').snapshot('normal').end()}>
     <ShadowRoot>
       <Menu>
         <MenuTrigger disableButtonEnhancement>
diff --git a/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx
index 9b91ede32dd3cc..16d4c7e661656a 100644
--- a/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx
@@ -8,9 +8,7 @@ import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps }
 
 export default {
   title: 'SwatchPicker Converged',
-  decorators: [
-    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
-  ],
+  decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })],
 } satisfies Meta<typeof SwatchPicker>;
 
 export const Default = () => (
diff --git a/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx b/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx
index 409afb8012da87..d7cd382029b1e6 100644
--- a/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx
@@ -13,11 +13,11 @@ export default {
       withStoryWrightSteps({
         story,
         steps: new Steps()
-          .snapshot('default', { cropTo: '.testWrapper' })
+          .snapshot('default')
           .hover('.mouse-target')
-          .snapshot('hover', { cropTo: '.testWrapper' })
+          .snapshot('hover')
           .mouseDown('.mouse-target')
-          .snapshot('pressed', { cropTo: '.testWrapper' })
+          .snapshot('pressed')
           .mouseUp('.mouse-target')
           .end(),
       }),
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
index 42a839348865fc..373d4a70796d4a 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
@@ -9,7 +9,7 @@ import { makeStyles } from '@griffel/react';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
-const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+const steps = new Steps().snapshot('default').end();
 
 export default {
   title: 'InteractionTag Converged',
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
index 681b0c8fc5776c..6e6270225d6722 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
@@ -10,16 +10,16 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 const contentId = 'content-id';
 const dismissButtonId = 'dismiss-button-id';
 const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   .hover(`#${contentId}`)
-  .snapshot('hover content', { cropTo: '.testWrapper' })
+  .snapshot('hover content')
   .mouseDown(`#${contentId}`)
-  .snapshot('pressed content', { cropTo: '.testWrapper' })
+  .snapshot('pressed content')
   .mouseUp(`#${contentId}`)
   .hover(`#${dismissButtonId}`)
-  .snapshot('hover dismiss', { cropTo: '.testWrapper' })
+  .snapshot('hover dismiss')
   .mouseDown(`#${dismissButtonId}`)
-  .snapshot('pressed dismiss', { cropTo: '.testWrapper' })
+  .snapshot('pressed dismiss')
   .mouseUp(`#${dismissButtonId}`)
   .end();
 
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
index 7b539a470bbd66..33d21f8c3494fc 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
@@ -8,18 +8,18 @@ import { Steps } from 'storywright';
 const contentId = 'content-id';
 const dismissButtonId = 'dismiss-button-id';
 const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
 
   // This needs to be added so that the focus outline is shown correctly
   .executeScript(`document.querySelector('#${contentId}').setAttribute('data-fui-focus-visible', '')`)
   .focus(`#${contentId}`)
-  .snapshot('focus content', { cropTo: '.testWrapper' })
+  .snapshot('focus content')
   .executeScript(`document.querySelector('#${contentId}').removeAttribute('data-fui-focus-visible')`)
 
   // This needs to be added so that the focus outline is shown correctly
   .executeScript(`document.querySelector('#${dismissButtonId}').setAttribute('data-fui-focus-visible', '')`)
   .focus(`#${dismissButtonId}`)
-  .snapshot('focus dismiss', { cropTo: '.testWrapper' })
+  .snapshot('focus dismiss')
   .executeScript(`document.querySelector('#${dismissButtonId}').removeAttribute('data-fui-focus-visible')`)
 
   .end();
diff --git a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
index bde3970f43ea83..b028df283f9d66 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
@@ -8,7 +8,7 @@ import { Steps } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
-const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+const steps = new Steps().snapshot('default').end();
 
 export default {
   title: 'Tag Converged',
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
index 0310924ea9fbf7..4d529cc33e1e78 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
@@ -9,11 +9,11 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 const dismissIconId = 'dismiss-icon-id';
 const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   .hover(`#${dismissIconId}}`)
-  .snapshot('hover', { cropTo: '.testWrapper' })
+  .snapshot('hover')
   .mouseDown(`#${dismissIconId}}`)
-  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .snapshot('pressed')
   .end();
 
 export default {
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
index 961347ffbd30e8..f24947feb4ae0f 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta } from '@storybook/react';
 import { Steps } from 'storywright';
 import { withStoryWrightSteps } from '../../utilities';
 
-const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+const steps = new Steps().snapshot('default').end();
 
 export default {
   title: 'TagGroup Converged',
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
index 2a0a4611471873..c75840c8287e05 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
@@ -7,11 +7,11 @@ import { Steps } from 'storywright';
 
 const tagId = 'tag-id';
 const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   // This needs to be added so that the focus outline is shown correctly
   .executeScript(`document.querySelector('#${tagId}').setAttribute('data-fui-focus-visible', '')`)
   .focus(`#${tagId}`)
-  .snapshot('focused', { cropTo: '.testWrapper' })
+  .snapshot('focused')
   .executeScript(`document.querySelector('#${tagId}').removeAttribute('data-fui-focus-visible')`)
   .end();
 
diff --git a/apps/vr-tests-react-components/src/stories/Textarea/TextareaInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Textarea/TextareaInteractions.stories.tsx
index 711e3b5f7e4951..7536b4c2c9de39 100644
--- a/apps/vr-tests-react-components/src/stories/Textarea/TextareaInteractions.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Textarea/TextareaInteractions.stories.tsx
@@ -18,7 +18,7 @@ export default {
           .snapshot('hover', { cropTo: '.testWrapper' })
           .click('textarea')
           .wait(250) // needed for bottom focus border animation
-          .snapshot('focused', { cropTo: '.textWrapper' })
+          .snapshot('focused', { cropTo: '.testWrapper' })
           .end(),
       }),
   ],
diff --git a/apps/vr-tests-web-components/.storybook/main.cjs b/apps/vr-tests-web-components/.storybook/main.cjs
index 3bab823e169d06..dd31bc585620f2 100644
--- a/apps/vr-tests-web-components/.storybook/main.cjs
+++ b/apps/vr-tests-web-components/.storybook/main.cjs
@@ -85,4 +85,8 @@ module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig}
 
     return config;
   },
+  // 💡 NOTE: this is necessary for StoryWright. without this the current version "0.0.27-storybook7.9" wont take screenshots for Steps
+  features: {
+    storyStoreV7: false,
+  },
 });
diff --git a/apps/vr-tests/.storybook/main.js b/apps/vr-tests/.storybook/main.js
index 9f3502a8326aa3..b643483d257305 100644
--- a/apps/vr-tests/.storybook/main.js
+++ b/apps/vr-tests/.storybook/main.js
@@ -51,4 +51,8 @@ module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig}
       },
     };
   },
+  // 💡 NOTE: this is necessary for StoryWright. without this the current version "0.0.27-storybook7.9" wont take screenshots for Steps
+  features: {
+    storyStoreV7: false,
+  },
 });