diff --git a/apps/vr-tests-react-components/.storybook/preview.js b/apps/vr-tests-react-components/.storybook/preview.js
index 3be23ff332e8f..50e39889ee309 100644
--- a/apps/vr-tests-react-components/.storybook/preview.js
+++ b/apps/vr-tests-react-components/.storybook/preview.js
@@ -67,8 +67,3 @@ setAddon({
 
 /** @type {import("@fluentui/react-storybook-addon").FluentParameters} */
 export const parameters = { layout: 'none', mode: 'vr-test' };
-
-// For static storybook per https://github.com/screener-io/screener-storybook#testing-with-static-storybook-app
-if (typeof window === 'object') {
-  /** @type {*} */ (window).__screener_storybook__ = require('@storybook/react').getStorybook;
-}
diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
index 5b6a97420a87d..31b0333e55e8f 100644
--- a/apps/vr-tests-react-components/package.json
+++ b/apps/vr-tests-react-components/package.json
@@ -5,15 +5,14 @@
   "description": "Visual regression tests for @fluentui/react-components",
   "scripts": {
     "build": "build-storybook -o dist/storybook",
-    "test:component": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true",
     "convert": "bash convertStoriesToStoryWright.sh",
     "clean": "just-scripts clean",
     "format": "prettier . -w --ignore-path ../../.prettierignore",
     "lint": "just-scripts lint",
-    "screener": "just-scripts screener",
     "screener:build": "yarn build",
     "start": "start-storybook",
     "test": "just-scripts test",
+    "test:component": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true",
     "type-check": "tsc"
   },
   "devDependencies": {
@@ -63,7 +62,6 @@
     "@griffel/react": "^1.4.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "screener-storybook": "0.23.0",
     "tslib": "^2.1.0"
   }
 }
diff --git a/apps/vr-tests-react-components/screener.config.js b/apps/vr-tests-react-components/screener.config.js
deleted file mode 100644
index 0e229136d99d1..0000000000000
--- a/apps/vr-tests-react-components/screener.config.js
+++ /dev/null
@@ -1,49 +0,0 @@
-const cp = require('child_process');
-
-function getCurrentHash() {
-  try {
-    const buffer = cp.execSync('git rev-list --parents -n 1 HEAD', {
-      stdio: ['pipe', 'pipe', process.stderr],
-    });
-
-    if (buffer) {
-      // The command returns a list of hashes, the last one is the one we want
-      return buffer.toString().trim().split(' ').pop();
-    }
-  } catch (e) {
-    console.error('Cannot get current git hash');
-    process.exit(1);
-  }
-
-  return '';
-}
-/**
- *
- * @param {Object} options
- * @param {string} options.screenerApiKey
- * @param {string} options.sourceBranchName
- * @param {string} options.deployUrl
- * @param {string} options.targetBranch
- * @returns {import('@fluentui/scripts/screener/screener.types').ScreenerRunnerConfig}
- */
-function getConfig({ screenerApiKey, sourceBranchName, deployUrl, targetBranch }) {
-  const baseBranch = targetBranch ? targetBranch.replace(/^refs\/heads\//, '') : 'master';
-  // https://github.com/screener-io/screener-storybook#additional-configuration-options
-  const config = {
-    projectRepo: 'microsoft/fluentui/react-components',
-    storybookStaticBuildDir: 'dist/storybook',
-    storybookConfigDir: '.storybook',
-    apiKey: screenerApiKey,
-    resolution: '1024x768',
-    baseBranch,
-    failureExitCode: 0,
-    alwaysAcceptBaseBranch: true,
-    states: [],
-    ...(sourceBranchName !== 'master' ? { commit: getCurrentHash() } : null),
-    baseUrl: `${deployUrl}/react-components-screener/iframe.html`,
-  };
-  console.log('Screener config: ' + JSON.stringify({ ...config, apiKey: '...' }, null, 2));
-  return config;
-}
-
-module.exports = getConfig;
diff --git a/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx
index 611d822aa403a..08c1e884d4430 100644
--- a/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
 import { CircleRegular } from '@fluentui/react-icons';
 import { ComponentMeta } from '@storybook/react';
@@ -10,11 +10,11 @@ export default {
 
   decorators: [
     story => (
-      <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+      <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
         <div className="testWrapper" style={{ width: '300px' }}>
           {story()}
         </div>
-      </Screener>
+      </StoryWright>
     ),
   ],
 } as ComponentMeta<typeof Accordion>;
diff --git a/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx
index 81c0afc7df01a..450dcd268df27 100644
--- a/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
 import { ComponentMeta } from '@storybook/react';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
@@ -9,8 +9,8 @@ export default {
 
   decorators: [
     story => (
-      <Screener
-        steps={new Screener.Steps()
+      <StoryWright
+        steps={new Steps()
           .snapshot('normal', { cropTo: '.testWrapper' })
           .focus('#opened-btn')
           .snapshot('focus opened', { cropTo: '.testWrapper' })
@@ -21,7 +21,7 @@ export default {
         <div className="testWrapper" style={{ width: '300px' }}>
           {story()}
         </div>
-      </Screener>
+      </StoryWright>
     ),
   ],
 } as ComponentMeta<typeof Accordion>;
diff --git a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx
index 2b70d2ee57e89..282b0674b386e 100644
--- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { Avatar, AvatarProps } from '@fluentui/react-avatar';
 import { PeopleRegular, PersonCallRegular } from '@fluentui/react-icons';
 
@@ -42,7 +42,7 @@ const nameAndImage = [
 /** Arrays of example values for each Avatar prop */
 const examples = {
   size: [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128],
-  nameAndImage: nameAndImage,
+  nameAndImage,
   name: nameAndImage.map(p => p.name),
   image: nameAndImage.map(p => p.image),
   badge: [
@@ -193,7 +193,7 @@ storiesOf('Avatar Converged', module)
     </div>
   ))
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
   ))
   .addStory(
     'basic',
diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx
index 4ba18d54606c9..6bd674763f1cb 100644
--- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import {
   AvatarGroup,
   AvatarGroupItem,
@@ -74,7 +74,7 @@ const AvatarGroupList: React.FC<
 storiesOf('AvatarGroup Converged', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
   ))
   .addStory('basic', () => <AvatarGroupList />, {
     includeHighContrast: true,
@@ -136,9 +136,9 @@ storiesOf('AvatarGroup Converged', module)
 storiesOf('AvatarGroup Converged', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().click('#show-overflow').snapshot('popoverContentOpen').end()}>
+    <StoryWright steps={new Steps().click('#show-overflow').snapshot('popoverContentOpen').end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'overflowContent',
diff --git a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx
index 88c0021b684d3..53bb727299c9a 100644
--- a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import { ComponentMeta } from '@storybook/react';
-import { getStoryVariant, withScreenerSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
@@ -10,7 +10,7 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 export default {
   title: 'Button Converged',
   Component: Button,
-  decorators: [story => withScreenerSteps({ story, steps })],
+  decorators: [story => withStoryWrightSteps({ story, steps })],
 } as ComponentMeta<typeof Button>;
 
 export const Default = () => <Button id={buttonId}>Hello, world</Button>;
diff --git a/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx
index 4c067d60f8704..01daae64e160a 100644
--- a/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CompoundButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import { ComponentMeta } from '@storybook/react';
-import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities';
+import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
@@ -10,7 +10,7 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 export default {
   title: 'CompoundButton Converged',
   component: CompoundButton,
-  decorators: [story => withScreenerSteps({ story, steps })],
+  decorators: [story => withStoryWrightSteps({ story, steps })],
 } as ComponentMeta<typeof CompoundButton>;
 
 export const Outline = () => (
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 3d73daf5f7d91..cce9b57adaa9c 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
@@ -1,14 +1,14 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps } from 'storywright';
 import { CompoundButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import { ComponentMeta } from '@storybook/react';
-import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities';
+import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
 import { buttonId } from './utils';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
-const steps = new Screener.Steps()
+const steps = new Steps()
   .snapshot('default', { cropTo: '.testWrapper' })
   // https://github.com/microsoft/fluentui/issues/21998
   // .hover('#button-id')
@@ -20,7 +20,7 @@ const steps = new Screener.Steps()
 export default {
   title: 'CompoundButton Converged',
   component: CompoundButton,
-  decorators: [story => withScreenerSteps({ story, steps })],
+  decorators: [story => withStoryWrightSteps({ story, steps })],
 } as ComponentMeta<typeof CompoundButton>;
 
 export const Default = () => (
diff --git a/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx
index 492115ce9318c..811a358b2c386 100644
--- a/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { MenuButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import { ComponentMeta } from '@storybook/react';
-import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities';
+import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
@@ -10,7 +10,7 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 export default {
   title: 'MenuButton Converged',
   component: MenuButton,
-  decorators: [story => withScreenerSteps({ story, steps })],
+  decorators: [story => withStoryWrightSteps({ story, steps })],
 } as ComponentMeta<typeof MenuButton>;
 
 export const Default = () => <MenuButton id={buttonId}>Hello, world</MenuButton>;
diff --git a/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx
index 4e8e4bff57ea6..bbf967d53bb44 100644
--- a/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ToggleButton } from '@fluentui/react-button';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import { ComponentMeta } from '@storybook/react';
-import { getStoryVariant, withScreenerSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 import { buttonId, steps, useStyles } from './utils';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
@@ -10,7 +10,7 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 export default {
   title: 'ToggleButton Converged',
   component: ToggleButton,
-  decorators: [story => withScreenerSteps({ story, steps })],
+  decorators: [story => withStoryWrightSteps({ story, steps })],
 } as ComponentMeta<typeof ToggleButton>;
 
 export const Default = () => <ToggleButton id={buttonId}>Hello, world</ToggleButton>;
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 41cf2954cabb2..651478afafb80 100644
--- a/apps/vr-tests-react-components/src/stories/Button/utils.ts
+++ b/apps/vr-tests-react-components/src/stories/Button/utils.ts
@@ -1,4 +1,4 @@
-import Screener from 'screener-storybook/src/screener';
+import { Steps } from 'storywright';
 import { makeStyles } from '@griffel/react';
 
 export const buttonId = 'button-id';
@@ -9,7 +9,7 @@ export const useStyles = makeStyles({
   },
 });
 
-export const steps = new Screener.Steps()
+export const steps = new Steps()
   .snapshot('default', { cropTo: '.testWrapper' })
   .hover('#button-id')
   .snapshot('hover', { cropTo: '.testWrapper' })
diff --git a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
index 12f1bb416a430..93952e93137c1 100644
--- a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
 import { MoreHorizontal24Filled } from '@fluentui/react-icons';
 import { Body1, Caption1 } from '@fluentui/react-text';
@@ -13,11 +13,11 @@ export default {
 
   decorators: [
     story => (
-      <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+      <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
         <div className="testWrapper" style={{ width: '600px' }}>
           {story()}
         </div>
-      </Screener>
+      </StoryWright>
     ),
   ],
 } as ComponentMeta<typeof Card>;
diff --git a/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx
index 2a4946ff607a4..953270ef12da4 100644
--- a/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { Card } from '@fluentui/react-card';
 import { action } from '@storybook/addon-actions';
 import { SampleCardContent } from './utils';
@@ -11,8 +11,8 @@ export default {
 
   decorators: [
     story => (
-      <Screener
-        steps={new Screener.Steps()
+      <StoryWright
+        steps={new Steps()
           .snapshot('normal', { cropTo: '.testWrapper' })
           .hover('[role="group"]')
           .snapshot('hover', { cropTo: '.testWrapper' })
@@ -23,7 +23,7 @@ export default {
         <div className="testWrapper" style={{ width: '300px' }}>
           {story()}
         </div>
-      </Screener>
+      </StoryWright>
     ),
   ],
 } as ComponentMeta<typeof Card>;
diff --git a/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx
index 8ffcbb067ec18..c05755f3317c9 100644
--- a/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { Card } from '@fluentui/react-card';
 import { SampleCardContent } from './utils';
 import { ComponentMeta } from '@storybook/react';
@@ -10,8 +10,8 @@ export default {
 
   decorators: [
     story => (
-      <Screener
-        steps={new Screener.Steps()
+      <StoryWright
+        steps={new Steps()
           .snapshot('normal', { cropTo: '.testWrapper' })
           .hover('[role="group"]')
           .snapshot('hover', { cropTo: '.testWrapper' })
@@ -24,7 +24,7 @@ export default {
         <div className="testWrapper" style={{ width: '300px' }}>
           {story()}
         </div>
-      </Screener>
+      </StoryWright>
     ),
   ],
 } as ComponentMeta<typeof Card>;
diff --git a/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx b/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx
index ec456a60d55a0..375a23d90e89b 100644
--- a/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
@@ -7,7 +7,7 @@ import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorato
 storiesOf('Checkbox Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('rest', { cropTo: '.testWrapper' })
         .hover('input')
@@ -17,7 +17,7 @@ storiesOf('Checkbox Converged', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('unchecked', () => <Checkbox label="Unchecked" />, { includeRtl: true })
   .addStory('checked', () => <Checkbox checked label="Checked" />)
@@ -27,7 +27,7 @@ storiesOf('Checkbox Converged', module)
 storiesOf('Checkbox Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
   ))
   .addStory('disabled+checked', () => <Checkbox disabled checked label="Disabled checked" />)
   .addStory('disabled+mixed', () => <Checkbox disabled checked="mixed" label="Disabled mixed" />)
diff --git a/apps/vr-tests-react-components/src/stories/Divider.stories.tsx b/apps/vr-tests-react-components/src/stories/Divider.stories.tsx
index 3c07d6fd9b943..28cbc16ac0efb 100644
--- a/apps/vr-tests-react-components/src/stories/Divider.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Divider.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Divider } from '@fluentui/react-divider';
 import { TestWrapperDecorator, TestWrapperDecoratorFixedWidth } from '../utilities/index';
@@ -7,7 +7,7 @@ import { TestWrapperDecorator, TestWrapperDecoratorFixedWidth } from '../utiliti
 storiesOf('Divider Converged - Horizontal', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
   ))
   .addStory('without content', () => <Divider />, { includeRtl: true })
   .addStory('with content', () => <Divider>Today</Divider>, {
@@ -37,7 +37,7 @@ storiesOf('Divider Converged - Vertical', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
     <div style={{ height: '200px' }}>
-      <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
     </div>
   ))
   .addStory('Center Aligned', () => <Divider vertical>Today</Divider>)
diff --git a/apps/vr-tests-react-components/src/stories/Field.stories.tsx b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
index 8f1fae22d29d7..a633595429512 100644
--- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { CheckboxField_unstable as CheckboxField } from '@fluentui/react-checkbox';
 import { ComboboxField_unstable as ComboboxField } from '@fluentui/react-combobox';
@@ -24,11 +24,11 @@ type FieldControlProps = Pick<
  */
 const storiesOfField = (name: string, Field: React.VoidFunctionComponent<FieldControlProps>) =>
   storiesOf(name, module)
-    .addDecorator(story => <Screener steps={new Steps().snapshot('default').end()}>{story()}</Screener>)
+    .addDecorator(story => <StoryWright steps={new Steps().snapshot('default').end()}>{story()}</StoryWright>)
     .addDecorator(story => (
       <div style={{ display: 'flex' }}>
         <div className="testWrapper" style={{ padding: '10px', width: '480px' }}>
-          <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+          <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
         </div>
       </div>
     ))
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 d24288b7aee42..e8f0e9953a255 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
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { Image } from '@fluentui/react-image';
 import { ComponentMeta } from '@storybook/react';
 
@@ -10,7 +10,7 @@ export default {
 
   decorators: [
     (story: () => React.ReactNode) => (
-      <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+      <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
     ),
   ],
 } as ComponentMeta<typeof Image>;
diff --git a/apps/vr-tests-react-components/src/stories/Input.stories.tsx b/apps/vr-tests-react-components/src/stories/Input.stories.tsx
index 8e527d9776296..d3233f1b52820 100644
--- a/apps/vr-tests-react-components/src/stories/Input.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Input.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Input } from '@fluentui/react-input';
 import { SearchRegular, DismissRegular } from '@fluentui/react-icons';
@@ -8,7 +8,7 @@ import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorato
 storiesOf('Input Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('input')
@@ -19,7 +19,7 @@ storiesOf('Input Converged', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Appearance: outline (default)', () => <Input placeholder="Placeholder" />)
   .addStory('Appearance: underline', () => <Input appearance="underline" placeholder="Placeholder" />)
@@ -47,7 +47,7 @@ storiesOf('Input Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   // note: due to reused "Input Converged" story ID, TestWrapperDecoratorFixedWidth is also reused
   .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
   ))
   .addStory('Size: small', () => <Input size="small" placeholder="Placeholder" />)
   .addStory('Size: large', () => <Input size="large" placeholder="Placeholder" />)
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 7129463cf183e..e7be90a5e6ba5 100644
--- a/apps/vr-tests-react-components/src/stories/Label.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Label.stories.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Label } from '@fluentui/react-label';
 
 storiesOf('Label Converged', module)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Root', () => <Label>I'm a label</Label>, {
     includeRtl: true,
diff --git a/apps/vr-tests-react-components/src/stories/Link.stories.tsx b/apps/vr-tests-react-components/src/stories/Link.stories.tsx
index 9627393c11d62..102bc0f6f626d 100644
--- a/apps/vr-tests-react-components/src/stories/Link.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Link.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Link, LinkProps } from '@fluentui/react-link';
 
@@ -8,7 +8,7 @@ const ButtonLink = (props: LinkProps) => <Link {...props} />;
 
 storiesOf('Link Converged - Rendered as anchor', module)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.fui-Link')
@@ -24,7 +24,7 @@ storiesOf('Link Converged - Rendered as anchor', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Stand-alone', () => <AnchorLink>Stand-alone link</AnchorLink>, {
     includeRtl: true,
@@ -62,7 +62,7 @@ storiesOf('Link Converged - Rendered as anchor', module)
 // We put the disabled stories separately so they do not error on the focused step.
 storiesOf('Link Converged - Rendered as anchor', module)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.fui-Link')
@@ -73,7 +73,7 @@ storiesOf('Link Converged - Rendered as anchor', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Stand-alone Disabled', () => <AnchorLink disabled>Stand-alone disabled link</AnchorLink>)
   .addStory('Inline Disabled', () => (
@@ -88,7 +88,7 @@ storiesOf('Link Converged - Rendered as anchor', module)
 
 storiesOf('Link Converged - Rendered as button', module)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.fui-Link')
@@ -104,7 +104,7 @@ storiesOf('Link Converged - Rendered as button', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Stand-alone', () => <ButtonLink>Stand-alone link</ButtonLink>, { includeRtl: true })
   .addStory('Stand-alone Disabled Focusable', () => (
@@ -134,7 +134,7 @@ storiesOf('Link Converged - Rendered as button', module)
 // We put the disabled stories separately so they do not error on the focused step.
 storiesOf('Link Converged - Rendered as button', module)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.fui-Link')
@@ -145,7 +145,7 @@ storiesOf('Link Converged - Rendered as button', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Stand-alone Disabled', () => <ButtonLink disabled>Stand-alone disabled link</ButtonLink>)
   .addStory('Inline Disabled', () => (
diff --git a/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx b/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx
index 04f5d24878ccf..ccbd6d5f9cd57 100644
--- a/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx
@@ -3,7 +3,7 @@ import { FluentProvider } from '@fluentui/react-provider';
 import { tokens, webLightTheme } from '@fluentui/react-theme';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 
 const useStyles = makeStyles({
   box: {
@@ -155,11 +155,11 @@ export const Propagation = () => (
 
 storiesOf('MakeStyles', module)
   .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
       <div className="testWrapper" style={{ width: '300px' }}>
         {story()}
       </div>
-    </Screener>
+    </StoryWright>
   ))
   .addStory('RTL: two components in a single Provider', () => (
     <FluentProvider dir="rtl" theme={webLightTheme}>
@@ -194,7 +194,7 @@ storiesOf('MakeStyles', module)
 
 storiesOf('MakeStyles (pseudo)', module)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('normal', { cropTo: '.testWrapper' })
         .focus('#boxA')
@@ -209,6 +209,6 @@ storiesOf('MakeStyles (pseudo)', module)
       <div className="testWrapper" style={{ width: '300px' }}>
         {story()}
       </div>
-    </Screener>
+    </StoryWright>
   ))
   .addStory('insertion is ordered', () => <BoxWithPseudo />);
diff --git a/apps/vr-tests-react-components/src/stories/Menu.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu.stories.tsx
index 3042f445b1620..9c16136f367aa 100644
--- a/apps/vr-tests-react-components/src/stories/Menu.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Menu.stories.tsx
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import {
   Menu,
   MenuTrigger,
@@ -18,9 +18,7 @@ import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react-
 
 storiesOf('Menu Converged - basic', module)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end()}>
-      {story()}
-    </Screener>
+    <StoryWright steps={new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end()}>{story()}</StoryWright>
   ))
   .addStory(
     'default',
@@ -44,9 +42,7 @@ storiesOf('Menu Converged - basic', module)
 
 storiesOf('Menu Converged - secondary content', module)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end()}>
-      {story()}
-    </Screener>
+    <StoryWright steps={new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end()}>{story()}</StoryWright>
   ))
   .addStory(
     'default',
@@ -73,7 +69,7 @@ storiesOf('Menu Converged - secondary content', module)
   );
 
 storiesOf('Menu Converged - groups', module)
-  .addDecorator(story => <Screener>{story()}</Screener>)
+  .addDecorator(story => <StoryWright>{story()}</StoryWright>)
   .addStory(
     'default',
     () => (
@@ -106,9 +102,9 @@ storiesOf('Menu Converged - groups', module)
 
 storiesOf('Menu Converged - selection', module)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().click('[role="menuitemcheckbox"]').snapshot('selected').end()}>
+    <StoryWright steps={new Steps().click('[role="menuitemcheckbox"]').snapshot('selected').end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'checkbox',
@@ -138,9 +134,9 @@ storiesOf('Menu Converged - selection', module)
 
 storiesOf('Menu Converged - selection groups', module)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().click('[role="menuitemcheckbox"]').snapshot('selected').end()}>
+    <StoryWright steps={new Steps().click('[role="menuitemcheckbox"]').snapshot('selected').end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'default',
@@ -187,7 +183,7 @@ storiesOf('Menu Converged - selection groups', module)
 storiesOf('Menu Converged - nested submenus', module)
   .addDecorator(story => (
     // https://github.com/microsoft/fluentui/issues/19782
-    <Screener steps={new Screener.Steps().click('#nestedTrigger').snapshot('all open').end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().click('#nestedTrigger').snapshot('all open').end()}>{story()}</StoryWright>
   ))
   .addStory(
     'default',
@@ -225,7 +221,7 @@ storiesOf('Menu Converged - nested submenus', module)
 storiesOf('Menu Converged - split item', module)
   .addDecorator(story => (
     // https://github.com/microsoft/fluentui/issues/19782
-    <Screener steps={new Screener.Steps().click('#nestedTrigger').snapshot('submenu open').end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().click('#nestedTrigger').snapshot('submenu open').end()}>{story()}</StoryWright>
   ))
   .addStory(
     'default',
@@ -311,7 +307,7 @@ const ContextMenuArea = React.forwardRef<HTMLDivElement>((props, ref) => {
 storiesOf('Menu nested within a MenuTrigger', module)
   .addDecorator(story => (
     // https://github.com/microsoft/fluentui/issues/19782
-    <Screener steps={new Screener.Steps().click('#nestedTrigger').snapshot('submenu open').end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().click('#nestedTrigger').snapshot('submenu open').end()}>{story()}</StoryWright>
   ))
   .addStory('default', () => (
     <Menu openOnContext>
@@ -333,9 +329,7 @@ storiesOf('Menu nested within a MenuTrigger', module)
 // this places text in the icon slot to verify alignment when not using v9 icons
 storiesOf('Menu Converged - icon slotted content', module)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end()}>
-      {story()}
-    </Screener>
+    <StoryWright steps={new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end()}>{story()}</StoryWright>
   ))
   .addStory(
     'default',
@@ -366,11 +360,9 @@ storiesOf('Menu Converged - icon slotted content', module)
 // this places text in the submenuIndicator slot to verify alignment when not using v9 icons
 storiesOf('Menu Converged - submenuIndicator slotted content', module)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps().click('#nestedTrigger1').click('#nestedTrigger2').snapshot('submenus open').end()}
-    >
+    <StoryWright steps={new Steps().click('#nestedTrigger1').click('#nestedTrigger2').snapshot('submenus open').end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'default',
diff --git a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx
index 444c7289de3fa..a74b9f7f32335 100644
--- a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Persona } from '@fluentui/react-persona';
 import type { PersonaProps } from '@fluentui/react-persona';
@@ -15,7 +15,7 @@ storiesOf('Persona Converged', module)
     </div>
   ))
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
   ))
   .addStory(
     'basic',
diff --git a/apps/vr-tests-react-components/src/stories/Popover.stories.tsx b/apps/vr-tests-react-components/src/stories/Popover.stories.tsx
index 3b3c92092a1b0..509369124bc27 100644
--- a/apps/vr-tests-react-components/src/stories/Popover.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Popover.stories.tsx
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-popover';
 import { tokens } from '@fluentui/react-theme';
 import { TestWrapperDecorator } from '../utilities/index';
@@ -50,23 +50,20 @@ const PopoverPositioning: React.FC = () => {
 storiesOf('Popover Converged', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
-        .click('#show-popovers')
-        .snapshot('positioned popovers', { cropTo: '.testWrapper' })
-        .end()}
+    <StoryWright
+      steps={new Steps().click('#show-popovers').snapshot('positioned popovers', { cropTo: '.testWrapper' }).end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('positioning', () => <PopoverPositioning />, { includeRtl: true, includeHighContrast: true });
 
 storiesOf('Popover Converged', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().click('#show-popover').snapshot('PopoverSurface focused').end()}>
+    <StoryWright steps={new Steps().click('#show-popover').snapshot('PopoverSurface focused').end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('avoid scrolling', () => {
     return (
diff --git a/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx b/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx
index e51b2472645a4..e9e887072f77f 100644
--- a/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Positioning.stories.tsx
@@ -11,7 +11,7 @@ import { useMergedRefs } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { storiesOf } from '@storybook/react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 
 const useStyles = makeStyles({
   wrapper: {
@@ -591,8 +591,8 @@ storiesOf('Positioning', module)
   .addStory('target property', () => <TargetProp />)
   .addStory('imperative target', () => <ImperativeTarget />)
   .addStory('visibility modifiers', () => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('has "[data-popper-is-intersecting]" when the popover intersects boundaries')
         .executeScript('document.querySelector("#scrollable-area").scrollTop = 80')
         .snapshot(`has "[data-popper-escaped]" when the popper escapes the reference element's boundary`)
@@ -601,6 +601,6 @@ storiesOf('Positioning', module)
         .end()}
     >
       <VisibilityModifiers />
-    </Screener>
+    </StoryWright>
   ))
   .addStory('arrow', () => <Arrow />, { includeRtl: true });
diff --git a/apps/vr-tests-react-components/src/stories/Radio.stories.tsx b/apps/vr-tests-react-components/src/stories/Radio.stories.tsx
index c64c4054c4444..c2f2066840eda 100644
--- a/apps/vr-tests-react-components/src/stories/Radio.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Radio.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Radio, RadioGroup } from '@fluentui/react-radio';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
@@ -7,7 +7,7 @@ import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorato
 storiesOf('Radio Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('rest', { cropTo: '.testWrapper' })
         .hover('input')
@@ -17,7 +17,7 @@ storiesOf('Radio Converged', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('unchecked', () => <Radio label="Unchecked" />, {
     includeDarkMode: true,
@@ -35,7 +35,7 @@ storiesOf('Radio Converged', module)
 storiesOf('Radio Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
   ))
   .addStory('disabled+checked', () => <Radio disabled checked label="Disabled checked" />, {
     includeDarkMode: true,
diff --git a/apps/vr-tests-react-components/src/stories/Select.stories.tsx b/apps/vr-tests-react-components/src/stories/Select.stories.tsx
index 59b41cebe3cc7..cdb5e7266b3b2 100644
--- a/apps/vr-tests-react-components/src/stories/Select.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Select.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Select } from '@fluentui/react-select';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
@@ -7,7 +7,7 @@ import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorato
 storiesOf('Select Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('select')
@@ -18,7 +18,7 @@ storiesOf('Select Converged', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Appearance: outline (default)', () => (
     <Select>
@@ -74,7 +74,7 @@ storiesOf('Select Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   // note: due to reused "Select Converged" story ID, TestWrapperDecoratorFixedWidth is also reused
   .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
   ))
   .addStory('With value', () => (
     <Select>
diff --git a/apps/vr-tests-react-components/src/stories/Slider.stories.tsx b/apps/vr-tests-react-components/src/stories/Slider.stories.tsx
index 402482e1bdfd1..4504d844b9a6b 100644
--- a/apps/vr-tests-react-components/src/stories/Slider.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Slider.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Slider } from '@fluentui/react-slider';
 import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
@@ -7,7 +7,7 @@ import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
 storiesOf('Slider Converged', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.test-class')
@@ -18,7 +18,7 @@ storiesOf('Slider Converged', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <Slider className="test-class" defaultValue={30} />, {
     includeRtl: true,
@@ -37,7 +37,7 @@ storiesOf('Slider Converged', module)
 storiesOf('Slider Converged', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
   ))
   .addStory('Horizontal - 0%', () => <Slider defaultValue={0} />, { includeRtl: true })
   .addStory('Horizontal - 100%', () => <Slider defaultValue={100} />, { includeRtl: true })
diff --git a/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx b/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx
index f196bb27f94ab..554e9b3dab3c6 100644
--- a/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { SpinButton, spinButtonClassNames } from '@fluentui/react-spinbutton';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
@@ -9,7 +9,7 @@ const cropTo = '.testWrapper';
 storiesOf('SpinButton Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('rest', { cropTo })
         .hover('input')
@@ -37,7 +37,7 @@ storiesOf('SpinButton Converged', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Appearance: outline (default)', () => <SpinButton value={10} />, {
     includeRtl: true,
@@ -88,7 +88,7 @@ storiesOf('SpinButton Converged', module)
 storiesOf('SpinButton Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('rest', { cropTo })
         .hover('input')
@@ -116,7 +116,7 @@ storiesOf('SpinButton Converged', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('At Max Bound', () => <SpinButton value={10} max={10} />, {
     includeRtl: true,
@@ -128,7 +128,7 @@ storiesOf('SpinButton Converged', module)
 storiesOf('SpinButton Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('rest', { cropTo })
         .hover('input')
@@ -156,7 +156,7 @@ storiesOf('SpinButton Converged', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('At Min Bound', () => <SpinButton value={10} min={10} />, {
     includeRtl: true,
@@ -166,7 +166,7 @@ storiesOf('SpinButton Converged', module)
 
 storiesOf('SpinButton Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => <Screener steps={new Steps().snapshot('default', { cropTo }).end()}>{story()}</Screener>)
+  .addDecorator(story => <StoryWright steps={new Steps().snapshot('default', { cropTo }).end()}>{story()}</StoryWright>)
   .addStory('Size: small', () => <SpinButton size="small" value={10} />, {
     includeRtl: true,
     includeHighContrast: true,
diff --git a/apps/vr-tests-react-components/src/stories/Switch.stories.tsx b/apps/vr-tests-react-components/src/stories/Switch.stories.tsx
index 2e2226dbe6e02..1fea769cea587 100644
--- a/apps/vr-tests-react-components/src/stories/Switch.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Switch.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Switch } from '@fluentui/react-switch';
 import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
@@ -7,7 +7,7 @@ import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
 storiesOf('Switch Converged', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.test-class')
@@ -18,7 +18,7 @@ storiesOf('Switch Converged', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Enabled and unchecked',
diff --git a/apps/vr-tests-react-components/src/stories/Table.stories.tsx b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
index 28568e335128f..27f9a826608e1 100644
--- a/apps/vr-tests-react-components/src/stories/Table.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Table.stories.tsx
@@ -26,7 +26,7 @@ import {
 } from '@fluentui/react-table';
 import { Button } from '@fluentui/react-button';
 import { storiesOf } from '@storybook/react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 
 const items = [
   {
@@ -595,7 +595,7 @@ const SubtleSelection: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
   const layoutName = noNativeElements ? 'flex' : 'table';
   storiesOf(`Table layout ${layoutName} - cell actions`, module)
     .addDecorator(story => (
-      <Screener steps={new Screener.Steps().hover('.row-1').snapshot('hover row').end()}>{story()}</Screener>
+      <StoryWright steps={new Steps().hover('.row-1').snapshot('hover row').end()}>{story()}</StoryWright>
     ))
     .addStory('default', () => <CellActionsDefault noNativeElements={noNativeElements} />, {
       includeDarkMode: true,
@@ -690,15 +690,15 @@ const SubtleSelection: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
 
   storiesOf(`Table ${layoutName} - subtle selection`, module)
     .addDecorator(story => (
-      <Screener steps={new Screener.Steps().hover('.not-selected').snapshot('hover unselected row').end()}>
+      <StoryWright steps={new Steps().hover('.not-selected').snapshot('hover unselected row').end()}>
         {story()}
-      </Screener>
+      </StoryWright>
     ))
     .addStory('rest', () => <SubtleSelection noNativeElements={noNativeElements} />);
   storiesOf(`Table layout ${layoutName} - headers`, module)
     .addDecorator(story => (
-      <Screener
-        steps={new Screener.Steps()
+      <StoryWright
+        steps={new Steps()
           .hover('.columnheader')
           .snapshot('hover header')
           .mouseDown('.columnheader')
@@ -706,7 +706,7 @@ const SubtleSelection: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
           .end()}
       >
         {story()}
-      </Screener>
+      </StoryWright>
     ))
     .addStory('sortable', () => <SortableHeaders noNativeElements={noNativeElements} />, {
       includeDarkMode: true,
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 0904453a7d4da..19f5f9ff46d8b 100644
--- a/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx
@@ -1,12 +1,12 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { TabList, Tab } from '@fluentui/react-tabs';
 
 storiesOf('TabList and Tab Converged', module)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.mouse-target')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -16,7 +16,7 @@ storiesOf('TabList and Tab Converged', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Default',
diff --git a/apps/vr-tests-react-components/src/stories/Text.stories.tsx b/apps/vr-tests-react-components/src/stories/Text.stories.tsx
index 52edf3df66c81..71ac3ff142b14 100644
--- a/apps/vr-tests-react-components/src/stories/Text.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Text.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import {
   Body1,
   Caption1,
@@ -17,11 +17,11 @@ import {
 
 storiesOf('Text Converged', module)
   .addDecorator((story: () => React.ReactNode) => (
-    <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
       <div className="testWrapper" style={{ width: '250px' }}>
         {story()}
       </div>
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Default',
diff --git a/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx b/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx
index b27d34bd92561..d5dbef6f5cdae 100644
--- a/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Textarea } from '@fluentui/react-textarea';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
@@ -7,7 +7,7 @@ import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorato
 storiesOf('Textarea Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('textarea')
@@ -18,7 +18,7 @@ storiesOf('Textarea Converged', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Appearance: outline (default)', () => <Textarea placeholder="Placeholder" />)
   .addStory('Appearance: filled-darker', () => <Textarea appearance="filled-darker" placeholder="Placeholder" />)
@@ -43,7 +43,7 @@ storiesOf('Textarea Converged', module)
 storiesOf('Textarea Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
   ))
   .addStory('Size: small', () => <Textarea size="small" placeholder="Placeholder" />)
   .addStory('Size: medium', () => <Textarea size="medium" placeholder="Placeholder" />)
diff --git a/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx b/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx
index d021caf77f938..f9d5044a62872 100644
--- a/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright } from 'storywright';
 import { makeStyles } from '@griffel/react';
 import {
   Toolbar,
@@ -26,11 +26,11 @@ export default {
   Component: Toolbar,
   decorators: [
     story => (
-      <Screener steps={steps}>
+      <StoryWright steps={steps}>
         <div className="testWrapper" style={{ width: '600px' }}>
           {story()}
         </div>
-      </Screener>
+      </StoryWright>
     ),
   ],
 } as ComponentMeta<typeof Toolbar>;
diff --git a/apps/vr-tests-react-components/src/stories/Toolbar/utils.ts b/apps/vr-tests-react-components/src/stories/Toolbar/utils.ts
index 0c414c832484d..6418c66ed20b2 100644
--- a/apps/vr-tests-react-components/src/stories/Toolbar/utils.ts
+++ b/apps/vr-tests-react-components/src/stories/Toolbar/utils.ts
@@ -1,6 +1,6 @@
-import Screener from 'screener-storybook/src/screener';
+import { Steps } from 'storywright';
 
-export const steps = new Screener.Steps()
+export const steps = new Steps()
   .snapshot('default', { cropTo: '.testWrapper' })
   .click('#snooze-toggle')
   .snapshot('Toggle On', { cropTo: '.testWrapper' })
diff --git a/apps/vr-tests-react-components/src/stories/Tooltip.stories.tsx b/apps/vr-tests-react-components/src/stories/Tooltip.stories.tsx
index a23266f49cfba..87d905bc570fa 100644
--- a/apps/vr-tests-react-components/src/stories/Tooltip.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tooltip.stories.tsx
@@ -4,7 +4,7 @@ import { Tooltip } from '@fluentui/react-tooltip';
 import { TestWrapperDecorator } from '../utilities/index';
 import { makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 
 const useStyles = makeStyles({
   wrapper: {
@@ -125,13 +125,10 @@ const TooltipPositioning: React.FC = () => {
 storiesOf('Tooltip Converged', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
-        .click('#show-tooltips')
-        .snapshot('positioned tooltips', { cropTo: '.testWrapper' })
-        .end()}
+    <StoryWright
+      steps={new Steps().click('#show-tooltips').snapshot('positioned tooltips', { cropTo: '.testWrapper' }).end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('positioning', () => <TooltipPositioning />, { includeRtl: true, includeHighContrast: true });
diff --git a/apps/vr-tests-react-components/src/utilities/index.ts b/apps/vr-tests-react-components/src/utilities/index.ts
index 9b57e0061e559..fb576191fc42a 100644
--- a/apps/vr-tests-react-components/src/utilities/index.ts
+++ b/apps/vr-tests-react-components/src/utilities/index.ts
@@ -9,4 +9,4 @@ declare module '@storybook/addons' {
 
 export * from './TestWrapperDecorator';
 export * from './getStoryVariant';
-export * from './withScreenerSteps';
+export * from './withStoryWrightSteps';
diff --git a/apps/vr-tests-react-components/src/utilities/withScreenerSteps.tsx b/apps/vr-tests-react-components/src/utilities/withStoryWrightSteps.tsx
similarity index 54%
rename from apps/vr-tests-react-components/src/utilities/withScreenerSteps.tsx
rename to apps/vr-tests-react-components/src/utilities/withStoryWrightSteps.tsx
index f38886fbe9562..816b53ec340d4 100644
--- a/apps/vr-tests-react-components/src/utilities/withScreenerSteps.tsx
+++ b/apps/vr-tests-react-components/src/utilities/withStoryWrightSteps.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import Screener, { Step } from 'screener-storybook/src/screener';
+import { StoryWright, Step } from 'storywright';
 import { StoryContext } from './types';
 
-export const withScreenerSteps = ({
+export const withStoryWrightSteps = ({
   story,
   context,
   steps,
@@ -11,5 +11,5 @@ export const withScreenerSteps = ({
   steps: Step[];
   context?: StoryContext;
 }) => {
-  return <Screener steps={steps}> {story()} </Screener>;
+  return <StoryWright steps={steps}> {story()} </StoryWright>;
 };
diff --git a/apps/vr-tests-react-components/tsconfig.json b/apps/vr-tests-react-components/tsconfig.json
index 83dc833d506fd..185e00133473c 100644
--- a/apps/vr-tests-react-components/tsconfig.json
+++ b/apps/vr-tests-react-components/tsconfig.json
@@ -12,7 +12,7 @@
     "experimentalDecorators": true,
     "noUnusedLocals": true,
     "preserveConstEnums": true,
-    "types": ["screener-storybook", "node", "jest"]
+    "types": ["node", "jest"]
   },
-  "include": ["./src", "./.storybook/*", "screener.config.js"]
+  "include": ["./src", "./.storybook/*"]
 }