From b73c2b7343bfd22ecd90c557f13ae9e9b10e4707 Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Sat, 10 Dec 2022 17:36:43 -0500
Subject: [PATCH 1/6] chore: remove screener deps and screener config file

---
 apps/vr-tests/package.json       |  2 --
 apps/vr-tests/screener.config.js | 53 --------------------------------
 2 files changed, 55 deletions(-)
 delete mode 100644 apps/vr-tests/screener.config.js

diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
index 3c39f6e62196f..234afc3bf5f7d 100644
--- a/apps/vr-tests/package.json
+++ b/apps/vr-tests/package.json
@@ -12,7 +12,6 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "screener:build": "cross-env NODE_OPTIONS=--max-old-space-size=3072 just-scripts storybook:build",
-    "screener": "just-scripts screener",
     "start": "just-scripts dev:storybook",
     "type-check": "tsc"
   },
@@ -31,7 +30,6 @@
     "@fluentui/storybook": "^1.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "screener-storybook": "0.23.0",
     "tslib": "^2.1.0"
   }
 }
diff --git a/apps/vr-tests/screener.config.js b/apps/vr-tests/screener.config.js
deleted file mode 100644
index 13f073e99c97d..0000000000000
--- a/apps/vr-tests/screener.config.js
+++ /dev/null
@@ -1,53 +0,0 @@
-// @ts-check
-
-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',
-    storybookStaticBuildDir: 'dist/storybook',
-    storybookConfigDir: '.storybook',
-    apiKey: screenerApiKey,
-    resolution: '1024x768',
-    baseBranch,
-    failureExitCode: 0,
-    alwaysAcceptBaseBranch: true,
-    ...(sourceBranchName !== 'master' ? { commit: getCurrentHash() } : null),
-    baseUrl: `${deployUrl}/react-screener/iframe.html`,
-    states: [],
-  };
-  console.log('Screener config: ' + JSON.stringify({ ...config, apiKey: '...' }, null, 2));
-  return config;
-}
-
-module.exports = getConfig;

From 41215e8061ac1df33c339a2ccb9602935d0ec0f7 Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Sat, 10 Dec 2022 17:37:43 -0500
Subject: [PATCH 2/6] chore: replace Screener tags with StoryWright

---
 .../src/stories/ActivityItem.stories.tsx      |  6 ++--
 .../src/stories/Breadcrumb.stories.tsx        | 14 ++++-----
 apps/vr-tests/src/stories/Button.stories.tsx  | 30 +++++++++----------
 .../vr-tests/src/stories/Calendar.stories.tsx | 10 +++----
 .../vr-tests/src/stories/Checkbox.stories.tsx | 14 ++++-----
 .../src/stories/ChoiceGroup.stories.tsx       |  8 ++---
 .../src/stories/Coachmark.stories.tsx         |  8 ++---
 .../src/stories/ColorPicker.stories.tsx       |  8 ++---
 .../vr-tests/src/stories/ComboBox.stories.tsx | 10 +++----
 .../src/stories/CommandBar.stories.tsx        |  8 ++---
 .../src/stories/ContextualMenu.stories.tsx    | 14 ++++-----
 .../src/stories/DatePicker.stories.tsx        | 20 ++++++-------
 .../src/stories/DetailsHeader.stories.tsx     |  8 ++---
 .../src/stories/DetailsList.stories.tsx       |  8 ++---
 apps/vr-tests/src/stories/Dialog.stories.tsx  |  8 ++---
 .../src/stories/DocumentCard.stories.tsx      | 14 ++++-----
 .../vr-tests/src/stories/Dropdown.stories.tsx | 14 ++++-----
 .../vr-tests/src/stories/Facepile.stories.tsx |  8 ++---
 .../src/stories/FocusTrapZone.stories.tsx     |  8 ++---
 .../src/stories/FolderCover.stories.tsx       |  8 ++---
 apps/vr-tests/src/stories/Fonts.stories.tsx   |  8 ++---
 .../src/stories/GroupedList.stories.tsx       |  8 ++---
 .../src/stories/HoverCard.stories.tsx         |  8 ++---
 apps/vr-tests/src/stories/Icon.stories.tsx    |  8 ++---
 apps/vr-tests/src/stories/Image.stories.tsx   |  8 ++---
 apps/vr-tests/src/stories/Keytip.stories.tsx  |  8 ++---
 apps/vr-tests/src/stories/Label.stories.tsx   |  8 ++---
 apps/vr-tests/src/stories/Layer.stories.tsx   |  8 ++---
 apps/vr-tests/src/stories/Link.stories.tsx    |  6 ++--
 apps/vr-tests/src/stories/List.stories.tsx    |  8 ++---
 .../src/stories/MessageBar.stories.tsx        |  8 ++---
 apps/vr-tests/src/stories/Modal.stories.tsx   |  8 ++---
 apps/vr-tests/src/stories/Nav.stories.tsx     | 10 +++----
 .../src/stories/OverflowSet.stories.tsx       | 14 ++++-----
 apps/vr-tests/src/stories/Overlay.stories.tsx |  8 ++---
 apps/vr-tests/src/stories/Panel.stories.tsx   | 18 +++++------
 .../src/stories/PeoplePicker.stories.tsx      | 14 ++++-----
 apps/vr-tests/src/stories/Persona.stories.tsx |  8 ++---
 apps/vr-tests/src/stories/Pivot.stories.tsx   | 14 ++++-----
 .../src/stories/ProgressIndicator.stories.tsx |  8 ++---
 apps/vr-tests/src/stories/Rating.stories.tsx  |  8 ++---
 .../src/stories/ResizeGroup.stories.tsx       |  8 ++---
 .../ScrollablePane.DetailsList.stories.tsx    |  8 ++---
 ...ollablePane.GroupedDetailsList.stories.tsx |  8 ++---
 .../src/stories/ScrollablePane.stories.tsx    |  8 ++---
 .../src/stories/SearchBox.stories.tsx         |  8 ++---
 .../src/stories/Separator.stories.tsx         |  6 ++--
 apps/vr-tests/src/stories/Shimmer.stories.tsx |  8 ++---
 apps/vr-tests/src/stories/Signals.stories.tsx |  6 ++--
 apps/vr-tests/src/stories/Slider.stories.tsx  |  8 ++---
 .../src/stories/SpinButton.stories.tsx        | 16 +++++-----
 apps/vr-tests/src/stories/Spinner.stories.tsx |  6 ++--
 apps/vr-tests/src/stories/Stack.stories.tsx   |  8 ++---
 .../src/stories/Sticky.Breadcrumb.stories.tsx |  8 ++---
 .../src/stories/Suggestions.stories.tsx       |  8 ++---
 .../src/stories/SwatchColorPicker.stories.tsx |  8 ++---
 .../src/stories/TagPicker.stories.tsx         | 18 +++++------
 .../src/stories/TeachingBubble.stories.tsx    |  8 ++---
 apps/vr-tests/src/stories/Text.stories.tsx    |  6 ++--
 .../src/stories/TextField.stories.tsx         |  8 ++---
 .../src/stories/ThemeProvider.stories.tsx     | 16 +++++-----
 apps/vr-tests/src/stories/Tile.stories.tsx    | 14 ++++-----
 apps/vr-tests/src/stories/Toggle.stories.tsx  |  6 ++--
 apps/vr-tests/src/stories/Tooltip.stories.tsx | 14 ++++-----
 .../src/stories/z_Callout.stories.tsx         |  8 ++---
 65 files changed, 317 insertions(+), 325 deletions(-)

diff --git a/apps/vr-tests/src/stories/ActivityItem.stories.tsx b/apps/vr-tests/src/stories/ActivityItem.stories.tsx
index 8c89278c2a77b..8c89dd275857c 100644
--- a/apps/vr-tests/src/stories/ActivityItem.stories.tsx
+++ b/apps/vr-tests/src/stories/ActivityItem.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { ActivityItem, Icon } from '@fluentui/react';
@@ -8,13 +8,13 @@ storiesOf('ActivityItem', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/Breadcrumb.stories.tsx b/apps/vr-tests/src/stories/Breadcrumb.stories.tsx
index 9dc9afd86bbe5..890c42f61df28 100644
--- a/apps/vr-tests/src/stories/Breadcrumb.stories.tsx
+++ b/apps/vr-tests/src/stories/Breadcrumb.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorTall } from '../utilities/index';
 import { Breadcrumb } from '@fluentui/react';
@@ -9,8 +9,8 @@ const noOp = () => undefined;
 storiesOf('Breadcrumb', module)
   .addDecorator(TestWrapperDecoratorTall)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
           "document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
@@ -35,7 +35,7 @@ storiesOf('Breadcrumb', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
@@ -76,8 +76,8 @@ storiesOf('Breadcrumb', module)
 storiesOf('Breadcrumb', module)
   .addDecorator(TestWrapperDecoratorTall)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .hover('.ms-Breadcrumb-list li:nth-child(2)')
         .snapshot('actionable hover', { cropTo: '.testWrapper' })
         .hover('.ms-Breadcrumb-list li:nth-child(3)')
@@ -92,7 +92,7 @@ storiesOf('Breadcrumb', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Hovering items', () => (
     <Breadcrumb
diff --git a/apps/vr-tests/src/stories/Button.stories.tsx b/apps/vr-tests/src/stories/Button.stories.tsx
index 89d554c9d0e82..1e8a8c9c0bb75 100644
--- a/apps/vr-tests/src/stories/Button.stories.tsx
+++ b/apps/vr-tests/src/stories/Button.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator, TestWrapperDecoratorTall } from '../utilities/index';
 import {
@@ -47,7 +47,7 @@ const commandProps: IButtonProps = {
 storiesOf('Button (compat)', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Button')
@@ -57,7 +57,7 @@ storiesOf('Button (compat)', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <DefaultButton {...baseProps} />, { includeRtl: true })
   .addStory('Disabled', () => <DefaultButton {...baseProps} disabled={true} />)
@@ -78,7 +78,7 @@ storiesOf('Button (compat)', module)
 storiesOf('Button Action (compat)', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Button')
@@ -88,7 +88,7 @@ storiesOf('Button Action (compat)', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <ActionButton {...baseProps} />, { includeRtl: true })
   .addStory('Disabled', () => <ActionButton {...baseProps} disabled={true} />)
@@ -99,7 +99,7 @@ storiesOf('Button Action (compat)', module)
 storiesOf('Button Compound (compat)', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Button')
@@ -109,7 +109,7 @@ storiesOf('Button Compound (compat)', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <CompoundButton {...baseProps} />, { includeRtl: true })
   .addStory('Disabled', () => <CompoundButton {...baseProps} disabled={true} />)
@@ -129,7 +129,7 @@ storiesOf('Button Command (compat)', module)
   ))
   .addDecorator(TestWrapperDecoratorTall)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Button')
@@ -142,7 +142,7 @@ storiesOf('Button Command (compat)', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <CommandBarButton {...commandProps} />, { includeRtl: true })
   .addStory('Disabled', () => <CommandBarButton {...commandProps} disabled={true} />)
@@ -151,7 +151,7 @@ storiesOf('Button Command (compat)', module)
 storiesOf('Button Split (compat)', module)
   .addDecorator(TestWrapperDecoratorTall)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Button:nth-child(1)')
@@ -170,7 +170,7 @@ storiesOf('Button Split (compat)', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <DefaultButton {...commandProps} split={true} />, { includeRtl: true })
   .addStory('Disabled', () => <DefaultButton {...commandProps} disabled={true} split={true} />)
@@ -193,9 +193,9 @@ storiesOf('Button Split (compat)', module)
 storiesOf('Button Special Scenarios (compat)', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
 
   .addStory('primary with placeholder', () => (
@@ -226,7 +226,7 @@ storiesOf('Button Special Scenarios (compat)', module)
 storiesOf('IconButton Scenarios (compat)', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('icon', { cropTo: '.testWrapper' })
         .hover('.ms-Button')
@@ -234,7 +234,7 @@ storiesOf('IconButton Scenarios (compat)', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
 
   .addStory('normal icon button', () => (
diff --git a/apps/vr-tests/src/stories/Calendar.stories.tsx b/apps/vr-tests/src/stories/Calendar.stories.tsx
index 1dba4835817b0..cde46ab30059d 100644
--- a/apps/vr-tests/src/stories/Calendar.stories.tsx
+++ b/apps/vr-tests/src/stories/Calendar.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/index';
 import { Fabric, Calendar, DateRangeType, DayOfWeek } from '@fluentui/react';
@@ -8,9 +8,9 @@ const date = new Date(2010, 1, 12);
 storiesOf('Calendar', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
@@ -25,9 +25,9 @@ storiesOf('Calendar', module)
 storiesOf('Calendar - No Month Option', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Show Month as Overlay and no Go To Today', () => (
     <Fabric>
diff --git a/apps/vr-tests/src/stories/Checkbox.stories.tsx b/apps/vr-tests/src/stories/Checkbox.stories.tsx
index 4d0898e57d6a0..3bb4892eba4bb 100644
--- a/apps/vr-tests/src/stories/Checkbox.stories.tsx
+++ b/apps/vr-tests/src/stories/Checkbox.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Checkbox, Persona, PersonaSize } from '@fluentui/react';
@@ -8,13 +8,13 @@ storiesOf('Checkbox', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Unchecked', () => <Checkbox label="Unchecked checkbox" />, { includeRtl: true })
   .addStory('Checked', () => <Checkbox label="Checked checkbox" checked />)
@@ -55,8 +55,8 @@ storiesOf('Checkbox Indeterminate', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Checkbox')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -65,7 +65,7 @@ storiesOf('Checkbox Indeterminate', module)
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Uncontrolled Indeterminate checkbox', () => (
     <Checkbox label="Uncontrolled Indeterminate checkbox" defaultIndeterminate />
diff --git a/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx b/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx
index 1955149aad64d..018400d082f03 100644
--- a/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx
+++ b/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react';
@@ -14,8 +14,8 @@ const options: IChoiceGroupOption[] = [
 storiesOf('ChoiceGroup', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('div.ms-ChoiceField:nth-of-type(1)')
         .snapshot('hover unselected', { cropTo: '.testWrapper' })
@@ -27,7 +27,7 @@ storiesOf('ChoiceGroup', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () =>
     // prettier-ignore
diff --git a/apps/vr-tests/src/stories/Coachmark.stories.tsx b/apps/vr-tests/src/stories/Coachmark.stories.tsx
index 54ce4a981bb44..0b607e91f26fb 100644
--- a/apps/vr-tests/src/stories/Coachmark.stories.tsx
+++ b/apps/vr-tests/src/stories/Coachmark.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Coachmark, DirectionalHint, TeachingBubbleContent, Fabric } from '@fluentui/react';
@@ -50,13 +50,13 @@ storiesOf('Coachmark', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.ms-PositioningContainer' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Collapsed', () => (
     <Fabric>
diff --git a/apps/vr-tests/src/stories/ColorPicker.stories.tsx b/apps/vr-tests/src/stories/ColorPicker.stories.tsx
index 9a3a8a7a18c1f..505c25900ca16 100644
--- a/apps/vr-tests/src/stories/ColorPicker.stories.tsx
+++ b/apps/vr-tests/src/stories/ColorPicker.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { ColorPicker, Fabric } from '@fluentui/react';
@@ -8,13 +8,13 @@ storiesOf('ColorPicker', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/ComboBox.stories.tsx b/apps/vr-tests/src/stories/ComboBox.stories.tsx
index 51b396fce6ecd..efac5508e94dd 100644
--- a/apps/vr-tests/src/stories/ComboBox.stories.tsx
+++ b/apps/vr-tests/src/stories/ComboBox.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorTallFixedWidth } from '../utilities/index';
 import { ComboBox, SelectableOptionMenuItemType, ISelectableOption } from '@fluentui/react';
@@ -34,14 +34,14 @@ const onRenderFontOption = (item: ISelectableOption) => {
     fontFamily = fontMapping[newFontName] = `"${newFontName}","Segoe UI",Tahoma,Sans-Serif`;
   }
 
-  return <span style={{ fontFamily: fontFamily }}>{item.text}</span>;
+  return <span style={{ fontFamily }}>{item.text}</span>;
 };
 
 storiesOf('ComboBox', module)
   .addDecorator(TestWrapperDecoratorTallFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-ComboBox-Input')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -51,7 +51,7 @@ storiesOf('ComboBox', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/CommandBar.stories.tsx b/apps/vr-tests/src/stories/CommandBar.stories.tsx
index 5c7832f7a7022..f594c56fad619 100644
--- a/apps/vr-tests/src/stories/CommandBar.stories.tsx
+++ b/apps/vr-tests/src/stories/CommandBar.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorTall } from '../utilities/index';
 import { CommandBar, ICommandBarItemProps } from '@fluentui/react';
@@ -68,8 +68,8 @@ const farItems: ICommandBarItemProps[] = [
 storiesOf('CommandBar', module)
   .addDecorator(TestWrapperDecoratorTall)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-CommandBarItem-link')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -79,7 +79,7 @@ storiesOf('CommandBar', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <CommandBar items={items} farItems={farItems} />, { includeRtl: true })
   .addStory('Text only', () => (
diff --git a/apps/vr-tests/src/stories/ContextualMenu.stories.tsx b/apps/vr-tests/src/stories/ContextualMenu.stories.tsx
index ff32855414951..294d410221a05 100644
--- a/apps/vr-tests/src/stories/ContextualMenu.stories.tsx
+++ b/apps/vr-tests/src/stories/ContextualMenu.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { ContextualMenu, ContextualMenuItemType, IContextualMenuItem } from '@fluentui/react';
@@ -281,8 +281,8 @@ const itemsWithSubmenuHrefs: IContextualMenuItem[] = [
 storiesOf('ContextualMenu', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.ms-Layer' })
         .hover('.ms-ContextualMenu-linkContent')
         .snapshot('hover', { cropTo: '.ms-Layer' })
@@ -292,7 +292,7 @@ storiesOf('ContextualMenu', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <ContextualMenu items={items} />)
   .addStory('With icons', () => <ContextualMenu items={itemsWithIcons} />)
@@ -308,8 +308,8 @@ storiesOf('ContextualMenu', module)
 storiesOf('ContextualMenu', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .click('#button')
         .snapshot('menu opened', { cropTo: '.ms-Layer' })
         .hover('#parent')
@@ -321,7 +321,7 @@ storiesOf('ContextualMenu', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('With submenus with hrefs', () => (
     <DefaultButton
diff --git a/apps/vr-tests/src/stories/DatePicker.stories.tsx b/apps/vr-tests/src/stories/DatePicker.stories.tsx
index 46f28df769b61..cba3f3475b236 100644
--- a/apps/vr-tests/src/stories/DatePicker.stories.tsx
+++ b/apps/vr-tests/src/stories/DatePicker.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/index';
 import { Fabric, IDatePickerProps, DatePicker } from '@fluentui/react';
@@ -29,8 +29,8 @@ const commonProps: Partial<IDatePickerProps> = {
 storiesOf('DatePicker', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-DatePicker')
         .snapshot('hover datepicker', { cropTo: '.testWrapper' })
@@ -44,7 +44,7 @@ storiesOf('DatePicker', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
@@ -84,8 +84,8 @@ storiesOf('DatePicker', module)
 storiesOf('DatePicker - No Month Option', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-DatePicker')
         .snapshot('hover datepicker', { cropTo: '.testWrapper' })
@@ -97,7 +97,7 @@ storiesOf('DatePicker - No Month Option', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Show Month as Overlay and no Go To Today', () => (
     <Fabric>
@@ -108,8 +108,8 @@ storiesOf('DatePicker - No Month Option', module)
 storiesOf('DatePicker - Disabled', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-DatePicker')
         .snapshot('hover datepicker', { cropTo: '.testWrapper' })
@@ -119,7 +119,7 @@ storiesOf('DatePicker - Disabled', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Without Label', () => (
     <Fabric>
diff --git a/apps/vr-tests/src/stories/DetailsHeader.stories.tsx b/apps/vr-tests/src/stories/DetailsHeader.stories.tsx
index 0649fcc48f7a1..48ae5b995c4b1 100644
--- a/apps/vr-tests/src/stories/DetailsHeader.stories.tsx
+++ b/apps/vr-tests/src/stories/DetailsHeader.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
@@ -116,8 +116,8 @@ const _columnReorderProps = {
 storiesOf('DetailsHeader', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.ms-DetailsHeader' })
         .hover('[data-item-key=a]')
         .snapshot('hoverFrozenFirst', { cropTo: '.ms-DetailsHeader' })
@@ -139,7 +139,7 @@ storiesOf('DetailsHeader', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
 
   .addStory('Root', () => (
diff --git a/apps/vr-tests/src/stories/DetailsList.stories.tsx b/apps/vr-tests/src/stories/DetailsList.stories.tsx
index 4a8b4ea227d11..b2fdd901623a4 100644
--- a/apps/vr-tests/src/stories/DetailsList.stories.tsx
+++ b/apps/vr-tests/src/stories/DetailsList.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
@@ -119,8 +119,8 @@ const groups = [
 storiesOf('DetailsList', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-DetailsRow')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -130,7 +130,7 @@ storiesOf('DetailsList', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => (
     <DetailsList
diff --git a/apps/vr-tests/src/stories/Dialog.stories.tsx b/apps/vr-tests/src/stories/Dialog.stories.tsx
index ab8c68848a74d..538352af57947 100644
--- a/apps/vr-tests/src/stories/Dialog.stories.tsx
+++ b/apps/vr-tests/src/stories/Dialog.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorTall } from '../utilities/index';
 import { Dialog, DialogType, DialogFooter } from '@fluentui/react';
@@ -22,13 +22,13 @@ storiesOf('Dialog', module)
   .addDecorator(TestWrapperDecoratorTall)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.ms-Dialog-main' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/DocumentCard.stories.tsx b/apps/vr-tests/src/stories/DocumentCard.stories.tsx
index 01e7141d2f204..20fc3eb9f6c52 100644
--- a/apps/vr-tests/src/stories/DocumentCard.stories.tsx
+++ b/apps/vr-tests/src/stories/DocumentCard.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator, TestWrapperDecoratorFullWidth } from '../utilities/index';
 import {
@@ -87,13 +87,13 @@ storiesOf('DocumentCard', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   // Commenting out this story as it has some racing issues with the truncation logic
   // and causes the test to fail on unrelated PRs
@@ -140,13 +140,13 @@ storiesOf('DocumentCard', module)
 
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Compact with preview list', () => (
     <Fabric>
diff --git a/apps/vr-tests/src/stories/Dropdown.stories.tsx b/apps/vr-tests/src/stories/Dropdown.stories.tsx
index 7690fe3144329..8814cc09858ef 100644
--- a/apps/vr-tests/src/stories/Dropdown.stories.tsx
+++ b/apps/vr-tests/src/stories/Dropdown.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
@@ -13,8 +13,8 @@ import {
 storiesOf('Dropdown', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Dropdown')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -26,7 +26,7 @@ storiesOf('Dropdown', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
@@ -181,8 +181,8 @@ storiesOf('Dropdown', module)
 storiesOf('Dropdown Disabled', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Dropdown')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -192,7 +192,7 @@ storiesOf('Dropdown Disabled', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => (
     <Dropdown
diff --git a/apps/vr-tests/src/stories/Facepile.stories.tsx b/apps/vr-tests/src/stories/Facepile.stories.tsx
index 5a0e4abe20e56..f395f7088212e 100644
--- a/apps/vr-tests/src/stories/Facepile.stories.tsx
+++ b/apps/vr-tests/src/stories/Facepile.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
@@ -55,13 +55,13 @@ storiesOf('Facepile', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Root', () => <Facepile {...facepileProps} />, { includeRtl: true })
   .addStory('Extra extra small', () => (
diff --git a/apps/vr-tests/src/stories/FocusTrapZone.stories.tsx b/apps/vr-tests/src/stories/FocusTrapZone.stories.tsx
index 3106f69fa586a..2387dad69bc0b 100644
--- a/apps/vr-tests/src/stories/FocusTrapZone.stories.tsx
+++ b/apps/vr-tests/src/stories/FocusTrapZone.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Panel, PanelType, Dialog, DialogType } from '@fluentui/react';
@@ -7,15 +7,15 @@ import { Panel, PanelType, Dialog, DialogType } from '@fluentui/react';
 storiesOf('FocusTrapZones', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default')
         .click('.ms-Panel-closeButton')
         .snapshot('click on panel close button')
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Dialog nested in Panel',
diff --git a/apps/vr-tests/src/stories/FolderCover.stories.tsx b/apps/vr-tests/src/stories/FolderCover.stories.tsx
index cae4aa61daef8..62e5b819ada24 100644
--- a/apps/vr-tests/src/stories/FolderCover.stories.tsx
+++ b/apps/vr-tests/src/stories/FolderCover.stories.tsx
@@ -6,7 +6,7 @@ import {
   renderFolderCoverWithLayout,
   SharedSignal,
 } from '@fluentui/react-experiments';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { ISize, fitContentToBounds, Fabric } from '@fluentui/react';
 import { TestWrapperDecorator } from '../utilities/index';
@@ -47,13 +47,13 @@ storiesOf('FolderCover', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Large Default Cover', () => (
     <FolderCoverWithImage
diff --git a/apps/vr-tests/src/stories/Fonts.stories.tsx b/apps/vr-tests/src/stories/Fonts.stories.tsx
index 0b220572c8b4a..11a1c60bdee1e 100644
--- a/apps/vr-tests/src/stories/Fonts.stories.tsx
+++ b/apps/vr-tests/src/stories/Fonts.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { createFontStyles } from '@fluentui/react/lib/Styling';
@@ -36,13 +36,13 @@ storiesOf('Fonts', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Weights', () => (
     <div style={getStyle('en')}>
diff --git a/apps/vr-tests/src/stories/GroupedList.stories.tsx b/apps/vr-tests/src/stories/GroupedList.stories.tsx
index b6d3874d208e3..acd21334d7b46 100644
--- a/apps/vr-tests/src/stories/GroupedList.stories.tsx
+++ b/apps/vr-tests/src/stories/GroupedList.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { GroupedList } from '@fluentui/react';
@@ -88,8 +88,8 @@ const onRenderCell = (nestingDepth: number, item: any, itemIndex: number) => {
 storiesOf('GroupedList', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-GroupHeader-expand')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -99,7 +99,7 @@ storiesOf('GroupedList', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/HoverCard.stories.tsx b/apps/vr-tests/src/stories/HoverCard.stories.tsx
index 39c7a0af54699..186175cd64397 100644
--- a/apps/vr-tests/src/stories/HoverCard.stories.tsx
+++ b/apps/vr-tests/src/stories/HoverCard.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { HoverCard } from '@fluentui/react';
@@ -23,15 +23,15 @@ storiesOf('HoverCard', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .click('.ms-HoverCard-host')
         .snapshot('fully expanded with test content', { cropTo: '.ms-Layer' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/Icon.stories.tsx b/apps/vr-tests/src/stories/Icon.stories.tsx
index 06633a6c97722..1e08271081568 100644
--- a/apps/vr-tests/src/stories/Icon.stories.tsx
+++ b/apps/vr-tests/src/stories/Icon.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Icon, IconType, getIconClassName, Fabric } from '@fluentui/react';
@@ -18,13 +18,13 @@ storiesOf('Icon', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Root', () => (
     <Fabric>
diff --git a/apps/vr-tests/src/stories/Image.stories.tsx b/apps/vr-tests/src/stories/Image.stories.tsx
index 3442fe701381c..c161b22486a38 100644
--- a/apps/vr-tests/src/stories/Image.stories.tsx
+++ b/apps/vr-tests/src/stories/Image.stories.tsx
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import { Image, ImageFit, Label, Layer, IImageProps } from '@fluentui/react';
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { TestWrapperDecorator } from '../utilities/index';
 
 const img350x150 = 'http://fabricweb.azureedge.net/fabric-website/placeholders/350x150.png';
@@ -52,13 +52,13 @@ storiesOf('Image', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('No fit, no w/h', () => (
     <div>
diff --git a/apps/vr-tests/src/stories/Keytip.stories.tsx b/apps/vr-tests/src/stories/Keytip.stories.tsx
index b58c8cdb8cbd9..b88bd955d8e91 100644
--- a/apps/vr-tests/src/stories/Keytip.stories.tsx
+++ b/apps/vr-tests/src/stories/Keytip.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { DelayedRender, Keytip } from '@fluentui/react';
@@ -14,13 +14,13 @@ storiesOf('Keytip', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Root', () => (
     <DelayedRender>
diff --git a/apps/vr-tests/src/stories/Label.stories.tsx b/apps/vr-tests/src/stories/Label.stories.tsx
index 91ff520639998..ca0afc7a235fb 100644
--- a/apps/vr-tests/src/stories/Label.stories.tsx
+++ b/apps/vr-tests/src/stories/Label.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Label } from '@fluentui/react';
@@ -8,13 +8,13 @@ storiesOf('Label', module)
   .addDecorator(TestWrapperDecorator)
   .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 })
   .addStory('Disabled', () => <Label disabled>I'm a disabled label</Label>)
diff --git a/apps/vr-tests/src/stories/Layer.stories.tsx b/apps/vr-tests/src/stories/Layer.stories.tsx
index 1091359356981..e0f9da5b60371 100644
--- a/apps/vr-tests/src/stories/Layer.stories.tsx
+++ b/apps/vr-tests/src/stories/Layer.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Layer } from '@fluentui/react';
@@ -8,12 +8,12 @@ storiesOf('Layer', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.ms-Layer' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Root', () => <Layer>Layer content</Layer>, { includeRtl: true });
diff --git a/apps/vr-tests/src/stories/Link.stories.tsx b/apps/vr-tests/src/stories/Link.stories.tsx
index 26d5eee3e2b5d..5df67c3f2f00a 100644
--- a/apps/vr-tests/src/stories/Link.stories.tsx
+++ b/apps/vr-tests/src/stories/Link.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Link } from '@fluentui/react';
@@ -7,7 +7,7 @@ import { Link } from '@fluentui/react';
 storiesOf('Link', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -26,7 +26,7 @@ storiesOf('Link', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/List.stories.tsx b/apps/vr-tests/src/stories/List.stories.tsx
index b3b62fedc195e..08024e825fedd 100644
--- a/apps/vr-tests/src/stories/List.stories.tsx
+++ b/apps/vr-tests/src/stories/List.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { List } from '@fluentui/react';
@@ -134,12 +134,12 @@ storiesOf('List', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Root', () => <List items={items} onRenderCell={onRenderCell} />, { includeRtl: true });
diff --git a/apps/vr-tests/src/stories/MessageBar.stories.tsx b/apps/vr-tests/src/stories/MessageBar.stories.tsx
index 575a2c73f8fd3..7cfd04bd50811 100644
--- a/apps/vr-tests/src/stories/MessageBar.stories.tsx
+++ b/apps/vr-tests/src/stories/MessageBar.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Link, MessageBar, MessageBarType } from '@fluentui/react';
@@ -15,13 +15,13 @@ storiesOf('MessageBar', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Root', () => <MessageBar>Info/default message bar. {link}</MessageBar>, {
     includeRtl: true,
diff --git a/apps/vr-tests/src/stories/Modal.stories.tsx b/apps/vr-tests/src/stories/Modal.stories.tsx
index 515abe90e5a4b..2a65e9bf7a22f 100644
--- a/apps/vr-tests/src/stories/Modal.stories.tsx
+++ b/apps/vr-tests/src/stories/Modal.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Modal } from '@fluentui/react/lib/Modal';
@@ -8,13 +8,13 @@ storiesOf('Modal', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.ms-Modal' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Root', () => (
     <Modal isOpen isBlocking={false}>
diff --git a/apps/vr-tests/src/stories/Nav.stories.tsx b/apps/vr-tests/src/stories/Nav.stories.tsx
index 6c793b6e10c45..f5ab11f6cf6ee 100644
--- a/apps/vr-tests/src/stories/Nav.stories.tsx
+++ b/apps/vr-tests/src/stories/Nav.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Nav, INavLink } from '@fluentui/react/lib/Nav';
@@ -89,8 +89,8 @@ const disabledLinks: INavLink[] = [
 storiesOf('Nav', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Nav-compositeLink')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -100,13 +100,13 @@ storiesOf('Nav', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
     () => (
       <div style={{ width: '208px' }}>
-        <Nav groups={[{ links: links }]} selectedKey="key3" />
+        <Nav groups={[{ links }]} selectedKey="key3" />
       </div>
     ),
     { includeRtl: true },
diff --git a/apps/vr-tests/src/stories/OverflowSet.stories.tsx b/apps/vr-tests/src/stories/OverflowSet.stories.tsx
index aecd5814e8a44..9fd8a1b4d757d 100644
--- a/apps/vr-tests/src/stories/OverflowSet.stories.tsx
+++ b/apps/vr-tests/src/stories/OverflowSet.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Fabric, OverflowSet, IOverflowSetItemProps } from '@fluentui/react';
@@ -13,8 +13,8 @@ const onRenderOverflowButton = (overflowItems: any[]) => {
 storiesOf('OverflowSet', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .click('.ms-Button-flexContainer')
         .hover('.ms-Button-flexContainer')
@@ -22,7 +22,7 @@ storiesOf('OverflowSet', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
@@ -50,13 +50,13 @@ storiesOf('OverflowSet variant', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Vertical Direction', () => (
     <Fabric>
diff --git a/apps/vr-tests/src/stories/Overlay.stories.tsx b/apps/vr-tests/src/stories/Overlay.stories.tsx
index 7577a3c2e48e6..ff5b58c3d44bf 100644
--- a/apps/vr-tests/src/stories/Overlay.stories.tsx
+++ b/apps/vr-tests/src/stories/Overlay.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Overlay } from '@fluentui/react';
@@ -8,13 +8,13 @@ storiesOf('Overlay', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.ms-Overlay' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/Panel.stories.tsx b/apps/vr-tests/src/stories/Panel.stories.tsx
index d3982e42855db..6fa71c4a12534 100644
--- a/apps/vr-tests/src/stories/Panel.stories.tsx
+++ b/apps/vr-tests/src/stories/Panel.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { DefaultButton, Panel, PanelType, PrimaryButton, SearchBox } from '@fluentui/react';
@@ -20,13 +20,13 @@ storiesOf('Panel', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default')
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory(
     'Small left w/ close button',
@@ -107,15 +107,11 @@ storiesOf('Panel', module)
 storiesOf('Panel', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
-        .snapshot('default')
-        .click('.ms-SearchBox-field')
-        .snapshot('click')
-        .end()}
+    <StoryWright
+      steps={new Steps().snapshot('default').click('.ms-SearchBox-field').snapshot('click').end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'SearchBox and Right Panel',
diff --git a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
index 0e156831eec99..9fc198e7e5f44 100644
--- a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
+++ b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
@@ -203,8 +203,8 @@ storiesOf('PeoplePicker', module)
 storiesOf('PeoplePicker', module)
   .addDecorator(TestWrapperDecorator)
   .addStory('Normal with text', () => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .setValue('.ms-BasePicker-input', 'a')
         .snapshot('suggestion: "a"')
@@ -219,14 +219,14 @@ storiesOf('PeoplePicker', module)
           pickerSuggestionsProps={suggestionProps}
         />
       </Fabric>
-    </Screener>
+    </StoryWright>
   ));
 
 storiesOf('PeoplePicker', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .click('.ms-BasePicker-input')
         .hover('.ms-Suggestions-item')
@@ -234,7 +234,7 @@ storiesOf('PeoplePicker', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Normal', () => (
     <Fabric>
diff --git a/apps/vr-tests/src/stories/Persona.stories.tsx b/apps/vr-tests/src/stories/Persona.stories.tsx
index 8da6082277c15..c6429155a5385 100644
--- a/apps/vr-tests/src/stories/Persona.stories.tsx
+++ b/apps/vr-tests/src/stories/Persona.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { IPersonaProps, Persona, PersonaPresence, PersonaSize } from '@fluentui/react';
@@ -18,13 +18,13 @@ const examplePersona: IPersonaProps = {
 storiesOf('Persona', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   )
   .addStory('size10 (tiny)', () => (
     <div>
diff --git a/apps/vr-tests/src/stories/Pivot.stories.tsx b/apps/vr-tests/src/stories/Pivot.stories.tsx
index 5097dd0ced15a..89d4a1e8e568d 100644
--- a/apps/vr-tests/src/stories/Pivot.stories.tsx
+++ b/apps/vr-tests/src/stories/Pivot.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Pivot, PivotItem, IPivotItemProps, Icon, Fabric } from '@fluentui/react';
@@ -7,8 +7,8 @@ import { Pivot, PivotItem, IPivotItemProps, Icon, Fabric } from '@fluentui/react
 storiesOf('Pivot', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Pivot-link.is-selected')
         .snapshot('hover-selected', { cropTo: '.testWrapper' })
@@ -20,7 +20,7 @@ storiesOf('Pivot', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => (
     <Pivot>
@@ -123,8 +123,8 @@ storiesOf('Pivot - Overflow', module)
     </div>
   ))
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .executeScript('document.getElementById("testWrapper").style.width = "500px"')
         .snapshot('Medium', { cropTo: '.testWrapper' })
         .executeScript('document.getElementById("testWrapper").style.width = "750px"')
@@ -140,7 +140,7 @@ storiesOf('Pivot - Overflow', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => (
     <Pivot overflowBehavior="menu">
diff --git a/apps/vr-tests/src/stories/ProgressIndicator.stories.tsx b/apps/vr-tests/src/stories/ProgressIndicator.stories.tsx
index 96199934c3a4d..6f31013afb527 100644
--- a/apps/vr-tests/src/stories/ProgressIndicator.stories.tsx
+++ b/apps/vr-tests/src/stories/ProgressIndicator.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { ProgressIndicator } from '@fluentui/react';
@@ -8,13 +8,13 @@ storiesOf('ProgressIndicator', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('0%', () => (
     <ProgressIndicator
diff --git a/apps/vr-tests/src/stories/Rating.stories.tsx b/apps/vr-tests/src/stories/Rating.stories.tsx
index 666308869dbaf..b7071570f1e76 100644
--- a/apps/vr-tests/src/stories/Rating.stories.tsx
+++ b/apps/vr-tests/src/stories/Rating.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Rating, RatingSize } from '@fluentui/react';
@@ -7,15 +7,15 @@ import { Rating, RatingSize } from '@fluentui/react';
 storiesOf('Rating', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .click('button.ms-Rating-button:nth-of-type(2)')
         .snapshot('click', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <Rating min={1} max={5} />)
   .addStory('Rated', () => <Rating min={1} max={5} rating={2} />, { includeRtl: true })
diff --git a/apps/vr-tests/src/stories/ResizeGroup.stories.tsx b/apps/vr-tests/src/stories/ResizeGroup.stories.tsx
index c119747265e00..442f614770ffc 100644
--- a/apps/vr-tests/src/stories/ResizeGroup.stories.tsx
+++ b/apps/vr-tests/src/stories/ResizeGroup.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { ResizeGroup, OverflowSet } from '@fluentui/react';
@@ -28,8 +28,8 @@ const noop = () => null;
 storiesOf('ResizeGroup', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .click('.OverflowButton')
         .hover('.OverflowButton')
@@ -37,7 +37,7 @@ storiesOf('ResizeGroup', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/ScrollablePane.DetailsList.stories.tsx b/apps/vr-tests/src/stories/ScrollablePane.DetailsList.stories.tsx
index fe272d74fe90f..cd28531f1891e 100644
--- a/apps/vr-tests/src/stories/ScrollablePane.DetailsList.stories.tsx
+++ b/apps/vr-tests/src/stories/ScrollablePane.DetailsList.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
@@ -198,8 +198,8 @@ function onRenderDetailsFooter(props: IDetailsFooterProps): JSX.Element {
 storiesOf('ScrollablePane Details List', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
           "document.getElementsByClassName('ms-ScrollablePane--contentContainer')[0].scrollTop = 2",
@@ -218,7 +218,7 @@ storiesOf('ScrollablePane Details List', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('ScrollablePane Details List with sticky header & footer', () => (
     <ScrollablePaneDetailsListStory />
diff --git a/apps/vr-tests/src/stories/ScrollablePane.GroupedDetailsList.stories.tsx b/apps/vr-tests/src/stories/ScrollablePane.GroupedDetailsList.stories.tsx
index bde1ce4ecca9e..2620d62687549 100644
--- a/apps/vr-tests/src/stories/ScrollablePane.GroupedDetailsList.stories.tsx
+++ b/apps/vr-tests/src/stories/ScrollablePane.GroupedDetailsList.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
@@ -236,8 +236,8 @@ const cropTo = { cropTo: '.testWrapper' };
 storiesOf('ScrollablePane Grouped Details List', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default: scrollbars should be visible', cropTo)
         .executeScript(`${getElement}.scrollTop = 100`)
         .snapshot('Scrollbars visibility when header is sticky', cropTo)
@@ -277,6 +277,6 @@ storiesOf('ScrollablePane Grouped Details List', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('ScrollablePane scrollbars visibility', () => <ScrollablePaneDetailsListStory />);
diff --git a/apps/vr-tests/src/stories/ScrollablePane.stories.tsx b/apps/vr-tests/src/stories/ScrollablePane.stories.tsx
index 439598f67e50d..9a7229eeb1b11 100644
--- a/apps/vr-tests/src/stories/ScrollablePane.stories.tsx
+++ b/apps/vr-tests/src/stories/ScrollablePane.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Fabric, ScrollablePane, StickyPositionType, Sticky } from '@fluentui/react';
@@ -44,8 +44,8 @@ function createContentArea(index: number) {
 storiesOf('ScrollablePane', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
           "document.getElementsByClassName('ms-ScrollablePane--contentContainer')[0].scrollTop = 9999",
@@ -54,7 +54,7 @@ storiesOf('ScrollablePane', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default ScrollablePane Example', () => (
     <div
diff --git a/apps/vr-tests/src/stories/SearchBox.stories.tsx b/apps/vr-tests/src/stories/SearchBox.stories.tsx
index 1c8cdbf19bcf2..01b3678c8b916 100644
--- a/apps/vr-tests/src/stories/SearchBox.stories.tsx
+++ b/apps/vr-tests/src/stories/SearchBox.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { SearchBox, Fabric } from '@fluentui/react';
 import { TestWrapperDecorator } from '../utilities/index';
@@ -9,8 +9,8 @@ import { TestWrapperDecorator } from '../utilities/index';
 storiesOf('SearchBox', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .click('.ms-SearchBox-field')
         .hover('.ms-SearchBox-field')
@@ -18,7 +18,7 @@ storiesOf('SearchBox', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/Separator.stories.tsx b/apps/vr-tests/src/stories/Separator.stories.tsx
index d69fad98b78e3..3941398237d3b 100644
--- a/apps/vr-tests/src/stories/Separator.stories.tsx
+++ b/apps/vr-tests/src/stories/Separator.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Separator, mergeStyles } from '@fluentui/react';
@@ -15,9 +15,9 @@ const horizontalStyles = mergeStyles({
 storiesOf('Separator', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/Shimmer.stories.tsx b/apps/vr-tests/src/stories/Shimmer.stories.tsx
index a88e6fcacc380..487744259fef0 100644
--- a/apps/vr-tests/src/stories/Shimmer.stories.tsx
+++ b/apps/vr-tests/src/stories/Shimmer.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Shimmer, ShimmerElementType as ElemType, ShimmerElementsGroup } from '@fluentui/react';
@@ -25,13 +25,13 @@ storiesOf('Shimmer', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default')
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Basic', () => <Shimmer />)
   .addStory('50% width', () => <Shimmer width="50%" />)
diff --git a/apps/vr-tests/src/stories/Signals.stories.tsx b/apps/vr-tests/src/stories/Signals.stories.tsx
index c3f7b436bf6b3..a7921ebdd4799 100644
--- a/apps/vr-tests/src/stories/Signals.stories.tsx
+++ b/apps/vr-tests/src/stories/Signals.stories.tsx
@@ -21,7 +21,7 @@ import {
   FollowedSignal,
   NotFollowedSignal,
 } from '@fluentui/react-experiments';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Fabric } from '@fluentui/react';
@@ -46,9 +46,9 @@ const SignalExample: React.FunctionComponent<ISignalExampleProps> = (
 storiesOf('Signals', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('You checked out', () => (
     <SignalExample name="You checked out" signal={<YouCheckedOutSignal />} />
diff --git a/apps/vr-tests/src/stories/Slider.stories.tsx b/apps/vr-tests/src/stories/Slider.stories.tsx
index 9b93c0c638059..c57d36b4f7bba 100644
--- a/apps/vr-tests/src/stories/Slider.stories.tsx
+++ b/apps/vr-tests/src/stories/Slider.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps, Step } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorTall } from '../utilities/index';
 import { Slider, ThemeProvider } from '@fluentui/react';
@@ -8,15 +8,15 @@ storiesOf('Slider', module)
   .addDecorator(TestWrapperDecoratorTall)
   .addDecorator(story => (
     <ThemeProvider>
-      <Screener
-        steps={new Screener.Steps()
+      <StoryWright
+        steps={new Steps()
           .snapshot('default', { cropTo: '.testWrapper' })
           .hover('.ms-Slider-line')
           .snapshot('hover', { cropTo: '.testWrapper' })
           .end()}
       >
         {story()}
-      </Screener>
+      </StoryWright>
     </ThemeProvider>
   ))
   .addStory(
diff --git a/apps/vr-tests/src/stories/SpinButton.stories.tsx b/apps/vr-tests/src/stories/SpinButton.stories.tsx
index b17806c21ee65..1cb66065f66a1 100644
--- a/apps/vr-tests/src/stories/SpinButton.stories.tsx
+++ b/apps/vr-tests/src/stories/SpinButton.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorFixedWidth, TestWrapperDecorator } from '../utilities/index';
 import {
@@ -28,8 +28,8 @@ const iconProps = { iconName: 'IncreaseIndentLegacy' };
 storiesOf('SpinButton', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-spinButton-input')
         .snapshot('hover input', { cropTo: '.testWrapper' })
@@ -43,7 +43,7 @@ storiesOf('SpinButton', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => (
     <Fabric>
@@ -69,9 +69,9 @@ storiesOf('SpinButton', module)
 storiesOf('SpinButton', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Label at end',
@@ -110,9 +110,9 @@ storiesOf('SpinButton', module)
 storiesOf('SpinButton', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Label on top', () => (
     <Fabric>
diff --git a/apps/vr-tests/src/stories/Spinner.stories.tsx b/apps/vr-tests/src/stories/Spinner.stories.tsx
index f69229452589a..0be7d99812f68 100644
--- a/apps/vr-tests/src/stories/Spinner.stories.tsx
+++ b/apps/vr-tests/src/stories/Spinner.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Spinner, SpinnerSize } from '@fluentui/react';
@@ -7,9 +7,9 @@ import { Spinner, SpinnerSize } from '@fluentui/react';
 storiesOf('Spinner', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Extra small', () => <Spinner size={SpinnerSize.xSmall} />)
   .addStory('Small', () => <Spinner size={SpinnerSize.small} />)
diff --git a/apps/vr-tests/src/stories/Stack.stories.tsx b/apps/vr-tests/src/stories/Stack.stories.tsx
index b060589a28c9b..b9f9a1027672a 100644
--- a/apps/vr-tests/src/stories/Stack.stories.tsx
+++ b/apps/vr-tests/src/stories/Stack.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorFullWidth } from '../utilities/index';
 import { Fabric, mergeStyleSets, DefaultPalette, IStyle, Stack } from '@fluentui/react';
@@ -71,14 +71,14 @@ storiesOf('Stack', module)
   .addDecorator(TestWrapperDecoratorFullWidth)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()
       }
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory(
     'Vertical Stack - Default',
diff --git a/apps/vr-tests/src/stories/Sticky.Breadcrumb.stories.tsx b/apps/vr-tests/src/stories/Sticky.Breadcrumb.stories.tsx
index 149f1b03e5024..acf6c0e0ee91e 100644
--- a/apps/vr-tests/src/stories/Sticky.Breadcrumb.stories.tsx
+++ b/apps/vr-tests/src/stories/Sticky.Breadcrumb.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
@@ -222,8 +222,8 @@ const cropTo = { cropTo: '.testWrapper' };
 storiesOf('Sticky breadcrumb and sticky details list header', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', cropTo)
         .executeScript(`${getElement}.scrollTop = 5`)
         .snapshot(
@@ -243,7 +243,7 @@ storiesOf('Sticky breadcrumb and sticky details list header', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('ScrollablePane Sticky Breadcrumb Details List', () => (
     <ScrollablePaneStickyBreadcrumbExample />
diff --git a/apps/vr-tests/src/stories/Suggestions.stories.tsx b/apps/vr-tests/src/stories/Suggestions.stories.tsx
index 06025629eaa3f..3253078b8e463 100644
--- a/apps/vr-tests/src/stories/Suggestions.stories.tsx
+++ b/apps/vr-tests/src/stories/Suggestions.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { DevOnlyStoryHeader } from '../utilities/index';
@@ -130,8 +130,8 @@ export class SimpleSuggestionsExample extends React.Component<{}, { Provinces: P
 storiesOf('(Dev-Only) Suggestions', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testRoot' })
         .hover('#province-fake-long-province')
         .snapshot('Hovering over a wide suggestion element', { cropTo: '.testRoot' })
@@ -142,7 +142,7 @@ storiesOf('(Dev-Only) Suggestions', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Test of closeButton with overflowing wide custom element', () => (
     <SimpleSuggestionsExample />
diff --git a/apps/vr-tests/src/stories/SwatchColorPicker.stories.tsx b/apps/vr-tests/src/stories/SwatchColorPicker.stories.tsx
index a171d686eb3c5..f857becc1d500 100644
--- a/apps/vr-tests/src/stories/SwatchColorPicker.stories.tsx
+++ b/apps/vr-tests/src/stories/SwatchColorPicker.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { SwatchColorPicker, ISwatchColorPickerProps } from '@fluentui/react';
@@ -17,8 +17,8 @@ const props: ISwatchColorPickerProps = {
 storiesOf('SwatchColorPicker', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
           "document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
@@ -42,7 +42,7 @@ storiesOf('SwatchColorPicker', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Circle', () => <SwatchColorPicker {...props} />, { includeRtl: true })
   .addStory('Circle over 24px size', () => (
diff --git a/apps/vr-tests/src/stories/TagPicker.stories.tsx b/apps/vr-tests/src/stories/TagPicker.stories.tsx
index 5015a1ea6c93c..90fe880c37bf2 100644
--- a/apps/vr-tests/src/stories/TagPicker.stories.tsx
+++ b/apps/vr-tests/src/stories/TagPicker.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Keys } from 'screener-storybook/src/screener';
+import { StoryWright, Steps, Keys } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator, TestWrapperDecoratorFixedWidth } from '../utilities/index';
 import { TagPicker, Fabric, ITag } from '@fluentui/react';
@@ -35,8 +35,8 @@ storiesOf('TagPicker', module)
 storiesOf('TagPicker', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .click('.ms-BasePicker-input')
         .setValue('.ms-BasePicker-input', 'a')
@@ -47,7 +47,7 @@ storiesOf('TagPicker', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => (
     <TagPicker
@@ -85,9 +85,9 @@ storiesOf('TagPicker', module)
 storiesOf('TagPicker', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('With long tag', () => (
     // This example MUST be inside a narrow container which forces the tag to overflow
@@ -107,8 +107,8 @@ storiesOf('TagPicker', module)
 storiesOf('TagItem', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-TagItem')
         .snapshot('Tag Item Hover', { cropTo: '.testWrapper' })
@@ -121,7 +121,7 @@ storiesOf('TagItem', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Selected',
diff --git a/apps/vr-tests/src/stories/TeachingBubble.stories.tsx b/apps/vr-tests/src/stories/TeachingBubble.stories.tsx
index 96d34dd9bce02..f9e744f604ee2 100644
--- a/apps/vr-tests/src/stories/TeachingBubble.stories.tsx
+++ b/apps/vr-tests/src/stories/TeachingBubble.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorTall } from '../utilities/index';
 import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
@@ -8,11 +8,9 @@ import { DirectionalHint } from '@fluentui/react/lib/Callout';
 storiesOf('TeachingBubble', module)
   .addDecorator(TestWrapperDecoratorTall)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps().snapshot('default', { cropTo: '.ms-TeachingBubble' }).end()}
-    >
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.ms-TeachingBubble' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'WideIllustration',
diff --git a/apps/vr-tests/src/stories/Text.stories.tsx b/apps/vr-tests/src/stories/Text.stories.tsx
index 1bbf596465097..497ec9a7c36d5 100644
--- a/apps/vr-tests/src/stories/Text.stories.tsx
+++ b/apps/vr-tests/src/stories/Text.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Text } from '@fluentui/react';
@@ -7,9 +7,9 @@ import { Text } from '@fluentui/react';
 storiesOf('Text', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <Text>I'm default text</Text>, { includeRtl: true })
   .addStory('Wrap', () => (
diff --git a/apps/vr-tests/src/stories/TextField.stories.tsx b/apps/vr-tests/src/stories/TextField.stories.tsx
index b3755750ef7ac..cb98d7b6c8d2a 100644
--- a/apps/vr-tests/src/stories/TextField.stories.tsx
+++ b/apps/vr-tests/src/stories/TextField.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/index';
 import { TextField } from '@fluentui/react';
@@ -7,8 +7,8 @@ import { TextField } from '@fluentui/react';
 storiesOf('TextField', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-TextField-field')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -18,7 +18,7 @@ storiesOf('TextField', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <TextField label="Standard" />)
   .addStory('Placeholder', () => <TextField label="Standard" placeholder="Placeholder" />, {
diff --git a/apps/vr-tests/src/stories/ThemeProvider.stories.tsx b/apps/vr-tests/src/stories/ThemeProvider.stories.tsx
index dfbf753b48423..edb4e0c52e07e 100644
--- a/apps/vr-tests/src/stories/ThemeProvider.stories.tsx
+++ b/apps/vr-tests/src/stories/ThemeProvider.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { loadTheme, createTheme, Customizer } from '@fluentui/react';
 import { PrimaryButton } from '@fluentui/react/lib/Button';
@@ -9,9 +9,9 @@ import { TestWrapperDecorator } from '../utilities/index';
 storiesOf('ThemeProvider', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default theme', () => <PrimaryButton>Default theme</PrimaryButton>)
   .addStory('Customized theme', () => (
@@ -87,8 +87,8 @@ const LoadThemeTestButton: React.FunctionComponent<{
 storiesOf('ThemeProvider with loadTheme', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .click('.testLoadTheme')
         .snapshot('global theme changed', { cropTo: '.testWrapper' })
@@ -96,7 +96,7 @@ storiesOf('ThemeProvider with loadTheme', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Use contextual theme over global theme if defined', () => (
     <ThemeProvider>
@@ -119,9 +119,9 @@ storiesOf('ThemeProvider with loadTheme', module)
 storiesOf('ThemeProvider with Customizer', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Customizer wraps ThemeProvider', () => (
     <Customizer
diff --git a/apps/vr-tests/src/stories/Tile.stories.tsx b/apps/vr-tests/src/stories/Tile.stories.tsx
index 292aeeba8f9be..98fd8199a8fb8 100644
--- a/apps/vr-tests/src/stories/Tile.stories.tsx
+++ b/apps/vr-tests/src/stories/Tile.stories.tsx
@@ -8,7 +8,7 @@ import {
   SharedSignal,
   ITileBackgroundProps,
 } from '@fluentui/react-experiments';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { ISize, fitContentToBounds, Fabric } from '@fluentui/react';
 import { TestWrapperDecorator } from '../utilities/index';
@@ -136,13 +136,13 @@ storiesOf('Tile', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Document tile with fit landscape image', () => (
     <DocumentTileWithThumbnail
@@ -221,15 +221,15 @@ storiesOf('MediaTile', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Tile')
         .snapshot('hover', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Media tile with single activity line', () => (
     <MediaTileBox>
diff --git a/apps/vr-tests/src/stories/Toggle.stories.tsx b/apps/vr-tests/src/stories/Toggle.stories.tsx
index defebb98674f6..9ee0e0046255b 100644
--- a/apps/vr-tests/src/stories/Toggle.stories.tsx
+++ b/apps/vr-tests/src/stories/Toggle.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { IToggleProps, Toggle } from '@fluentui/react';
@@ -13,9 +13,9 @@ const baseProps: IToggleProps = {
 storiesOf('Toggle', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Checked', () => <Toggle {...baseProps} defaultChecked={true} />, { includeRtl: true })
   .addStory('Unchecked', () => <Toggle {...baseProps} defaultChecked={false} />, {
diff --git a/apps/vr-tests/src/stories/Tooltip.stories.tsx b/apps/vr-tests/src/stories/Tooltip.stories.tsx
index a40b046c2ea11..0ad62e8939639 100644
--- a/apps/vr-tests/src/stories/Tooltip.stories.tsx
+++ b/apps/vr-tests/src/stories/Tooltip.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator, TestWrapperDecoratorFixedWidth } from '../utilities/index';
 import { TooltipHost } from '@fluentui/react';
@@ -7,11 +7,9 @@ import { TooltipHost } from '@fluentui/react';
 storiesOf('Tooltip', module)
   .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps().hover('.ms-TooltipHost').wait(200).snapshot('default').end()}
-    >
+    <StoryWright steps={new Steps().hover('.ms-TooltipHost').wait(200).snapshot('default').end()}>
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default', () => (
     <TooltipHost content="This is the tooltip" id="myID" calloutProps={{ gapSpace: 0 }}>
@@ -22,8 +20,8 @@ storiesOf('Tooltip', module)
 storiesOf('Tooltip - Multiple', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .hover('#outerTooltip')
         .wait(200)
         .snapshot('hover outer')
@@ -33,7 +31,7 @@ storiesOf('Tooltip - Multiple', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Two Tooltips', () => (
     <div>
diff --git a/apps/vr-tests/src/stories/z_Callout.stories.tsx b/apps/vr-tests/src/stories/z_Callout.stories.tsx
index afad32bd0ad2f..75c3519e5f082 100644
--- a/apps/vr-tests/src/stories/z_Callout.stories.tsx
+++ b/apps/vr-tests/src/stories/z_Callout.stories.tsx
@@ -1,6 +1,6 @@
 // NOTE: filename is prefixed with z_ to make callout tests run last to avoid instability
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Callout, DirectionalHint, ICalloutProps } from '@fluentui/react';
 
@@ -42,13 +42,13 @@ storiesOf('Callout', module)
   ))
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default')
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Root', () =>
     // prettier-ignore

From 1b12bbb2c13b45d9301fc773ed1e09b91138c13e Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Sat, 10 Dec 2022 17:40:29 -0500
Subject: [PATCH 3/6] chore: remove more Screener mentions

---
 apps/vr-tests/.storybook/preview.js                | 5 -----
 apps/vr-tests/src/stories/PeoplePicker.stories.tsx | 2 +-
 apps/vr-tests/src/stories/TagPicker.stories.tsx    | 2 +-
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/apps/vr-tests/.storybook/preview.js b/apps/vr-tests/.storybook/preview.js
index fdc15df69c270..46f31395be92c 100644
--- a/apps/vr-tests/.storybook/preview.js
+++ b/apps/vr-tests/.storybook/preview.js
@@ -40,8 +40,3 @@ setAddon({
 });
 
 export const parameters = { layout: 'none' };
-
-// 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/src/stories/PeoplePicker.stories.tsx b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
index 9fc198e7e5f44..c9e3e49e5f5f9 100644
--- a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
+++ b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
@@ -130,7 +130,7 @@ const getTextFromItem = (persona: IPersonaProps): string => persona.text as stri
 
 const getPeople = () => people;
 
-// Pickers that are 'disabled' are added before the Screener decorator because css classes for
+// Pickers that are 'disabled' are added before the StoryWright decorator because css classes for
 // suggestion items won't exist
 storiesOf('PeoplePicker', module)
   .addDecorator(TestWrapperDecorator)
diff --git a/apps/vr-tests/src/stories/TagPicker.stories.tsx b/apps/vr-tests/src/stories/TagPicker.stories.tsx
index 90fe880c37bf2..6ee673e0c369e 100644
--- a/apps/vr-tests/src/stories/TagPicker.stories.tsx
+++ b/apps/vr-tests/src/stories/TagPicker.stories.tsx
@@ -26,7 +26,7 @@ const getTextFromItem = (item: ITag) => item.name;
 
 const getList = () => testTags;
 
-// Pickers that are 'disabled' are added before the Screener decorator because css classes for
+// Pickers that are 'disabled' are added before the StoryWright decorator because css classes for
 // suggestion items won't exist
 storiesOf('TagPicker', module)
   .addDecorator(TestWrapperDecorator)

From 6199c1af125d93b9adf0a676c34080b586906712 Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Sat, 10 Dec 2022 18:01:26 -0500
Subject: [PATCH 4/6] nit: update order of storywright imports to alphabetical

---
 apps/vr-tests/src/stories/ActivityItem.stories.tsx              | 2 +-
 apps/vr-tests/src/stories/Breadcrumb.stories.tsx                | 2 +-
 apps/vr-tests/src/stories/Button.stories.tsx                    | 2 +-
 apps/vr-tests/src/stories/Calendar.stories.tsx                  | 2 +-
 apps/vr-tests/src/stories/Checkbox.stories.tsx                  | 2 +-
 apps/vr-tests/src/stories/ChoiceGroup.stories.tsx               | 2 +-
 apps/vr-tests/src/stories/Coachmark.stories.tsx                 | 2 +-
 apps/vr-tests/src/stories/ColorPicker.stories.tsx               | 2 +-
 apps/vr-tests/src/stories/ComboBox.stories.tsx                  | 2 +-
 apps/vr-tests/src/stories/CommandBar.stories.tsx                | 2 +-
 apps/vr-tests/src/stories/ContextualMenu.stories.tsx            | 2 +-
 apps/vr-tests/src/stories/DatePicker.stories.tsx                | 2 +-
 apps/vr-tests/src/stories/DetailsHeader.stories.tsx             | 2 +-
 apps/vr-tests/src/stories/DetailsList.stories.tsx               | 2 +-
 apps/vr-tests/src/stories/Dialog.stories.tsx                    | 2 +-
 apps/vr-tests/src/stories/DocumentCard.stories.tsx              | 2 +-
 apps/vr-tests/src/stories/Dropdown.stories.tsx                  | 2 +-
 apps/vr-tests/src/stories/Facepile.stories.tsx                  | 2 +-
 apps/vr-tests/src/stories/FocusTrapZone.stories.tsx             | 2 +-
 apps/vr-tests/src/stories/FolderCover.stories.tsx               | 2 +-
 apps/vr-tests/src/stories/Fonts.stories.tsx                     | 2 +-
 apps/vr-tests/src/stories/GroupedList.stories.tsx               | 2 +-
 apps/vr-tests/src/stories/HoverCard.stories.tsx                 | 2 +-
 apps/vr-tests/src/stories/Icon.stories.tsx                      | 2 +-
 apps/vr-tests/src/stories/Image.stories.tsx                     | 2 +-
 apps/vr-tests/src/stories/Keytip.stories.tsx                    | 2 +-
 apps/vr-tests/src/stories/Label.stories.tsx                     | 2 +-
 apps/vr-tests/src/stories/Layer.stories.tsx                     | 2 +-
 apps/vr-tests/src/stories/Link.stories.tsx                      | 2 +-
 apps/vr-tests/src/stories/List.stories.tsx                      | 2 +-
 apps/vr-tests/src/stories/MessageBar.stories.tsx                | 2 +-
 apps/vr-tests/src/stories/Modal.stories.tsx                     | 2 +-
 apps/vr-tests/src/stories/Nav.stories.tsx                       | 2 +-
 apps/vr-tests/src/stories/OverflowSet.stories.tsx               | 2 +-
 apps/vr-tests/src/stories/Overlay.stories.tsx                   | 2 +-
 apps/vr-tests/src/stories/Panel.stories.tsx                     | 2 +-
 apps/vr-tests/src/stories/PeoplePicker.stories.tsx              | 2 +-
 apps/vr-tests/src/stories/Persona.stories.tsx                   | 2 +-
 apps/vr-tests/src/stories/Pivot.stories.tsx                     | 2 +-
 apps/vr-tests/src/stories/ProgressIndicator.stories.tsx         | 2 +-
 apps/vr-tests/src/stories/Rating.stories.tsx                    | 2 +-
 apps/vr-tests/src/stories/ResizeGroup.stories.tsx               | 2 +-
 .../vr-tests/src/stories/ScrollablePane.DetailsList.stories.tsx | 2 +-
 .../src/stories/ScrollablePane.GroupedDetailsList.stories.tsx   | 2 +-
 apps/vr-tests/src/stories/ScrollablePane.stories.tsx            | 2 +-
 apps/vr-tests/src/stories/SearchBox.stories.tsx                 | 2 +-
 apps/vr-tests/src/stories/Separator.stories.tsx                 | 2 +-
 apps/vr-tests/src/stories/Shimmer.stories.tsx                   | 2 +-
 apps/vr-tests/src/stories/Signals.stories.tsx                   | 2 +-
 apps/vr-tests/src/stories/SpinButton.stories.tsx                | 2 +-
 apps/vr-tests/src/stories/Spinner.stories.tsx                   | 2 +-
 apps/vr-tests/src/stories/Stack.stories.tsx                     | 2 +-
 apps/vr-tests/src/stories/Sticky.Breadcrumb.stories.tsx         | 2 +-
 apps/vr-tests/src/stories/Suggestions.stories.tsx               | 2 +-
 apps/vr-tests/src/stories/SwatchColorPicker.stories.tsx         | 2 +-
 apps/vr-tests/src/stories/TeachingBubble.stories.tsx            | 2 +-
 apps/vr-tests/src/stories/Text.stories.tsx                      | 2 +-
 apps/vr-tests/src/stories/TextField.stories.tsx                 | 2 +-
 apps/vr-tests/src/stories/ThemeProvider.stories.tsx             | 2 +-
 apps/vr-tests/src/stories/Tile.stories.tsx                      | 2 +-
 apps/vr-tests/src/stories/Toggle.stories.tsx                    | 2 +-
 apps/vr-tests/src/stories/Tooltip.stories.tsx                   | 2 +-
 apps/vr-tests/src/stories/z_Callout.stories.tsx                 | 2 +-
 63 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/apps/vr-tests/src/stories/ActivityItem.stories.tsx b/apps/vr-tests/src/stories/ActivityItem.stories.tsx
index 8c89dd275857c..18b3d0214ad1e 100644
--- a/apps/vr-tests/src/stories/ActivityItem.stories.tsx
+++ b/apps/vr-tests/src/stories/ActivityItem.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { ActivityItem, Icon } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Breadcrumb.stories.tsx b/apps/vr-tests/src/stories/Breadcrumb.stories.tsx
index 890c42f61df28..f23b0de94be02 100644
--- a/apps/vr-tests/src/stories/Breadcrumb.stories.tsx
+++ b/apps/vr-tests/src/stories/Breadcrumb.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorTall } from '../utilities/index';
 import { Breadcrumb } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Button.stories.tsx b/apps/vr-tests/src/stories/Button.stories.tsx
index 1e8a8c9c0bb75..efc12284b4717 100644
--- a/apps/vr-tests/src/stories/Button.stories.tsx
+++ b/apps/vr-tests/src/stories/Button.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator, TestWrapperDecoratorTall } from '../utilities/index';
 import {
diff --git a/apps/vr-tests/src/stories/Calendar.stories.tsx b/apps/vr-tests/src/stories/Calendar.stories.tsx
index cde46ab30059d..fd6f223569ffe 100644
--- a/apps/vr-tests/src/stories/Calendar.stories.tsx
+++ b/apps/vr-tests/src/stories/Calendar.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/index';
 import { Fabric, Calendar, DateRangeType, DayOfWeek } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Checkbox.stories.tsx b/apps/vr-tests/src/stories/Checkbox.stories.tsx
index 3bb4892eba4bb..a996169c4a386 100644
--- a/apps/vr-tests/src/stories/Checkbox.stories.tsx
+++ b/apps/vr-tests/src/stories/Checkbox.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Checkbox, Persona, PersonaSize } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx b/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx
index 018400d082f03..3d8b58c238158 100644
--- a/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx
+++ b/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Coachmark.stories.tsx b/apps/vr-tests/src/stories/Coachmark.stories.tsx
index 0b607e91f26fb..220bf4bae29e0 100644
--- a/apps/vr-tests/src/stories/Coachmark.stories.tsx
+++ b/apps/vr-tests/src/stories/Coachmark.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Coachmark, DirectionalHint, TeachingBubbleContent, Fabric } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/ColorPicker.stories.tsx b/apps/vr-tests/src/stories/ColorPicker.stories.tsx
index 505c25900ca16..9e8fb2f104438 100644
--- a/apps/vr-tests/src/stories/ColorPicker.stories.tsx
+++ b/apps/vr-tests/src/stories/ColorPicker.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { ColorPicker, Fabric } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/ComboBox.stories.tsx b/apps/vr-tests/src/stories/ComboBox.stories.tsx
index efac5508e94dd..caf82ff065443 100644
--- a/apps/vr-tests/src/stories/ComboBox.stories.tsx
+++ b/apps/vr-tests/src/stories/ComboBox.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorTallFixedWidth } from '../utilities/index';
 import { ComboBox, SelectableOptionMenuItemType, ISelectableOption } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/CommandBar.stories.tsx b/apps/vr-tests/src/stories/CommandBar.stories.tsx
index f594c56fad619..618afe7c6f6aa 100644
--- a/apps/vr-tests/src/stories/CommandBar.stories.tsx
+++ b/apps/vr-tests/src/stories/CommandBar.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorTall } from '../utilities/index';
 import { CommandBar, ICommandBarItemProps } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/ContextualMenu.stories.tsx b/apps/vr-tests/src/stories/ContextualMenu.stories.tsx
index 294d410221a05..cb86aa479a669 100644
--- a/apps/vr-tests/src/stories/ContextualMenu.stories.tsx
+++ b/apps/vr-tests/src/stories/ContextualMenu.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { ContextualMenu, ContextualMenuItemType, IContextualMenuItem } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/DatePicker.stories.tsx b/apps/vr-tests/src/stories/DatePicker.stories.tsx
index cba3f3475b236..2cb0b2009bbf1 100644
--- a/apps/vr-tests/src/stories/DatePicker.stories.tsx
+++ b/apps/vr-tests/src/stories/DatePicker.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/index';
 import { Fabric, IDatePickerProps, DatePicker } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/DetailsHeader.stories.tsx b/apps/vr-tests/src/stories/DetailsHeader.stories.tsx
index 48ae5b995c4b1..650f1576cc68c 100644
--- a/apps/vr-tests/src/stories/DetailsHeader.stories.tsx
+++ b/apps/vr-tests/src/stories/DetailsHeader.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
diff --git a/apps/vr-tests/src/stories/DetailsList.stories.tsx b/apps/vr-tests/src/stories/DetailsList.stories.tsx
index b2fdd901623a4..909b945ccb258 100644
--- a/apps/vr-tests/src/stories/DetailsList.stories.tsx
+++ b/apps/vr-tests/src/stories/DetailsList.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
diff --git a/apps/vr-tests/src/stories/Dialog.stories.tsx b/apps/vr-tests/src/stories/Dialog.stories.tsx
index 538352af57947..d227d969d5bc6 100644
--- a/apps/vr-tests/src/stories/Dialog.stories.tsx
+++ b/apps/vr-tests/src/stories/Dialog.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorTall } from '../utilities/index';
 import { Dialog, DialogType, DialogFooter } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/DocumentCard.stories.tsx b/apps/vr-tests/src/stories/DocumentCard.stories.tsx
index 20fc3eb9f6c52..5bf47e551d49f 100644
--- a/apps/vr-tests/src/stories/DocumentCard.stories.tsx
+++ b/apps/vr-tests/src/stories/DocumentCard.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator, TestWrapperDecoratorFullWidth } from '../utilities/index';
 import {
diff --git a/apps/vr-tests/src/stories/Dropdown.stories.tsx b/apps/vr-tests/src/stories/Dropdown.stories.tsx
index 8814cc09858ef..cba672770f9d5 100644
--- a/apps/vr-tests/src/stories/Dropdown.stories.tsx
+++ b/apps/vr-tests/src/stories/Dropdown.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
diff --git a/apps/vr-tests/src/stories/Facepile.stories.tsx b/apps/vr-tests/src/stories/Facepile.stories.tsx
index f395f7088212e..a53c2d42410dc 100644
--- a/apps/vr-tests/src/stories/Facepile.stories.tsx
+++ b/apps/vr-tests/src/stories/Facepile.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
diff --git a/apps/vr-tests/src/stories/FocusTrapZone.stories.tsx b/apps/vr-tests/src/stories/FocusTrapZone.stories.tsx
index 2387dad69bc0b..4fcf2dded1e21 100644
--- a/apps/vr-tests/src/stories/FocusTrapZone.stories.tsx
+++ b/apps/vr-tests/src/stories/FocusTrapZone.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Panel, PanelType, Dialog, DialogType } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/FolderCover.stories.tsx b/apps/vr-tests/src/stories/FolderCover.stories.tsx
index 62e5b819ada24..622a2322eabcf 100644
--- a/apps/vr-tests/src/stories/FolderCover.stories.tsx
+++ b/apps/vr-tests/src/stories/FolderCover.stories.tsx
@@ -6,7 +6,7 @@ import {
   renderFolderCoverWithLayout,
   SharedSignal,
 } from '@fluentui/react-experiments';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { ISize, fitContentToBounds, Fabric } from '@fluentui/react';
 import { TestWrapperDecorator } from '../utilities/index';
diff --git a/apps/vr-tests/src/stories/Fonts.stories.tsx b/apps/vr-tests/src/stories/Fonts.stories.tsx
index 11a1c60bdee1e..94babf41bd209 100644
--- a/apps/vr-tests/src/stories/Fonts.stories.tsx
+++ b/apps/vr-tests/src/stories/Fonts.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { createFontStyles } from '@fluentui/react/lib/Styling';
diff --git a/apps/vr-tests/src/stories/GroupedList.stories.tsx b/apps/vr-tests/src/stories/GroupedList.stories.tsx
index acd21334d7b46..2d1ec50051ff1 100644
--- a/apps/vr-tests/src/stories/GroupedList.stories.tsx
+++ b/apps/vr-tests/src/stories/GroupedList.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { GroupedList } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/HoverCard.stories.tsx b/apps/vr-tests/src/stories/HoverCard.stories.tsx
index 186175cd64397..d71bdbc5ee5e1 100644
--- a/apps/vr-tests/src/stories/HoverCard.stories.tsx
+++ b/apps/vr-tests/src/stories/HoverCard.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { HoverCard } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Icon.stories.tsx b/apps/vr-tests/src/stories/Icon.stories.tsx
index 1e08271081568..460643a9fdb4f 100644
--- a/apps/vr-tests/src/stories/Icon.stories.tsx
+++ b/apps/vr-tests/src/stories/Icon.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Icon, IconType, getIconClassName, Fabric } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Image.stories.tsx b/apps/vr-tests/src/stories/Image.stories.tsx
index c161b22486a38..0dd0db1a3c746 100644
--- a/apps/vr-tests/src/stories/Image.stories.tsx
+++ b/apps/vr-tests/src/stories/Image.stories.tsx
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import { Image, ImageFit, Label, Layer, IImageProps } from '@fluentui/react';
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { TestWrapperDecorator } from '../utilities/index';
 
 const img350x150 = 'http://fabricweb.azureedge.net/fabric-website/placeholders/350x150.png';
diff --git a/apps/vr-tests/src/stories/Keytip.stories.tsx b/apps/vr-tests/src/stories/Keytip.stories.tsx
index b88bd955d8e91..fbd9bd54f3dfa 100644
--- a/apps/vr-tests/src/stories/Keytip.stories.tsx
+++ b/apps/vr-tests/src/stories/Keytip.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { DelayedRender, Keytip } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Label.stories.tsx b/apps/vr-tests/src/stories/Label.stories.tsx
index ca0afc7a235fb..5ab47fb8998b4 100644
--- a/apps/vr-tests/src/stories/Label.stories.tsx
+++ b/apps/vr-tests/src/stories/Label.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Label } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Layer.stories.tsx b/apps/vr-tests/src/stories/Layer.stories.tsx
index e0f9da5b60371..fc0289d058a5c 100644
--- a/apps/vr-tests/src/stories/Layer.stories.tsx
+++ b/apps/vr-tests/src/stories/Layer.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Layer } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Link.stories.tsx b/apps/vr-tests/src/stories/Link.stories.tsx
index 5df67c3f2f00a..956f4c584c7d5 100644
--- a/apps/vr-tests/src/stories/Link.stories.tsx
+++ b/apps/vr-tests/src/stories/Link.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Link } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/List.stories.tsx b/apps/vr-tests/src/stories/List.stories.tsx
index 08024e825fedd..96764167ea968 100644
--- a/apps/vr-tests/src/stories/List.stories.tsx
+++ b/apps/vr-tests/src/stories/List.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { List } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/MessageBar.stories.tsx b/apps/vr-tests/src/stories/MessageBar.stories.tsx
index 7cfd04bd50811..2d433f3e7dc27 100644
--- a/apps/vr-tests/src/stories/MessageBar.stories.tsx
+++ b/apps/vr-tests/src/stories/MessageBar.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Link, MessageBar, MessageBarType } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Modal.stories.tsx b/apps/vr-tests/src/stories/Modal.stories.tsx
index 2a65e9bf7a22f..d2398c01b95a6 100644
--- a/apps/vr-tests/src/stories/Modal.stories.tsx
+++ b/apps/vr-tests/src/stories/Modal.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Modal } from '@fluentui/react/lib/Modal';
diff --git a/apps/vr-tests/src/stories/Nav.stories.tsx b/apps/vr-tests/src/stories/Nav.stories.tsx
index f5ab11f6cf6ee..7e80b24eceaf0 100644
--- a/apps/vr-tests/src/stories/Nav.stories.tsx
+++ b/apps/vr-tests/src/stories/Nav.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Nav, INavLink } from '@fluentui/react/lib/Nav';
diff --git a/apps/vr-tests/src/stories/OverflowSet.stories.tsx b/apps/vr-tests/src/stories/OverflowSet.stories.tsx
index 9fd8a1b4d757d..5fe08a7c5ee0c 100644
--- a/apps/vr-tests/src/stories/OverflowSet.stories.tsx
+++ b/apps/vr-tests/src/stories/OverflowSet.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Fabric, OverflowSet, IOverflowSetItemProps } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Overlay.stories.tsx b/apps/vr-tests/src/stories/Overlay.stories.tsx
index ff5b58c3d44bf..58931e38de669 100644
--- a/apps/vr-tests/src/stories/Overlay.stories.tsx
+++ b/apps/vr-tests/src/stories/Overlay.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Overlay } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Panel.stories.tsx b/apps/vr-tests/src/stories/Panel.stories.tsx
index 6fa71c4a12534..80ed9613989d8 100644
--- a/apps/vr-tests/src/stories/Panel.stories.tsx
+++ b/apps/vr-tests/src/stories/Panel.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { DefaultButton, Panel, PanelType, PrimaryButton, SearchBox } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
index c9e3e49e5f5f9..31d74855afc93 100644
--- a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
+++ b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
diff --git a/apps/vr-tests/src/stories/Persona.stories.tsx b/apps/vr-tests/src/stories/Persona.stories.tsx
index c6429155a5385..13255007800cd 100644
--- a/apps/vr-tests/src/stories/Persona.stories.tsx
+++ b/apps/vr-tests/src/stories/Persona.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { IPersonaProps, Persona, PersonaPresence, PersonaSize } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Pivot.stories.tsx b/apps/vr-tests/src/stories/Pivot.stories.tsx
index 89d4a1e8e568d..8f1251d9b51b7 100644
--- a/apps/vr-tests/src/stories/Pivot.stories.tsx
+++ b/apps/vr-tests/src/stories/Pivot.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Pivot, PivotItem, IPivotItemProps, Icon, Fabric } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/ProgressIndicator.stories.tsx b/apps/vr-tests/src/stories/ProgressIndicator.stories.tsx
index 6f31013afb527..ea53e401a9322 100644
--- a/apps/vr-tests/src/stories/ProgressIndicator.stories.tsx
+++ b/apps/vr-tests/src/stories/ProgressIndicator.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { ProgressIndicator } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Rating.stories.tsx b/apps/vr-tests/src/stories/Rating.stories.tsx
index b7071570f1e76..370d0c97b0ba3 100644
--- a/apps/vr-tests/src/stories/Rating.stories.tsx
+++ b/apps/vr-tests/src/stories/Rating.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Rating, RatingSize } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/ResizeGroup.stories.tsx b/apps/vr-tests/src/stories/ResizeGroup.stories.tsx
index 442f614770ffc..0431e8cb25247 100644
--- a/apps/vr-tests/src/stories/ResizeGroup.stories.tsx
+++ b/apps/vr-tests/src/stories/ResizeGroup.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { ResizeGroup, OverflowSet } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/ScrollablePane.DetailsList.stories.tsx b/apps/vr-tests/src/stories/ScrollablePane.DetailsList.stories.tsx
index cd28531f1891e..9518ecaec36c8 100644
--- a/apps/vr-tests/src/stories/ScrollablePane.DetailsList.stories.tsx
+++ b/apps/vr-tests/src/stories/ScrollablePane.DetailsList.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
diff --git a/apps/vr-tests/src/stories/ScrollablePane.GroupedDetailsList.stories.tsx b/apps/vr-tests/src/stories/ScrollablePane.GroupedDetailsList.stories.tsx
index 2620d62687549..4f7f5e477de05 100644
--- a/apps/vr-tests/src/stories/ScrollablePane.GroupedDetailsList.stories.tsx
+++ b/apps/vr-tests/src/stories/ScrollablePane.GroupedDetailsList.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
diff --git a/apps/vr-tests/src/stories/ScrollablePane.stories.tsx b/apps/vr-tests/src/stories/ScrollablePane.stories.tsx
index 9a7229eeb1b11..69d626e0d0664 100644
--- a/apps/vr-tests/src/stories/ScrollablePane.stories.tsx
+++ b/apps/vr-tests/src/stories/ScrollablePane.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Fabric, ScrollablePane, StickyPositionType, Sticky } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/SearchBox.stories.tsx b/apps/vr-tests/src/stories/SearchBox.stories.tsx
index 01b3678c8b916..0baf767a8eb2a 100644
--- a/apps/vr-tests/src/stories/SearchBox.stories.tsx
+++ b/apps/vr-tests/src/stories/SearchBox.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { SearchBox, Fabric } from '@fluentui/react';
 import { TestWrapperDecorator } from '../utilities/index';
diff --git a/apps/vr-tests/src/stories/Separator.stories.tsx b/apps/vr-tests/src/stories/Separator.stories.tsx
index 3941398237d3b..ede953ce1b458 100644
--- a/apps/vr-tests/src/stories/Separator.stories.tsx
+++ b/apps/vr-tests/src/stories/Separator.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Separator, mergeStyles } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Shimmer.stories.tsx b/apps/vr-tests/src/stories/Shimmer.stories.tsx
index 487744259fef0..d88784ea8ca43 100644
--- a/apps/vr-tests/src/stories/Shimmer.stories.tsx
+++ b/apps/vr-tests/src/stories/Shimmer.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Shimmer, ShimmerElementType as ElemType, ShimmerElementsGroup } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Signals.stories.tsx b/apps/vr-tests/src/stories/Signals.stories.tsx
index a7921ebdd4799..de91fe2703a83 100644
--- a/apps/vr-tests/src/stories/Signals.stories.tsx
+++ b/apps/vr-tests/src/stories/Signals.stories.tsx
@@ -21,7 +21,7 @@ import {
   FollowedSignal,
   NotFollowedSignal,
 } from '@fluentui/react-experiments';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Fabric } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/SpinButton.stories.tsx b/apps/vr-tests/src/stories/SpinButton.stories.tsx
index 1cb66065f66a1..18838337c0e9b 100644
--- a/apps/vr-tests/src/stories/SpinButton.stories.tsx
+++ b/apps/vr-tests/src/stories/SpinButton.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorFixedWidth, TestWrapperDecorator } from '../utilities/index';
 import {
diff --git a/apps/vr-tests/src/stories/Spinner.stories.tsx b/apps/vr-tests/src/stories/Spinner.stories.tsx
index 0be7d99812f68..a2d8a5cc79f62 100644
--- a/apps/vr-tests/src/stories/Spinner.stories.tsx
+++ b/apps/vr-tests/src/stories/Spinner.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Spinner, SpinnerSize } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Stack.stories.tsx b/apps/vr-tests/src/stories/Stack.stories.tsx
index b9f9a1027672a..f0a63c8af60a7 100644
--- a/apps/vr-tests/src/stories/Stack.stories.tsx
+++ b/apps/vr-tests/src/stories/Stack.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorFullWidth } from '../utilities/index';
 import { Fabric, mergeStyleSets, DefaultPalette, IStyle, Stack } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Sticky.Breadcrumb.stories.tsx b/apps/vr-tests/src/stories/Sticky.Breadcrumb.stories.tsx
index acf6c0e0ee91e..7c10cce6d5aca 100644
--- a/apps/vr-tests/src/stories/Sticky.Breadcrumb.stories.tsx
+++ b/apps/vr-tests/src/stories/Sticky.Breadcrumb.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import {
diff --git a/apps/vr-tests/src/stories/Suggestions.stories.tsx b/apps/vr-tests/src/stories/Suggestions.stories.tsx
index 3253078b8e463..51d29b46cefd8 100644
--- a/apps/vr-tests/src/stories/Suggestions.stories.tsx
+++ b/apps/vr-tests/src/stories/Suggestions.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { DevOnlyStoryHeader } from '../utilities/index';
diff --git a/apps/vr-tests/src/stories/SwatchColorPicker.stories.tsx b/apps/vr-tests/src/stories/SwatchColorPicker.stories.tsx
index f857becc1d500..5146412c4c7ed 100644
--- a/apps/vr-tests/src/stories/SwatchColorPicker.stories.tsx
+++ b/apps/vr-tests/src/stories/SwatchColorPicker.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { SwatchColorPicker, ISwatchColorPickerProps } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/TeachingBubble.stories.tsx b/apps/vr-tests/src/stories/TeachingBubble.stories.tsx
index f9e744f604ee2..a42a5acc23032 100644
--- a/apps/vr-tests/src/stories/TeachingBubble.stories.tsx
+++ b/apps/vr-tests/src/stories/TeachingBubble.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorTall } from '../utilities/index';
 import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
diff --git a/apps/vr-tests/src/stories/Text.stories.tsx b/apps/vr-tests/src/stories/Text.stories.tsx
index 497ec9a7c36d5..dfe3539a5a83e 100644
--- a/apps/vr-tests/src/stories/Text.stories.tsx
+++ b/apps/vr-tests/src/stories/Text.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { Text } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/TextField.stories.tsx b/apps/vr-tests/src/stories/TextField.stories.tsx
index cb98d7b6c8d2a..250053279993f 100644
--- a/apps/vr-tests/src/stories/TextField.stories.tsx
+++ b/apps/vr-tests/src/stories/TextField.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/index';
 import { TextField } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/ThemeProvider.stories.tsx b/apps/vr-tests/src/stories/ThemeProvider.stories.tsx
index edb4e0c52e07e..713d718cf0a84 100644
--- a/apps/vr-tests/src/stories/ThemeProvider.stories.tsx
+++ b/apps/vr-tests/src/stories/ThemeProvider.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { loadTheme, createTheme, Customizer } from '@fluentui/react';
 import { PrimaryButton } from '@fluentui/react/lib/Button';
diff --git a/apps/vr-tests/src/stories/Tile.stories.tsx b/apps/vr-tests/src/stories/Tile.stories.tsx
index 98fd8199a8fb8..dfdef4b85497d 100644
--- a/apps/vr-tests/src/stories/Tile.stories.tsx
+++ b/apps/vr-tests/src/stories/Tile.stories.tsx
@@ -8,7 +8,7 @@ import {
   SharedSignal,
   ITileBackgroundProps,
 } from '@fluentui/react-experiments';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { ISize, fitContentToBounds, Fabric } from '@fluentui/react';
 import { TestWrapperDecorator } from '../utilities/index';
diff --git a/apps/vr-tests/src/stories/Toggle.stories.tsx b/apps/vr-tests/src/stories/Toggle.stories.tsx
index 9ee0e0046255b..95d4f72a646a3 100644
--- a/apps/vr-tests/src/stories/Toggle.stories.tsx
+++ b/apps/vr-tests/src/stories/Toggle.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator } from '../utilities/index';
 import { IToggleProps, Toggle } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/Tooltip.stories.tsx b/apps/vr-tests/src/stories/Tooltip.stories.tsx
index 0ad62e8939639..998dd1cb08442 100644
--- a/apps/vr-tests/src/stories/Tooltip.stories.tsx
+++ b/apps/vr-tests/src/stories/Tooltip.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecorator, TestWrapperDecoratorFixedWidth } from '../utilities/index';
 import { TooltipHost } from '@fluentui/react';
diff --git a/apps/vr-tests/src/stories/z_Callout.stories.tsx b/apps/vr-tests/src/stories/z_Callout.stories.tsx
index 75c3519e5f082..27a5c0cfa38af 100644
--- a/apps/vr-tests/src/stories/z_Callout.stories.tsx
+++ b/apps/vr-tests/src/stories/z_Callout.stories.tsx
@@ -1,6 +1,6 @@
 // NOTE: filename is prefixed with z_ to make callout tests run last to avoid instability
 import * as React from 'react';
-import { StoryWright, Steps } from 'storywright';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Callout, DirectionalHint, ICalloutProps } from '@fluentui/react';
 

From 2e4c1ad3e2ca89ffb55494efb74a42f9d842f35d Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Sat, 10 Dec 2022 18:08:56 -0500
Subject: [PATCH 5/6] fix: fix bad import

---
 apps/vr-tests/src/stories/Slider.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vr-tests/src/stories/Slider.stories.tsx b/apps/vr-tests/src/stories/Slider.stories.tsx
index c57d36b4f7bba..b659eb12ce0c3 100644
--- a/apps/vr-tests/src/stories/Slider.stories.tsx
+++ b/apps/vr-tests/src/stories/Slider.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryWright, Steps, Step } from 'storywright';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { TestWrapperDecoratorTall } from '../utilities/index';
 import { Slider, ThemeProvider } from '@fluentui/react';

From c5f5d17a1de4734ed4d36616d10f7e9a8f73c44e Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Sat, 10 Dec 2022 18:23:14 -0500
Subject: [PATCH 6/6] chore: remove screener types from tsconfig

---
 apps/vr-tests/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vr-tests/tsconfig.json b/apps/vr-tests/tsconfig.json
index 7cf7902d44a8e..e2d8f1cd03b5f 100644
--- a/apps/vr-tests/tsconfig.json
+++ b/apps/vr-tests/tsconfig.json
@@ -10,7 +10,7 @@
     "experimentalDecorators": true,
     "noUnusedLocals": true,
     "preserveConstEnums": true,
-    "types": ["webpack-env", "@storybook/react", "screener-storybook"]
+    "types": ["webpack-env", "@storybook/react"]
   },
   "include": ["src"]
 }