From 129662eda5f81e53416aabfb967f589122d5ed96 Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Fri, 16 Dec 2022 03:06:48 -0500
Subject: [PATCH 1/9] chore: remove convert step from rubpublishscreenshot
 template

---
 .devops/templates/runpublishvrscreenshot.yml | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/.devops/templates/runpublishvrscreenshot.yml b/.devops/templates/runpublishvrscreenshot.yml
index 21c94e12087c94..9567585d2355bd 100644
--- a/.devops/templates/runpublishvrscreenshot.yml
+++ b/.devops/templates/runpublishvrscreenshot.yml
@@ -15,10 +15,6 @@ steps:
       filePath: yarn-ci.sh
     displayName: yarn (install packages)
 
-  - script: |
-      yarn workspace ${{ parameters.vrTestPackageName }} convert
-    displayName: Convert screener component to storywright
-
   - script: |
       yarn workspace ${{ parameters.vrTestPackageName }} vrt:build
     displayName: Build VR tests components package

From 83a1a257dc43d6dc475acd36ee4ef96ad49f8795 Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Fri, 16 Dec 2022 03:11:27 -0500
Subject: [PATCH 2/9] chore: convert Screener tags to StoryWright

---
 .../src/stories/ActivityItem.stories.tsx      |  6 +--
 .../src/stories/Breadcrumb.stories.tsx        | 14 +++---
 apps/vr-tests/src/stories/Button.stories.tsx  | 30 ++++++------
 .../src/stories/ButtonNext.stories.tsx        | 46 +++++++++----------
 .../vr-tests/src/stories/Calendar.stories.tsx | 10 ++--
 apps/vr-tests/src/stories/Callout.stories.tsx |  8 ++--
 apps/vr-tests/src/stories/Card.stories.tsx    |  8 ++--
 .../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 |  8 ++--
 .../src/stories/CommandBar.stories.tsx        |  8 ++--
 .../src/stories/ContextualMenu.stories.tsx    | 14 +++---
 .../src/stories/DatePicker.stories.tsx        | 20 ++++----
 .../src/stories/DetailsHeader.stories.tsx     |  9 ++--
 .../src/stories/DetailsList.stories.tsx       |  8 ++--
 apps/vr-tests/src/stories/Dialog.stories.tsx  |  8 ++--
 .../src/stories/DocumentCard.stories.tsx      | 15 +++---
 .../vr-tests/src/stories/Dropdown.stories.tsx | 14 +++---
 .../vr-tests/src/stories/Facepile.stories.tsx |  8 ++--
 .../src/stories/FocusTrapZone.stories.tsx     |  9 ++--
 .../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     |  8 ++--
 .../src/stories/NewSlider.stories.tsx         |  8 ++--
 .../src/stories/OverflowSet.stories.tsx       | 14 +++---
 apps/vr-tests/src/stories/Overlay.stories.tsx |  8 ++--
 apps/vr-tests/src/stories/Panel.stories.tsx   | 14 +++---
 .../src/stories/PeoplePicker.stories.tsx      | 17 +++----
 apps/vr-tests/src/stories/Persona.stories.tsx |  8 ++--
 apps/vr-tests/src/stories/Pivot.stories.tsx   |  8 ++--
 .../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        | 12 ++---
 apps/vr-tests/src/stories/Spinner.stories.tsx |  6 +--
 apps/vr-tests/src/stories/Stack.stories.tsx   |  8 ++--
 .../src/stories/Sticky.Breadcrumb.stories.tsx |  9 ++--
 .../src/stories/Suggestions.stories.tsx       |  9 ++--
 .../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 +++---
 68 files changed, 349 insertions(+), 345 deletions(-)

diff --git a/apps/vr-tests/src/stories/ActivityItem.stories.tsx b/apps/vr-tests/src/stories/ActivityItem.stories.tsx
index 1ff48503532a15..be8a507d422840 100644
--- a/apps/vr-tests/src/stories/ActivityItem.stories.tsx
+++ b/apps/vr-tests/src/stories/ActivityItem.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { ActivityItem, Icon } from 'office-ui-fabric-react';
@@ -9,13 +9,13 @@ storiesOf('ActivityItem', module)
   .addDecorator(FabricDecorator)
   .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 5f5d427e487060..547b65c25d141f 100644
--- a/apps/vr-tests/src/stories/Breadcrumb.stories.tsx
+++ b/apps/vr-tests/src/stories/Breadcrumb.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorTall } from '../utilities';
 import { Breadcrumb } from 'office-ui-fabric-react';
@@ -10,8 +10,8 @@ const noOp = () => undefined;
 storiesOf('Breadcrumb', module)
   .addDecorator(FabricDecoratorTall)
   .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')",
@@ -36,7 +36,7 @@ storiesOf('Breadcrumb', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
@@ -77,8 +77,8 @@ storiesOf('Breadcrumb', module)
 storiesOf('Breadcrumb', module)
   .addDecorator(FabricDecoratorTall)
   .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)')
@@ -93,7 +93,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 f96e8524b76160..93aa2b7608f237 100644
--- a/apps/vr-tests/src/stories/Button.stories.tsx
+++ b/apps/vr-tests/src/stories/Button.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator, FabricDecoratorTall } from '../utilities';
 import {
@@ -48,7 +48,7 @@ const commandProps: IButtonProps = {
 storiesOf('Button Default', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Button')
@@ -58,7 +58,7 @@ storiesOf('Button Default', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <DefaultButton {...baseProps} />, { rtl: true })
   .addStory('Disabled', () => <DefaultButton {...baseProps} disabled={true} />)
@@ -79,7 +79,7 @@ storiesOf('Button Default', module)
 storiesOf('Button Action', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Button')
@@ -89,7 +89,7 @@ storiesOf('Button Action', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <ActionButton {...baseProps} />, { rtl: true })
   .addStory('Disabled', () => <ActionButton {...baseProps} disabled={true} />)
@@ -100,7 +100,7 @@ storiesOf('Button Action', module)
 storiesOf('Button Compound', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Button')
@@ -110,7 +110,7 @@ storiesOf('Button Compound', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <CompoundButton {...baseProps} />, { rtl: true })
   .addStory('Disabled', () => <CompoundButton {...baseProps} disabled={true} />)
@@ -130,7 +130,7 @@ storiesOf('Button Command', module)
   ))
   .addDecorator(FabricDecoratorTall)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Button')
@@ -143,7 +143,7 @@ storiesOf('Button Command', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <CommandBarButton {...commandProps} />, { rtl: true })
   .addStory('Disabled', () => <CommandBarButton {...commandProps} disabled={true} />)
@@ -152,7 +152,7 @@ storiesOf('Button Command', module)
 storiesOf('Button Split', module)
   .addDecorator(FabricDecoratorTall)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Button:nth-child(1)')
@@ -171,7 +171,7 @@ storiesOf('Button Split', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <DefaultButton {...commandProps} split={true} />, { rtl: true })
   .addStory('Disabled', () => <DefaultButton {...commandProps} disabled={true} split={true} />)
@@ -194,9 +194,9 @@ storiesOf('Button Split', module)
 storiesOf('Button Special Scenarios', module)
   .addDecorator(FabricDecorator)
   .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', () => (
@@ -227,7 +227,7 @@ storiesOf('Button Special Scenarios', module)
 storiesOf('IconButton Scenarios', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('icon', { cropTo: '.testWrapper' })
         .hover('.ms-Button')
@@ -235,7 +235,7 @@ storiesOf('IconButton Scenarios', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
 
   .addStory('normal icon button', () => (
diff --git a/apps/vr-tests/src/stories/ButtonNext.stories.tsx b/apps/vr-tests/src/stories/ButtonNext.stories.tsx
index c4deb2b3cd48b7..81e78b9aee51af 100644
--- a/apps/vr-tests/src/stories/ButtonNext.stories.tsx
+++ b/apps/vr-tests/src/stories/ButtonNext.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Button } from '@fluentui/react-button';
 import { AddIcon } from '@fluentui/react-icons';
@@ -86,7 +86,7 @@ const TeamsTheme: PartialTheme = {
 storiesOf('Button Next', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -105,7 +105,7 @@ storiesOf('Button Next', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default', () => <Button>Hello, world</Button>)
   .addStory('Primary', () => <Button primary>Hello, world</Button>)
@@ -133,7 +133,7 @@ storiesOf('Button Next - Teams Theme', module)
   .addDecorator(FabricDecorator)
   .addDecorator(withThemeProvider({ theme: TeamsTheme }))
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -152,7 +152,7 @@ storiesOf('Button Next - Teams Theme', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default', () => <Button>Hello, world</Button>)
   .addStory('Primary', () => <Button primary>Hello, world</Button>)
@@ -168,7 +168,7 @@ storiesOf('Button Next - With icon before content', module)
   .addDecorator(FabricDecorator)
   .addDecorator(withThemeProvider)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -188,7 +188,7 @@ storiesOf('Button Next - With icon before content', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default', () => <Button icon="X">Hello, world</Button>)
   .addStory('Primary', () => (
@@ -231,7 +231,7 @@ storiesOf('Button Next - With icon after content', module)
   .addDecorator(FabricDecorator)
   .addDecorator(withThemeProvider)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -250,7 +250,7 @@ storiesOf('Button Next - With icon after content', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default', () => (
     <Button icon="X" iconPosition="after">
@@ -297,7 +297,7 @@ storiesOf('Button Next - Circular', module)
   .addDecorator(FabricDecorator)
   .addDecorator(withThemeProvider)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -316,7 +316,7 @@ storiesOf('Button Next - Circular', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default', () => (
     <Button circular icon="X">
@@ -363,7 +363,7 @@ storiesOf('Button Next - Icon only', module)
   .addDecorator(FabricDecorator)
   .addDecorator(withThemeProvider)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -382,7 +382,7 @@ storiesOf('Button Next - Icon only', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default', () => (
     <Button iconOnly icon="X">
@@ -429,7 +429,7 @@ storiesOf('Button Next - Block', module)
   .addDecorator(FabricDecoratorFullWidth)
   .addDecorator(withThemeProvider)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -448,7 +448,7 @@ storiesOf('Button Next - Block', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default', () => (
     <Button block icon="X">
@@ -495,7 +495,7 @@ storiesOf('Button Next - Inverted', module)
   .addDecorator(FabricDecorator)
   .addDecorator(withThemeProvider)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -514,7 +514,7 @@ storiesOf('Button Next - Inverted', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default', () => (
     <Button inverted icon="X">
@@ -561,7 +561,7 @@ storiesOf('Button Next - Loading', module)
   .addDecorator(FabricDecorator)
   .addDecorator(withThemeProvider)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -580,7 +580,7 @@ storiesOf('Button Next - Loading', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default', () => (
     <Button loading icon="X">
@@ -627,7 +627,7 @@ storiesOf('Button Next - Sizes', module)
   .addDecorator(FabricDecorator)
   .addDecorator(withThemeProvider)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -646,7 +646,7 @@ storiesOf('Button Next - Sizes', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Smallest', () => (
     <Button icon="X" size="smallest">
@@ -683,7 +683,7 @@ storiesOf('Button Next - With styled icon from react-icons via tokens', module)
   .addDecorator(FabricDecorator)
   .addDecorator(withThemeProvider)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -702,7 +702,7 @@ storiesOf('Button Next - With styled icon from react-icons via tokens', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Default', () => <Button icon={<AddIcon />} tokens={{ iconSize: '30px' }} />)
   .addStory('Primary', () => <Button primary icon={<AddIcon />} tokens={{ iconSize: '30px' }} />)
diff --git a/apps/vr-tests/src/stories/Calendar.stories.tsx b/apps/vr-tests/src/stories/Calendar.stories.tsx
index d71848159b7d8b..d28edd0ff115d0 100644
--- a/apps/vr-tests/src/stories/Calendar.stories.tsx
+++ b/apps/vr-tests/src/stories/Calendar.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorFixedWidth } from '../utilities';
 import { Fabric } from 'office-ui-fabric-react';
@@ -10,9 +10,9 @@ const date = new Date(2010, 1, 12);
 storiesOf('Calendar', module)
   .addDecorator(FabricDecoratorFixedWidth)
   .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',
@@ -27,9 +27,9 @@ storiesOf('Calendar', module)
 storiesOf('Calendar - No Month Option', module)
   .addDecorator(FabricDecoratorFixedWidth)
   .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/Callout.stories.tsx b/apps/vr-tests/src/stories/Callout.stories.tsx
index bf66dea9bc478a..297322730a266b 100644
--- a/apps/vr-tests/src/stories/Callout.stories.tsx
+++ b/apps/vr-tests/src/stories/Callout.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorTall } from '../utilities';
 import { Callout, DirectionalHint, ICalloutProps } from 'office-ui-fabric-react';
@@ -35,13 +35,13 @@ storiesOf('Callout', module)
   .addDecorator(FabricDecoratorTall)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default')
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Root', () =>
     // prettier-ignore
diff --git a/apps/vr-tests/src/stories/Card.stories.tsx b/apps/vr-tests/src/stories/Card.stories.tsx
index a4a19c83597512..abb155b22a05f7 100644
--- a/apps/vr-tests/src/stories/Card.stories.tsx
+++ b/apps/vr-tests/src/stories/Card.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorFullWidth } from '../utilities';
 import { Button, IButtonStyles, IButtonTokens } from '@uifabric/experiments';
@@ -174,8 +174,8 @@ storiesOf('Card', module)
   .addDecorator(FabricDecoratorFullWidth)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Card')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -185,7 +185,7 @@ storiesOf('Card', module)
       }
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Vertical Card - Basic - Non hoverable', () => (
     <Fabric>
diff --git a/apps/vr-tests/src/stories/Checkbox.stories.tsx b/apps/vr-tests/src/stories/Checkbox.stories.tsx
index 5f417626b74338..1ae36bcd450e3a 100644
--- a/apps/vr-tests/src/stories/Checkbox.stories.tsx
+++ b/apps/vr-tests/src/stories/Checkbox.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Checkbox, Persona, PersonaSize } from 'office-ui-fabric-react';
@@ -9,13 +9,13 @@ storiesOf('Checkbox', module)
   .addDecorator(FabricDecorator)
   .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" />, { rtl: true })
   .addStory('Checked', () => <Checkbox label="Checked checkbox" checked />)
@@ -56,8 +56,8 @@ storiesOf('Checkbox Indeterminate', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Checkbox')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -66,7 +66,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 d2698ddb9f3a8a..c4bda72ffbf71d 100644
--- a/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx
+++ b/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { ChoiceGroup } from 'office-ui-fabric-react';
@@ -25,8 +25,8 @@ const options = [
 storiesOf('ChoiceGroup', module)
   .addDecorator(FabricDecorator)
   .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' })
@@ -38,7 +38,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 ba79219daa0709..ff1e3989d27d17 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 { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Coachmark, DirectionalHint, TeachingBubbleContent, Fabric } from 'office-ui-fabric-react';
@@ -50,13 +50,13 @@ storiesOf('Coachmark', module)
   .addDecorator(FabricDecorator)
   .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 6d564c46f3dfb4..3956714e8eba1f 100644
--- a/apps/vr-tests/src/stories/ColorPicker.stories.tsx
+++ b/apps/vr-tests/src/stories/ColorPicker.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { ColorPicker, Fabric } from 'office-ui-fabric-react';
@@ -9,13 +9,13 @@ storiesOf('ColorPicker', module)
   .addDecorator(FabricDecorator)
   .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 6bf191e22cd533..0e6ab493a6e285 100644
--- a/apps/vr-tests/src/stories/ComboBox.stories.tsx
+++ b/apps/vr-tests/src/stories/ComboBox.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorTallFixedWidth } from '../utilities';
 import { ComboBox, SelectableOptionMenuItemType, ISelectableOption } from 'office-ui-fabric-react';
@@ -41,8 +41,8 @@ const onRenderFontOption = (item: ISelectableOption) => {
 storiesOf('ComboBox', module)
   .addDecorator(FabricDecoratorTallFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-ComboBox-Input')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -52,7 +52,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 25638e82a27005..6dacdf1dba942f 100644
--- a/apps/vr-tests/src/stories/CommandBar.stories.tsx
+++ b/apps/vr-tests/src/stories/CommandBar.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorTall } from '../utilities';
 import { CommandBar, ICommandBarItemProps } from 'office-ui-fabric-react';
@@ -69,8 +69,8 @@ const farItems: ICommandBarItemProps[] = [
 storiesOf('CommandBar', module)
   .addDecorator(FabricDecoratorTall)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-CommandBarItem-link')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -80,7 +80,7 @@ storiesOf('CommandBar', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <CommandBar items={items} farItems={farItems} />, { rtl: 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 d865271d501014..7ec017192e2129 100644
--- a/apps/vr-tests/src/stories/ContextualMenu.stories.tsx
+++ b/apps/vr-tests/src/stories/ContextualMenu.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import {
@@ -286,8 +286,8 @@ const itemsWithSubmenuHrefs: IContextualMenuItem[] = [
 storiesOf('ContextualMenu', module)
   .addDecorator(FabricDecorator)
   .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' })
@@ -297,7 +297,7 @@ storiesOf('ContextualMenu', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => <ContextualMenu items={items} />)
   .addStory('With icons', () => <ContextualMenu items={itemsWithIcons} />)
@@ -313,8 +313,8 @@ storiesOf('ContextualMenu', module)
 storiesOf('ContextualMenu', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .click('#button')
         .snapshot('menu opened', { cropTo: '.ms-Layer' })
         .hover('#parent')
@@ -326,7 +326,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 8c617315bd1f5b..81789d9f113f0e 100644
--- a/apps/vr-tests/src/stories/DatePicker.stories.tsx
+++ b/apps/vr-tests/src/stories/DatePicker.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorFixedWidth } from '../utilities';
 import { Fabric } from 'office-ui-fabric-react';
@@ -10,8 +10,8 @@ const date = new Date(2010, 1, 12);
 storiesOf('DatePicker', module)
   .addDecorator(FabricDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-DatePicker')
         .snapshot('hover datepicker', { cropTo: '.testWrapper' })
@@ -25,7 +25,7 @@ storiesOf('DatePicker', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
@@ -65,8 +65,8 @@ storiesOf('DatePicker', module)
 storiesOf('DatePicker - No Month Option', module)
   .addDecorator(FabricDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-DatePicker')
         .snapshot('hover datepicker', { cropTo: '.testWrapper' })
@@ -78,7 +78,7 @@ storiesOf('DatePicker - No Month Option', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Show Month as Overlay and no Go To Today', () => (
     <Fabric>
@@ -89,8 +89,8 @@ storiesOf('DatePicker - No Month Option', module)
 storiesOf('DatePicker - Disabled', module)
   .addDecorator(FabricDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-DatePicker')
         .snapshot('hover datepicker', { cropTo: '.testWrapper' })
@@ -100,7 +100,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 9dc3021b6d9141..e59e7c00f8809e 100644
--- a/apps/vr-tests/src/stories/DetailsHeader.stories.tsx
+++ b/apps/vr-tests/src/stories/DetailsHeader.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import {
@@ -15,6 +15,7 @@ import { DetailsHeader } from 'office-ui-fabric-react/lib/components/DetailsList
 const _items: {}[] = [];
 const _selection = new Selection();
 // script to simulate drag so that drop hint is rendered
+// eslint-disable-next-line import/no-webpack-loader-syntax
 const dndScript = require('!raw-loader!../../dndSim.js') as string;
 
 const columns: IColumn[] = [
@@ -116,8 +117,8 @@ const _columnReorderProps = {
 storiesOf('DetailsHeader', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.ms-DetailsHeader' })
         .hover('[aria-colindex=2]')
         .snapshot('hoverFrozenFirst', { cropTo: '.ms-DetailsHeader' })
@@ -139,7 +140,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 dd51e8ebaee9e2..b9699230620ffa 100644
--- a/apps/vr-tests/src/stories/DetailsList.stories.tsx
+++ b/apps/vr-tests/src/stories/DetailsList.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import {
@@ -120,8 +120,8 @@ const groups = [
 storiesOf('DetailsList', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-DetailsRow')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -131,7 +131,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 3135f466a297d8..90a6cff5cb1a93 100644
--- a/apps/vr-tests/src/stories/Dialog.stories.tsx
+++ b/apps/vr-tests/src/stories/Dialog.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorTall } from '../utilities';
 import {
@@ -28,13 +28,13 @@ storiesOf('Dialog', module)
   .addDecorator(FabricDecoratorTall)
   .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 4f3e483289054c..292fd1edb0c810 100644
--- a/apps/vr-tests/src/stories/DocumentCard.stories.tsx
+++ b/apps/vr-tests/src/stories/DocumentCard.stories.tsx
@@ -1,6 +1,7 @@
+/* eslint-disable @fluentui/max-len */
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator, FabricDecoratorFullWidth } from '../utilities';
 import {
@@ -88,13 +89,13 @@ storiesOf('DocumentCard', module)
   .addDecorator(FabricDecorator)
   .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
   // .addStory('Root', () => (
@@ -135,13 +136,13 @@ storiesOf('DocumentCard', module)
   .addDecorator(FabricDecoratorFullWidth)
   .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 b885ea010ac752..c489056d48fa36 100644
--- a/apps/vr-tests/src/stories/Dropdown.stories.tsx
+++ b/apps/vr-tests/src/stories/Dropdown.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import {
@@ -14,8 +14,8 @@ import {
 storiesOf('Dropdown', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Dropdown')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -27,7 +27,7 @@ storiesOf('Dropdown', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
@@ -182,8 +182,8 @@ storiesOf('Dropdown', module)
 storiesOf('Dropdown Disabled', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Dropdown')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -193,7 +193,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 849b096d6203ea..df23d085b29c2d 100644
--- a/apps/vr-tests/src/stories/Facepile.stories.tsx
+++ b/apps/vr-tests/src/stories/Facepile.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import {
@@ -56,13 +56,13 @@ storiesOf('Facepile', module)
   .addDecorator(FabricDecorator)
   .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} />, { rtl: 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 a126f6a1c553bf..f2981c150cfcf7 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 { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Panel, PanelType, Dialog, DialogType } from 'office-ui-fabric-react';
@@ -7,15 +7,15 @@ import { Panel, PanelType, Dialog, DialogType } from 'office-ui-fabric-react';
 storiesOf('FocusTrapZones', module)
   .addDecorator(FabricDecorator)
   .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',
@@ -34,6 +34,7 @@ storiesOf('FocusTrapZones', module)
             dialogContentProps={{
               type: DialogType.normal,
               title:
+                // eslint-disable-next-line @fluentui/max-len
                 'This dialog uses Modal, which also makes use of Layer and FocusTrapZone. Focus should be trapped in the dialog.',
               subText: "Focus will move back to the panel if you press 'OK' or 'Cancel'.",
             }}
diff --git a/apps/vr-tests/src/stories/FolderCover.stories.tsx b/apps/vr-tests/src/stories/FolderCover.stories.tsx
index f5abf6af698816..f835a5292b1063 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 '@uifabric/experiments';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { ISize, fitContentToBounds, Fabric } from 'office-ui-fabric-react';
 import { FabricDecorator } from '../utilities';
@@ -42,13 +42,13 @@ storiesOf('FolderCover', module)
   .addDecorator(FabricDecorator)
   .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 eea71fa1ef0024..c1b722b53ab39a 100644
--- a/apps/vr-tests/src/stories/Fonts.stories.tsx
+++ b/apps/vr-tests/src/stories/Fonts.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { createFontStyles } from 'office-ui-fabric-react/lib/Styling';
@@ -37,13 +37,13 @@ storiesOf('Fonts', module)
   .addDecorator(FabricDecorator)
   .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 ee1a724da5c241..a6cb8f629747bc 100644
--- a/apps/vr-tests/src/stories/GroupedList.stories.tsx
+++ b/apps/vr-tests/src/stories/GroupedList.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { GroupedList } from 'office-ui-fabric-react';
@@ -89,8 +89,8 @@ const onRenderCell = (nestingDepth: number, item: any, itemIndex: number) => {
 storiesOf('GroupedList', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-GroupHeader-expand')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -100,7 +100,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 94bdb7270a64f7..a74cb5e763c640 100644
--- a/apps/vr-tests/src/stories/HoverCard.stories.tsx
+++ b/apps/vr-tests/src/stories/HoverCard.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { HoverCard } from 'office-ui-fabric-react';
@@ -24,15 +24,15 @@ storiesOf('HoverCard', module)
   .addDecorator(FabricDecorator)
   .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 5ec563d7b8b81f..b8296585f58bda 100644
--- a/apps/vr-tests/src/stories/Icon.stories.tsx
+++ b/apps/vr-tests/src/stories/Icon.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Icon, IconType, getIconClassName, Fabric } from 'office-ui-fabric-react';
@@ -19,13 +19,13 @@ storiesOf('Icon', module)
   .addDecorator(FabricDecorator)
   .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 01655253e93d3e..f897be2fb22900 100644
--- a/apps/vr-tests/src/stories/Image.stories.tsx
+++ b/apps/vr-tests/src/stories/Image.stories.tsx
@@ -2,7 +2,7 @@
 import { storiesOf } from '@storybook/react';
 import { Image, ImageFit, Label, Layer, IImageProps } from 'office-ui-fabric-react';
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { FabricDecorator } from '../utilities';
 
 const img350x150 = 'http://placehold.it/350x150';
@@ -53,13 +53,13 @@ storiesOf('Image', module)
   .addDecorator(FabricDecorator)
   .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 5c03841826b129..d91e8b02b788f3 100644
--- a/apps/vr-tests/src/stories/Keytip.stories.tsx
+++ b/apps/vr-tests/src/stories/Keytip.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Keytip } from 'office-ui-fabric-react';
@@ -15,13 +15,13 @@ storiesOf('Keytip', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Root', () => <Keytip content={'A'} keySequences={['a']} visible={true} />)
   .addStory('Disabled', () => (
diff --git a/apps/vr-tests/src/stories/Label.stories.tsx b/apps/vr-tests/src/stories/Label.stories.tsx
index 80099a37fecabf..73be8526ada8f3 100644
--- a/apps/vr-tests/src/stories/Label.stories.tsx
+++ b/apps/vr-tests/src/stories/Label.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Label } from 'office-ui-fabric-react';
@@ -9,13 +9,13 @@ storiesOf('Label', module)
   .addDecorator(FabricDecorator)
   .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>, { rtl: 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 905865e849ebb1..2ee2e33d1f8c5f 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 { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Layer } from 'office-ui-fabric-react';
@@ -8,12 +8,12 @@ storiesOf('Layer', module)
   .addDecorator(FabricDecorator)
   .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>, { rtl: true });
diff --git a/apps/vr-tests/src/stories/Link.stories.tsx b/apps/vr-tests/src/stories/Link.stories.tsx
index d80cd90560943c..6c0fd526e4ea75 100644
--- a/apps/vr-tests/src/stories/Link.stories.tsx
+++ b/apps/vr-tests/src/stories/Link.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Link } from 'office-ui-fabric-react';
@@ -8,7 +8,7 @@ import { Link } from 'office-ui-fabric-react';
 storiesOf('Link', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
+    <StoryWright
       steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
@@ -27,7 +27,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 2d68f9d21fb7af..072caa170e638f 100644
--- a/apps/vr-tests/src/stories/List.stories.tsx
+++ b/apps/vr-tests/src/stories/List.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { List } from 'office-ui-fabric-react';
@@ -135,12 +135,12 @@ storiesOf('List', module)
   .addDecorator(FabricDecorator)
   .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} />, { rtl: true });
diff --git a/apps/vr-tests/src/stories/MessageBar.stories.tsx b/apps/vr-tests/src/stories/MessageBar.stories.tsx
index 6cd2b152559274..6e38f36966736a 100644
--- a/apps/vr-tests/src/stories/MessageBar.stories.tsx
+++ b/apps/vr-tests/src/stories/MessageBar.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { MessageBarButton, Link, MessageBar, MessageBarType } from 'office-ui-fabric-react';
@@ -15,13 +15,13 @@ storiesOf('MessageBar', module)
   .addDecorator(FabricDecorator)
   .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>, { rtl: true })
   .addStory(
diff --git a/apps/vr-tests/src/stories/Modal.stories.tsx b/apps/vr-tests/src/stories/Modal.stories.tsx
index 7f6cb6e31e08d7..5132ff7829ef3b 100644
--- a/apps/vr-tests/src/stories/Modal.stories.tsx
+++ b/apps/vr-tests/src/stories/Modal.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Modal } from 'office-ui-fabric-react/lib/Modal';
@@ -9,13 +9,13 @@ storiesOf('Modal', module)
   .addDecorator(FabricDecorator)
   .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 eddfc21d4ad367..fe1589d38a38d6 100644
--- a/apps/vr-tests/src/stories/Nav.stories.tsx
+++ b/apps/vr-tests/src/stories/Nav.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Nav, INavLink } from 'office-ui-fabric-react/lib/Nav';
@@ -90,8 +90,8 @@ const disabledLinks: INavLink[] = [
 storiesOf('Nav', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-Nav-compositeLink')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -101,7 +101,7 @@ storiesOf('Nav', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/NewSlider.stories.tsx b/apps/vr-tests/src/stories/NewSlider.stories.tsx
index 448625d6bb7399..a32224782eb462 100644
--- a/apps/vr-tests/src/stories/NewSlider.stories.tsx
+++ b/apps/vr-tests/src/stories/NewSlider.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorTall } from '../utilities';
 import { Slider } from '@uifabric/experiments';
@@ -14,15 +14,15 @@ const marks = [
 storiesOf('Experimental Slider', module)
   .addDecorator(FabricDecoratorTall)
   .addDecorator(story => (
-    <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>
   ))
   .addStory('With Tickmarks', () => (
     <div style={{ flexDirection: 'column', width: '300px', display: 'flex' }}>
diff --git a/apps/vr-tests/src/stories/OverflowSet.stories.tsx b/apps/vr-tests/src/stories/OverflowSet.stories.tsx
index bfa1e15fdeda40..29ea3beb36566b 100644
--- a/apps/vr-tests/src/stories/OverflowSet.stories.tsx
+++ b/apps/vr-tests/src/stories/OverflowSet.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Fabric, OverflowSet, IconButton, IOverflowSetItemProps } from 'office-ui-fabric-react';
@@ -13,8 +13,8 @@ const onRenderOverflowButton = (overflowItems: any[]) => {
 storiesOf('OverflowSet', module)
   .addDecorator(FabricDecorator)
   .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(FabricDecorator)
   .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 fa56ea680155e9..911019360af0a3 100644
--- a/apps/vr-tests/src/stories/Overlay.stories.tsx
+++ b/apps/vr-tests/src/stories/Overlay.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Overlay } from 'office-ui-fabric-react';
@@ -9,13 +9,13 @@ storiesOf('Overlay', module)
   .addDecorator(FabricDecorator)
   .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 fa0065502a1829..ea0ab5b7f67e08 100644
--- a/apps/vr-tests/src/stories/Panel.stories.tsx
+++ b/apps/vr-tests/src/stories/Panel.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Panel, PanelType, SearchBox } from 'office-ui-fabric-react';
@@ -14,13 +14,13 @@ storiesOf('Panel', module)
   .addDecorator(FabricDecorator)
   .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',
@@ -84,15 +84,15 @@ storiesOf('Panel', module)
 storiesOf('Panel', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <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 7575799e863c5a..27158fd060ef26 100644
--- a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
+++ b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import {
@@ -131,7 +131,8 @@ 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 suggestion items won't exist
+// Pickers that are 'disabled' are added before the Screener decorator because
+// css classes for suggestion items won't exist
 storiesOf('PeoplePicker', module)
   .addDecorator(FabricDecorator)
   .addStory('Normal disabled', () => (
@@ -203,8 +204,8 @@ storiesOf('PeoplePicker', module)
 storiesOf('PeoplePicker', module)
   .addDecorator(FabricDecorator)
   .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 +220,14 @@ storiesOf('PeoplePicker', module)
           pickerSuggestionsProps={suggestionProps}
         />
       </Fabric>
-    </Screener>
+    </StoryWright>
   ));
 
 storiesOf('PeoplePicker', module)
   .addDecorator(FabricDecorator)
   .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 +235,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 f9c54328d54cd3..80566131a2e104 100644
--- a/apps/vr-tests/src/stories/Persona.stories.tsx
+++ b/apps/vr-tests/src/stories/Persona.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { IPersonaProps, Persona, PersonaPresence, PersonaSize } from 'office-ui-fabric-react';
@@ -19,13 +19,13 @@ const examplePersona: IPersonaProps = {
 storiesOf('Persona', module)
   .addDecorator(FabricDecorator)
   .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 15b0ccb78698cd..b64fd93776d389 100644
--- a/apps/vr-tests/src/stories/Pivot.stories.tsx
+++ b/apps/vr-tests/src/stories/Pivot.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Pivot, PivotItem, PivotLinkSize, PivotLinkFormat } from 'office-ui-fabric-react';
@@ -9,13 +9,13 @@ storiesOf('Pivot', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story =>
     // prettier-ignore
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .end()}
     >
       {story()}
-    </Screener>,
+    </StoryWright>,
   )
   .addStory('Root', () => (
     <Pivot>
diff --git a/apps/vr-tests/src/stories/ProgressIndicator.stories.tsx b/apps/vr-tests/src/stories/ProgressIndicator.stories.tsx
index 0f4f2ae6f71561..35be39c913b7df 100644
--- a/apps/vr-tests/src/stories/ProgressIndicator.stories.tsx
+++ b/apps/vr-tests/src/stories/ProgressIndicator.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { ProgressIndicator } from 'office-ui-fabric-react';
@@ -9,13 +9,13 @@ storiesOf('ProgressIndicator', module)
   .addDecorator(FabricDecorator)
   .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 f623b8a5d31e71..ccf7f9d5d12407 100644
--- a/apps/vr-tests/src/stories/Rating.stories.tsx
+++ b/apps/vr-tests/src/stories/Rating.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Rating, RatingSize } from 'office-ui-fabric-react';
@@ -8,15 +8,15 @@ import { Rating, RatingSize } from 'office-ui-fabric-react';
 storiesOf('Rating', module)
   .addDecorator(FabricDecorator)
   .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} />, { rtl: true })
diff --git a/apps/vr-tests/src/stories/ResizeGroup.stories.tsx b/apps/vr-tests/src/stories/ResizeGroup.stories.tsx
index 043600529520eb..c78791203d44aa 100644
--- a/apps/vr-tests/src/stories/ResizeGroup.stories.tsx
+++ b/apps/vr-tests/src/stories/ResizeGroup.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { ResizeGroup, OverflowSet, DefaultButton } from 'office-ui-fabric-react';
@@ -28,8 +28,8 @@ const noop = () => null;
 storiesOf('ResizeGroup', module)
   .addDecorator(FabricDecorator)
   .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 07ea351b0b6d56..73f91c46676b7a 100644
--- a/apps/vr-tests/src/stories/ScrollablePane.DetailsList.stories.tsx
+++ b/apps/vr-tests/src/stories/ScrollablePane.DetailsList.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import {
@@ -199,8 +199,8 @@ function onRenderDetailsFooter(props: IDetailsFooterProps): JSX.Element {
 storiesOf('ScrollablePane Details List', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
           "document.getElementsByClassName('ms-ScrollablePane--contentContainer')[0].scrollTop = 2",
@@ -219,7 +219,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 ad016a8bc468e7..8cc2bb69c99aa7 100644
--- a/apps/vr-tests/src/stories/ScrollablePane.GroupedDetailsList.stories.tsx
+++ b/apps/vr-tests/src/stories/ScrollablePane.GroupedDetailsList.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import {
@@ -237,8 +237,8 @@ const cropTo = { cropTo: '.testWrapper' };
 storiesOf('ScrollablePane Grouped Details List', module)
   .addDecorator(FabricDecorator)
   .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)
@@ -278,6 +278,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 23cb4521bf5fc6..91dd29fb2d2215 100644
--- a/apps/vr-tests/src/stories/ScrollablePane.stories.tsx
+++ b/apps/vr-tests/src/stories/ScrollablePane.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Fabric, ScrollablePane, StickyPositionType, Sticky } from 'office-ui-fabric-react';
@@ -45,8 +45,8 @@ function createContentArea(index: number) {
 storiesOf('ScrollablePane', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .executeScript(
           "document.getElementsByClassName('ms-ScrollablePane--contentContainer')[0].scrollTop = 9999",
@@ -55,7 +55,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 f4283d0eed66e3..aa83f8c626e59c 100644
--- a/apps/vr-tests/src/stories/SearchBox.stories.tsx
+++ b/apps/vr-tests/src/stories/SearchBox.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { SearchBox, Fabric } from 'office-ui-fabric-react';
 import { FabricDecorator } from '../utilities';
@@ -10,8 +10,8 @@ import { FabricDecorator } from '../utilities';
 storiesOf('SearchBox', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .click('.ms-SearchBox-field')
         .hover('.ms-SearchBox-field')
@@ -19,7 +19,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 f6423118253dc6..00f31b5a336bba 100644
--- a/apps/vr-tests/src/stories/Separator.stories.tsx
+++ b/apps/vr-tests/src/stories/Separator.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Separator, mergeStyles } from 'office-ui-fabric-react';
@@ -16,9 +16,9 @@ const horizontalStyles = mergeStyles({
 storiesOf('Separator', module)
   .addDecorator(FabricDecorator)
   .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 ca79fe0294c06d..0b4a313b827d6f 100644
--- a/apps/vr-tests/src/stories/Shimmer.stories.tsx
+++ b/apps/vr-tests/src/stories/Shimmer.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import {
@@ -30,13 +30,13 @@ storiesOf('Shimmer', module)
   .addDecorator(FabricDecorator)
   .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 3b1e3e37bd6410..7fb5f638fa5d4e 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 '@uifabric/experiments';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Fabric } from 'office-ui-fabric-react';
@@ -46,9 +46,9 @@ const SignalExample: React.FunctionComponent<ISignalExampleProps> = (
 storiesOf('Signals', module)
   .addDecorator(FabricDecorator)
   .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 49d15df979bf69..ac132818741105 100644
--- a/apps/vr-tests/src/stories/Slider.stories.tsx
+++ b/apps/vr-tests/src/stories/Slider.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps, Step } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorTall } from '../utilities';
 import { Slider } from 'office-ui-fabric-react';
@@ -8,15 +8,15 @@ import { Slider } from 'office-ui-fabric-react';
 storiesOf('Slider', module)
   .addDecorator(FabricDecoratorTall)
   .addDecorator(story => (
-    <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>
   ))
   .addStory(
     'Root',
diff --git a/apps/vr-tests/src/stories/SpinButton.stories.tsx b/apps/vr-tests/src/stories/SpinButton.stories.tsx
index db51e1efb2bb57..24e91999f49d3e 100644
--- a/apps/vr-tests/src/stories/SpinButton.stories.tsx
+++ b/apps/vr-tests/src/stories/SpinButton.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorFixedWidth, FabricDecorator } from '../utilities';
 import {
@@ -29,8 +29,8 @@ const iconProps = { iconName: 'IncreaseIndentLegacy' };
 storiesOf('SpinButton', module)
   .addDecorator(FabricDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-spinButton-input')
         .snapshot('hover input', { cropTo: '.testWrapper' })
@@ -44,7 +44,7 @@ storiesOf('SpinButton', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => (
     <Fabric>
@@ -70,9 +70,9 @@ storiesOf('SpinButton', module)
 storiesOf('SpinButton', module)
   .addDecorator(FabricDecorator)
   .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',
diff --git a/apps/vr-tests/src/stories/Spinner.stories.tsx b/apps/vr-tests/src/stories/Spinner.stories.tsx
index 6b97db88cf9bc7..a848f575b4c069 100644
--- a/apps/vr-tests/src/stories/Spinner.stories.tsx
+++ b/apps/vr-tests/src/stories/Spinner.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react';
@@ -8,9 +8,9 @@ import { Spinner, SpinnerSize } from 'office-ui-fabric-react';
 storiesOf('Spinner', module)
   .addDecorator(FabricDecorator)
   .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 016c128e251a49..3672caf51efb73 100644
--- a/apps/vr-tests/src/stories/Stack.stories.tsx
+++ b/apps/vr-tests/src/stories/Stack.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorFullWidth } from '../utilities';
 import { Fabric, mergeStyleSets, DefaultPalette, IStyle, Stack } from 'office-ui-fabric-react';
@@ -72,14 +72,14 @@ storiesOf('Stack', module)
   .addDecorator(FabricDecoratorFullWidth)
   .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 fcd1891c3ef9b0..cfc3903d2a6979 100644
--- a/apps/vr-tests/src/stories/Sticky.Breadcrumb.stories.tsx
+++ b/apps/vr-tests/src/stories/Sticky.Breadcrumb.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import {
@@ -166,6 +166,7 @@ export class ScrollablePaneStickyBreadcrumbExample extends React.Component<{}, {
                 selectionPreservedOnEmptyClick={true}
                 ariaLabelForSelectionColumn="Toggle selection"
                 ariaLabelForSelectAllCheckbox="Toggle selection for all items"
+                // eslint-disable-next-line no-alert
                 onItemInvoked={item => alert(`Item invoked: ${item.name}`)}
               />
             </MarqueeSelection>
@@ -223,8 +224,8 @@ const cropTo = { cropTo: '.testWrapper' };
 storiesOf('Sticky breadcrumb and sticky details list header', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', cropTo)
         .executeScript(`${getElement}.scrollTop = 5`)
         .snapshot(
@@ -244,7 +245,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 2376f4fa81b2fc..6963a7bcd4c71f 100644
--- a/apps/vr-tests/src/stories/Suggestions.stories.tsx
+++ b/apps/vr-tests/src/stories/Suggestions.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { DevOnlyStoryHeader } from '../utilities';
@@ -105,6 +105,7 @@ export class SimpleSuggestionsExample extends React.Component<{}, { Provinces: P
               makeProvinceIntoSuggestion(this.state.Provinces[key]),
             )}
             onSuggestionClick={(_: any, province: Province) => {
+              // eslint-disable-next-line no-alert
               alert(`clicked ${province.name} `);
             }}
             onRenderNoResultFound={NoResultFound}
@@ -131,8 +132,8 @@ export class SimpleSuggestionsExample extends React.Component<{}, { Provinces: P
 storiesOf('(Dev-Only) Suggestions', module)
   .addDecorator(FabricDecorator)
   .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' })
@@ -143,7 +144,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 f86fa658021028..41c3a1842f7295 100644
--- a/apps/vr-tests/src/stories/SwatchColorPicker.stories.tsx
+++ b/apps/vr-tests/src/stories/SwatchColorPicker.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { SwatchColorPicker, ISwatchColorPickerProps } from 'office-ui-fabric-react';
@@ -18,8 +18,8 @@ const props: ISwatchColorPickerProps = {
 storiesOf('SwatchColorPicker', module)
   .addDecorator(FabricDecorator)
   .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')",
@@ -43,7 +43,7 @@ storiesOf('SwatchColorPicker', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Circle', () => <SwatchColorPicker {...props} />, { rtl: 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 1916aecf234ee3..6e3029e267dd95 100644
--- a/apps/vr-tests/src/stories/TagPicker.stories.tsx
+++ b/apps/vr-tests/src/stories/TagPicker.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 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 { FabricDecorator, FabricDecoratorFixedWidth } from '../utilities';
 import { TagPicker, Fabric, ITag } from 'office-ui-fabric-react';
@@ -36,8 +36,8 @@ storiesOf('TagPicker', module)
 storiesOf('TagPicker', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .click('.ms-BasePicker-input')
         .setValue('.ms-BasePicker-input', 'a')
@@ -48,7 +48,7 @@ storiesOf('TagPicker', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Root', () => (
     <TagPicker
@@ -86,9 +86,9 @@ storiesOf('TagPicker', module)
 storiesOf('TagPicker', module)
   .addDecorator(FabricDecoratorFixedWidth)
   .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
@@ -108,8 +108,8 @@ storiesOf('TagPicker', module)
 storiesOf('TagItem', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-TagItem')
         .snapshot('Tag Item Hover', { cropTo: '.testWrapper' })
@@ -122,7 +122,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 df54322822d606..8862b633a37799 100644
--- a/apps/vr-tests/src/stories/TeachingBubble.stories.tsx
+++ b/apps/vr-tests/src/stories/TeachingBubble.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorTall } from '../utilities';
 import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
@@ -9,11 +9,9 @@ import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHi
 storiesOf('TeachingBubble', module)
   .addDecorator(FabricDecoratorTall)
   .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 6a0b33eaf6f6c8..3a5fe6805e8fd4 100644
--- a/apps/vr-tests/src/stories/Text.stories.tsx
+++ b/apps/vr-tests/src/stories/Text.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Text } from 'office-ui-fabric-react';
@@ -8,9 +8,9 @@ import { Text } from 'office-ui-fabric-react';
 storiesOf('Text', module)
   .addDecorator(FabricDecorator)
   .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>, { rtl: true })
   .addStory('Wrap', () => (
diff --git a/apps/vr-tests/src/stories/TextField.stories.tsx b/apps/vr-tests/src/stories/TextField.stories.tsx
index 7b55e3fe1572b8..80c52a97c2ba83 100644
--- a/apps/vr-tests/src/stories/TextField.stories.tsx
+++ b/apps/vr-tests/src/stories/TextField.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorFixedWidth } from '../utilities';
 import { TextField } from 'office-ui-fabric-react';
@@ -8,8 +8,8 @@ import { TextField } from 'office-ui-fabric-react';
 storiesOf('TextField', module)
   .addDecorator(FabricDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('.ms-TextField-field')
         .snapshot('hover', { cropTo: '.testWrapper' })
@@ -19,7 +19,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 837862370aa374..e9d7fd9a7c1396 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 { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { loadTheme, createTheme, Customizer } from 'office-ui-fabric-react';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
@@ -9,9 +9,9 @@ import { FabricDecorator } from '../utilities/index';
 storiesOf('ThemeProvider', module)
   .addDecorator(FabricDecorator)
   .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', () => (
@@ -82,8 +82,8 @@ const LoadThemeTestButton: React.FunctionComponent<{}> = props => {
 storiesOf('ThemeProvider with loadTheme', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .click('.testLoadTheme')
         .snapshot('global theme changed', { cropTo: '.testWrapper' })
@@ -91,7 +91,7 @@ storiesOf('ThemeProvider with loadTheme', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Use contextual theme over global theme if defined', () => (
     <ThemeProvider>
@@ -114,9 +114,9 @@ storiesOf('ThemeProvider with loadTheme', module)
 storiesOf('ThemeProvider with Customizer', module)
   .addDecorator(FabricDecorator)
   .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 77099810e44d5f..5b63eec3da655e 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 '@uifabric/experiments';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { ISize, fitContentToBounds, Fabric } from 'office-ui-fabric-react';
 import { FabricDecorator } from '../utilities';
@@ -132,13 +132,13 @@ storiesOf('Tile', module)
   .addDecorator(FabricDecorator)
   .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
@@ -217,15 +217,15 @@ storiesOf('MediaTile', module)
   .addDecorator(FabricDecorator)
   .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 ad076037e624f2..7bd772962da157 100644
--- a/apps/vr-tests/src/stories/Toggle.stories.tsx
+++ b/apps/vr-tests/src/stories/Toggle.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { IToggleProps, Toggle } from 'office-ui-fabric-react';
@@ -14,9 +14,9 @@ const baseProps: IToggleProps = {
 storiesOf('Toggle', module)
   .addDecorator(FabricDecorator)
   .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} />, { rtl: true })
   .addStory('Unchecked', () => <Toggle {...baseProps} defaultChecked={false} />, { rtl: true })
diff --git a/apps/vr-tests/src/stories/Tooltip.stories.tsx b/apps/vr-tests/src/stories/Tooltip.stories.tsx
index 8ff5c78a42167a..b277bd5055809a 100644
--- a/apps/vr-tests/src/stories/Tooltip.stories.tsx
+++ b/apps/vr-tests/src/stories/Tooltip.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator, FabricDecoratorFixedWidth } from '../utilities';
 import { TooltipHost } from 'office-ui-fabric-react';
@@ -8,15 +8,15 @@ import { TooltipHost } from 'office-ui-fabric-react';
 storiesOf('Tooltip', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <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 }}>
@@ -27,8 +27,8 @@ storiesOf('Tooltip', module)
 storiesOf('Tooltip - Multiple', module)
   .addDecorator(FabricDecoratorFixedWidth)
   .addDecorator(story => (
-    <Screener
-      steps={new Screener.Steps()
+    <StoryWright
+      steps={new Steps()
         .hover('#outerTooltip')
         .wait(200)
         .snapshot('hover outer')
@@ -38,7 +38,7 @@ storiesOf('Tooltip - Multiple', module)
         .end()}
     >
       {story()}
-    </Screener>
+    </StoryWright>
   ))
   .addStory('Two Tooltips', () => (
     <div>

From 5715c7a3de085cd85a05de1f1faedcd61ab6b5d8 Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Fri, 16 Dec 2022 03:12:24 -0500
Subject: [PATCH 3/9] chore: remove screener config files from vr-tests package

---
 apps/vr-tests/screener.config.js       | 46 --------------------------
 apps/vr-tests/screener.local.config.js |  8 -----
 2 files changed, 54 deletions(-)
 delete mode 100644 apps/vr-tests/screener.config.js
 delete mode 100644 apps/vr-tests/screener.local.config.js

diff --git a/apps/vr-tests/screener.config.js b/apps/vr-tests/screener.config.js
deleted file mode 100644
index f2f836667fdc31..00000000000000
--- a/apps/vr-tests/screener.config.js
+++ /dev/null
@@ -1,46 +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 '';
-}
-
-const baseBranch = process.env.SYSTEM_PULLREQUEST_TARGETBRANCH
-  ? process.env.SYSTEM_PULLREQUEST_TARGETBRANCH.replace(/^refs\/heads\//, '')
-  : '7.0';
-
-// https://github.com/screener-io/screener-storybook#config-options
-const config = {
-  projectRepo: 'microsoft/fluentui',
-  storybookConfigDir: '.storybook',
-  apiKey: process.env.SCREENER_API_KEY,
-  resolution: '1024x768',
-  baseBranch,
-  failureExitCode: 0,
-  alwaysAcceptBaseBranch: true,
-  ...(process.env.BUILD_SOURCEBRANCH && process.env.BUILD_SOURCEBRANCH.indexOf('refs/pull') > -1
-    ? { commit: getCurrentHash() }
-    : null),
-};
-console.log('Screener config: ' + JSON.stringify({ ...config, apiKey: '...' }, null, 2));
-
-module.exports = config;
diff --git a/apps/vr-tests/screener.local.config.js b/apps/vr-tests/screener.local.config.js
deleted file mode 100644
index e59ddb21c49fe1..00000000000000
--- a/apps/vr-tests/screener.local.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
-  projectRepo: 'microsoft/fluentui',
-  storybookConfigDir: '.storybook',
-  apiKey: process.env.SCREENER_API_KEY,
-  resolution: '1024x768',
-  baseBranch: '7.0',
-  branch: 'localTest',
-};

From 34a45f19187bcaa1fbd24c5be04c760172bcaa26 Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Fri, 16 Dec 2022 03:12:52 -0500
Subject: [PATCH 4/9] chore: delete unneeded convert script

---
 apps/vr-tests/convertStoriesToStoryWright.sh | 29 --------------------
 1 file changed, 29 deletions(-)
 delete mode 100755 apps/vr-tests/convertStoriesToStoryWright.sh

diff --git a/apps/vr-tests/convertStoriesToStoryWright.sh b/apps/vr-tests/convertStoriesToStoryWright.sh
deleted file mode 100755
index 41fb5038110d40..00000000000000
--- a/apps/vr-tests/convertStoriesToStoryWright.sh
+++ /dev/null
@@ -1,29 +0,0 @@
-#!/usr/bin/env bash
-
-#!/usr/bin/env bash
-
-find ./src -type f |while read fname; do
-  impor=""
-  if grep -q "screener-storybook" $fname; then
-    echo "$fname"
-    if grep -q "<Screener" $fname; then
-      impor="${impor}StoryWright, "
-    fi
-    if grep -q "Steps(" $fname; then
-      impor="${impor}Steps, "
-    fi
-    if grep "Step " $fname; then
-      impor="${impor}Step , "
-    fi
-    if grep "Keys " $fname; then
-      impor="${impor}Keys , "
-    fi
-  fi
-  impor="${impor%??}"
-  sed -i "s/import.*screener'/import { ${impor} } from 'storywright'/g" $fname
-done
-
-find ./src -type f | xargs sed -i "s/Screener.Steps/Steps/g"
-find ./src -type f | xargs sed -i "s/<Screener/<StoryWright/g"
-find ./src -type f | xargs sed -i "s/Screener>/StoryWright>/g"
-

From 6f84a1a2b51f546d470c82d5787a8c84fd655134 Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Fri, 16 Dec 2022 03:16:54 -0500
Subject: [PATCH 5/9] chore: remove screener related deps and scripts

---
 apps/vr-tests/package.json  | 4 ----
 apps/vr-tests/tsconfig.json | 2 +-
 package.json                | 3 +--
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
index 830fa3f6ff2adc..7ad29e3840a2ed 100644
--- a/apps/vr-tests/package.json
+++ b/apps/vr-tests/package.json
@@ -10,8 +10,6 @@
     "code-style": "just-scripts code-style",
     "convert": "bash convertStoriesToStoryWright.sh",
     "just": "just-scripts",
-    "screener": "screener-storybook --conf screener.config.js",
-    "screener:local": "screener-storybook --conf screener.local.config.js --debug",
     "start": "start-storybook --port 5555",
     "test": "just-scripts test",
     "test:component": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true",
@@ -52,8 +50,6 @@
     "file-loader": "^0.11.1",
     "postcss-loader": "^3.0.0",
     "raw-loader": "^0.5.1",
-    "screener-runner": "^0.10.43",
-    "screener-storybook": "^0.18.6",
     "storybook-readme": "^3.3.0",
     "storywright": "0.0.26-beta.1",
     "style-loader": "^1.2.1",
diff --git a/apps/vr-tests/tsconfig.json b/apps/vr-tests/tsconfig.json
index 1471f827113a30..639fba07ffdf2a 100644
--- a/apps/vr-tests/tsconfig.json
+++ b/apps/vr-tests/tsconfig.json
@@ -14,7 +14,7 @@
     "noImplicitAny": true,
     "moduleResolution": "node",
     "preserveConstEnums": true,
-    "types": ["webpack-env", "@storybook/react", "screener-storybook"]
+    "types": ["webpack-env", "@storybook/react"]
   },
   "include": ["src"]
 }
diff --git a/package.json b/package.json
index afedc08288a1bd..35622ad0c6be22 100644
--- a/package.json
+++ b/package.json
@@ -52,8 +52,7 @@
     "test": "lage test --verbose",
     "update-api": "cd packages/office-ui-fabric-react && yarn update-api",
     "update-snapshots": "lage update-snapshots --verbose",
-    "update-a11y": "cd apps/a11y-tests && yarn update-snapshots",
-    "vrtest": "cd apps && cd vr-tests && yarn screener"
+    "update-a11y": "cd apps/a11y-tests && yarn update-snapshots"
   },
   "devDependencies": {
     "beachball": "1.53.0",

From fa8f1ea4e31f0cb33ad1919a96bd4f45afdd4f1c Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Fri, 16 Dec 2022 03:18:41 -0500
Subject: [PATCH 6/9] chore: remove screener from lage config

---
 lage.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lage.config.js b/lage.config.js
index 110402d1cab80b..dcc5febcf29871 100644
--- a/lage.config.js
+++ b/lage.config.js
@@ -4,7 +4,6 @@ module.exports = {
     build: ['^build'],
     'build:info': [],
     bundle: ['build'],
-    screener: ['build'],
     lint: ['build'],
     clean: [],
     test: ['build'],

From bb9cabd3f1bf0cad0553dc905da72cc87fd5c7d0 Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Fri, 16 Dec 2022 03:23:25 -0500
Subject: [PATCH 7/9] chore: update yarn.lock file

---
 yarn.lock | 378 ++++--------------------------------------------------
 1 file changed, 26 insertions(+), 352 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 8581f47c5f155b..26256b4833ece7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3662,7 +3662,7 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.13.tgz#ccebcdb990bd6139cd16e84c39dc2fb1023ca90c"
   integrity sha512-pMCcqU2zT4TjqYFrWtYHKal7Sl30Ims6ulZ4UFXxI4xbtQqK/qqKwkDoBFCfooRqqmRu9vY3xaJRwxSh673aYg==
 
-"@types/node@8.10.54", "@types/node@^8.0.19":
+"@types/node@8.10.54":
   version "8.10.54"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.54.tgz#1c88eb253ac1210f1a5876953fb70f7cc4928402"
   integrity sha512-kaYyLYf6ICn6/isAyD4K1MyWWd5Q3JgH6bnMN089LUx88+s4W8GvK9Q6JMBVu5vsFFp7pMdSxdKmlBXwH/VFRg==
@@ -4363,16 +4363,6 @@ ajv@^4.9.2:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.1.0:
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
-  integrity sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=
-  dependencies:
-    co "^4.6.0"
-    fast-deep-equal "^1.0.0"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.3.0"
-
 ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.12.4, ajv@^6.12.5, ajv@^6.5.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -4819,12 +4809,7 @@ async-settle@^1.0.0:
   dependencies:
     async-done "^1.2.2"
 
-async@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
-  integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
-
-async@^2.1.4, async@^2.3.0, async@^2.5.0, async@^2.6.1, async@^2.6.2:
+async@^2.1.4, async@^2.5.0, async@^2.6.1, async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
   integrity sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==
@@ -4889,7 +4874,7 @@ aws-sign2@~0.7.0:
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
   integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
 
-aws4@^1.6.0, aws4@^1.8.0:
+aws4@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
@@ -5557,7 +5542,7 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
   integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
 
-binary@^0.3.0, binary@~0.3.0:
+binary@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/binary/-/binary-0.3.0.tgz#9f60553bc5ce8c3386f3b553cff47462adecaa79"
   integrity sha1-n2BVO8XOjDOG87VTz/R0Yq3sqnk=
@@ -5586,7 +5571,7 @@ bluebird@^3.0.6, bluebird@^3.3.5, bluebird@^3.5.1, bluebird@^3.5.3, bluebird@^3.
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-bluebird@~3.4.1, bluebird@~3.4.6:
+bluebird@~3.4.1:
   version "3.4.7"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.7.tgz#f72d760be09b7f76d08ed8fae98b289a8d05fab3"
   integrity sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM=
@@ -6553,16 +6538,11 @@ colors@1.0.3:
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
   integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=
 
-colors@>=0.6.0, colors@^1.1.2:
+colors@^1.1.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
   integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
 
-colors@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
-  integrity sha1-FopHAXVran9RoSzgyXv6KMCE7WM=
-
 colors@~1.2.1:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.2.5.tgz#89c7ad9a374bc030df8013241f68136ed8835afc"
@@ -6576,7 +6556,7 @@ columnify@^1.5.4:
     strip-ansi "^3.0.0"
     wcwidth "^1.0.0"
 
-combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.5, combined-stream@~1.0.6:
+combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -6588,7 +6568,7 @@ comma-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.7.tgz#419cd7fb3258b1ed838dc0953167a25e152f5b59"
   integrity sha512-Jrx3xsP4pPv4AwJUDWY9wOXGtwPXARej6Xd99h4TUGotmf8APuquKMpK+dnD3UgyxK7OEWaisjZz+3b5jtL6xQ==
 
-commander@2.9.0, commander@~2.9.0:
+commander@2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
   integrity sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=
@@ -6645,7 +6625,7 @@ compressible@~2.0.16:
   dependencies:
     mime-db ">= 1.40.0 < 2"
 
-compression@^1.7.2, compression@^1.7.4, compression@~1.7.0:
+compression@^1.7.2, compression@^1.7.4:
   version "1.7.4"
   resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"
   integrity sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==
@@ -6713,16 +6693,6 @@ connect-history-api-fallback@^1.6.0:
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
   integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
-connect@~3.6.0:
-  version "3.6.6"
-  resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.6.tgz#09eff6c55af7236e137135a72574858b6786f524"
-  integrity sha1-Ce/2xVr3I24TcTWnJXSFi2eG9SQ=
-  dependencies:
-    debug "2.6.9"
-    finalhandler "1.1.0"
-    parseurl "~1.3.2"
-    utils-merge "1.0.1"
-
 console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@@ -7494,19 +7464,6 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
-decompress-zip@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/decompress-zip/-/decompress-zip-0.3.2.tgz#f3fa2841666abce394604f4a9e8a7085c202d464"
-  integrity sha512-Ab1QY4LrWMrUuo53lLnmGOby7v8ryqxJ+bKibKSiPisx+25mhut1dScVBXAYx14i/PqSrFZvR2FRRazhLbvL+g==
-  dependencies:
-    binary "^0.3.0"
-    graceful-fs "^4.1.3"
-    mkpath "^0.1.0"
-    nopt "^3.0.1"
-    q "^1.1.2"
-    readable-stream "^1.1.8"
-    touch "0.0.3"
-
 dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
@@ -8067,7 +8024,7 @@ emotion-theming@^10.0.19:
     "@emotion/weak-memoize" "0.2.5"
     hoist-non-react-statics "^3.3.0"
 
-encodeurl@~1.0.1, encodeurl@~1.0.2:
+encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
@@ -8617,11 +8574,6 @@ event-target-shim@^5.0.0:
   resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
   integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
-eventemitter3@1.x.x:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
-  integrity sha1-HIaZHYFq0eUEdQ5zh0Ik7PO+xQg=
-
 eventemitter3@^3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
@@ -8823,7 +8775,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@^3.0.0, extend@^3.0.2, extend@~3.0.1, extend@~3.0.2:
+extend@^3.0.0, extend@^3.0.2, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -8876,11 +8828,6 @@ fake-tag@^1.0.0:
   resolved "https://registry.yarnpkg.com/fake-tag/-/fake-tag-1.0.1.tgz#1d59da482240a02bd83500ca98976530ed154b0d"
   integrity sha512-qmewZoBpa71mM+y6oxXYW/d1xOYQmeIvnEXAt1oCmdP0sqcogWYLepR87QL1jQVLSVMVYDq2cjY6ec/Wu8/4pg==
 
-fast-deep-equal@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
-  integrity sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=
-
 fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
@@ -9100,19 +9047,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-finalhandler@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.0.tgz#ce0b6855b45853e791b2fcc680046d88253dd7f5"
-  integrity sha1-zgtoVbRYU+eRsvzGgARtiCU91/U=
-  dependencies:
-    debug "2.6.9"
-    encodeurl "~1.0.1"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    parseurl "~1.3.2"
-    statuses "~1.3.1"
-    unpipe "~1.0.0"
-
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -9397,7 +9331,7 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-form-data@~2.3.1, form-data@~2.3.2:
+form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
   integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
@@ -9673,7 +9607,7 @@ get-pkg-repo@^1.0.0:
     parse-github-repo-url "^1.3.0"
     through2 "^2.0.0"
 
-get-port@^3.2.0, get-port@~3.2.0:
+get-port@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
   integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
@@ -10015,7 +9949,7 @@ got@^6.7.1:
     unzip-response "^2.0.1"
     url-parse-lax "^1.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.2.3:
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.3:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
@@ -10088,14 +10022,6 @@ har-schema@^2.0.0:
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
   integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
 
-har-validator@~5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
-  integrity sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=
-  dependencies:
-    ajv "^5.1.0"
-    har-schema "^2.0.0"
-
 har-validator@~5.1.3:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
@@ -10266,11 +10192,6 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoek@4.x.x:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
-  integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==
-
 hoek@5.x.x:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-5.0.4.tgz#0f7fa270a1cafeb364a4b2ddfaa33f864e4157da"
@@ -10460,14 +10381,6 @@ http-proxy@^1.17.0:
     follow-redirects "^1.0.0"
     requires-port "^1.0.0"
 
-http-proxy@~1.16.2:
-  version "1.16.2"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742"
-  integrity sha1-Bt/ykpUr9k2+hHH6nfcwZtTzd0I=
-  dependencies:
-    eventemitter3 "1.x.x"
-    requires-port "1.x.x"
-
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -11336,11 +11249,6 @@ isbinaryfile@^4.0.2:
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
   integrity sha512-ORrEy+SNVqUhrCaal4hA4fBzhggQQ+BaLntyPOdoEiwlKZW9BZiJXjg3RMiruE4tPEI3pyVPpySHQF/dKWperg==
 
-isemail@2.x.x:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isemail/-/isemail-2.2.1.tgz#0353d3d9a62951080c262c2aa0a42b8ea8e9e2a6"
-  integrity sha1-A1PT2aYpUQgMJiwqoKQrjqjp4qY=
-
 isemail@3.x.x:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/isemail/-/isemail-3.2.0.tgz#59310a021931a9fb06bbb51e155ce0b3f236832c"
@@ -11428,11 +11336,6 @@ istanbul-reports@^2.2.6:
   dependencies:
     html-escaper "^2.0.0"
 
-items@2.x.x:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/items/-/items-2.1.2.tgz#0849354595805d586dac98e7e6e85556ea838558"
-  integrity sha512-kezcEqgB97BGeZZYtX/MA8AG410ptURstvnz5RAgyFZ8wQFPMxHY8GpTq+/ZHKT3frSlIthUq7EvLt9xn3TvXg==
-
 java-properties@^0.2.9:
   version "0.2.10"
   resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-0.2.10.tgz#2551560c25fa1ad94d998218178f233ad9b18f60"
@@ -11911,27 +11814,6 @@ joi@^13.0.0:
     isemail "3.x.x"
     topo "3.x.x"
 
-joi@~10.0.2:
-  version "10.0.6"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-10.0.6.tgz#dbacbbf30b4dbb9d28ef6716d82c4580bb04c096"
-  integrity sha1-26y78wtNu50o72cW2CxFgLsEwJY=
-  dependencies:
-    hoek "4.x.x"
-    isemail "2.x.x"
-    items "2.x.x"
-    topo "2.x.x"
-
-joi@~9.2.0:
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-9.2.0.tgz#3385ac790192130cbe230e802ec02c9215bbfeda"
-  integrity sha1-M4WseQGSEwy+Iw6ALsAskhW7/to=
-  dependencies:
-    hoek "4.x.x"
-    isemail "2.x.x"
-    items "2.x.x"
-    moment "2.x.x"
-    topo "2.x.x"
-
 jpeg-js@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.4.tgz#a9f1c6f1f9f0fa80cdb3484ed9635054d28936aa"
@@ -12044,11 +11926,6 @@ json-parse-better-errors@^1.0.0, json-parse-better-errors@^1.0.1, json-parse-bet
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
-json-schema-traverse@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
-  integrity sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=
-
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -12609,11 +12486,6 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lock@^0.1.2:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/lock/-/lock-0.1.4.tgz#fec7deaef17e7c3a0a55e1da042803e25d91745d"
-  integrity sha1-/sfervF+fDoKVeHaBCgD4l2RdF0=
-
 lodash-es@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
@@ -12785,7 +12657,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@~4.17.10, lodash@~4.17.13, lodash@~4.17.15:
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@~4.17.10, lodash@~4.17.15:
   version "4.17.19"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
@@ -13247,7 +13119,7 @@ mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
   dependencies:
     mime-db "1.40.0"
 
-mime@1.6.0, mime@^1.2.9:
+mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -13324,11 +13196,6 @@ minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-minimist@~0.0.1:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
-  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
-
 minipass-collect@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
@@ -13417,7 +13284,7 @@ mkdirp-classic@^0.5.2:
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
   integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
 
-mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mkdirp@0.5.1, mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
@@ -13436,11 +13303,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mkpath@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/mkpath/-/mkpath-0.1.0.tgz#7554a6f8d871834cc97b5462b122c4c124d6de91"
-  integrity sha1-dVSm+Nhxg0zJe1RisSLEwSTW3pE=
-
 mocha@^3.3.0:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/mocha/-/mocha-3.5.3.tgz#1e0480fe36d2da5858d1eb6acc38418b26eaa20d"
@@ -13464,7 +13326,7 @@ modify-values@^1.0.0:
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
-moment@2.x.x, moment@^2.18.1, moment@^2.22.1:
+moment@^2.18.1, moment@^2.22.1:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
@@ -13893,16 +13755,7 @@ node-sass@^4.14.1:
     stdout-stream "^1.4.0"
     "true-case-path" "^1.0.2"
 
-node-static@~0.7.11:
-  version "0.7.11"
-  resolved "https://registry.yarnpkg.com/node-static/-/node-static-0.7.11.tgz#60120d349f3cef533e4e820670057eb631882e7f"
-  integrity sha512-zfWC/gICcqb74D9ndyvxZWaI1jzcoHmf4UTHWQchBNuNMxdBLJMDiUgZ1tjGLEIe/BMhj2DxKD8HOuc2062pDQ==
-  dependencies:
-    colors ">=0.6.0"
-    mime "^1.2.9"
-    optimist ">=0.3.4"
-
-"nopt@2 || 3", nopt@^3.0.1:
+"nopt@2 || 3":
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
   integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
@@ -13917,13 +13770,6 @@ nopt@^4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
-nopt@~1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
-  integrity sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
-  dependencies:
-    abbrev "1"
-
 normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.4.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -14072,11 +13918,6 @@ nwsapi@^2.0.7:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
   integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
 
-oauth-sign@~0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
-  integrity sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=
-
 oauth-sign@~0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
@@ -14326,14 +14167,6 @@ opn@^5.3.0, opn@^5.5.0:
   dependencies:
     is-wsl "^1.1.0"
 
-optimist@>=0.3.4:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
-  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
-  dependencies:
-    minimist "~0.0.1"
-    wordwrap "~0.0.2"
-
 optionator@^0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
@@ -15070,15 +14903,6 @@ portfinder@^1.0.25:
     debug "^3.1.1"
     mkdirp "^0.5.1"
 
-portfinder@~1.0.10:
-  version "1.0.20"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
-  integrity sha512-Yxe4mTyDzTd59PZJY4ojZR8F+E5e97iq2ZOHPz3HDgSvYC5siNad2tLooQ5y5QHyQhc3xVqvyk/eNA3wuoa7Sw==
-  dependencies:
-    async "^1.5.2"
-    debug "^2.2.0"
-    mkdirp "0.5.x"
-
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -15545,12 +15369,12 @@ punycode@2.x.x, punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-punycode@^1.2.4, punycode@^1.4.1:
+punycode@^1.2.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
-puppeteer@^1.13.0, puppeteer@~1.17.0:
+puppeteer@^1.13.0:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.17.0.tgz#371957d227a2f450fa74b78e78a2dadb2be7f14f"
   integrity sha512-3EXZSximCzxuVKpIHtyec8Wm2dWZn1fc5tQi34qWfiUgubEVYHjUvr0GOJojqf3mifI6oyKnCdrGxaOI+lWReA==
@@ -15586,7 +15410,7 @@ qs@^6.9.1:
   dependencies:
     side-channel "^1.0.4"
 
-qs@~6.5.1, qs@~6.5.2:
+qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
@@ -15808,7 +15632,7 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@16.8.6, react-dom@^16.0.0, react-dom@^16.8.3:
+react-dom@16.8.6, react-dom@^16.8.3:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
   integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
@@ -16020,7 +15844,7 @@ react-transition-group@^2.2.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react@16.8.6, react@^16.0.0, react@^16.8.3:
+react@16.8.6, react@^16.8.3:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
   integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
@@ -16163,16 +15987,6 @@ read@1, read@~1.0.1:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readable-stream@^1.1.8:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
-  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
 readable-stream@^3.4.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
@@ -16478,7 +16292,7 @@ request-promise-native@^1.0.5:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-"request@>=2.76.0 <3.0.0", request@^2.55.0, request@^2.74.0, request@^2.86.0, request@^2.87.0, request@^2.88.0:
+"request@>=2.76.0 <3.0.0", request@^2.86.0, request@^2.87.0, request@^2.88.0:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
   integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@@ -16504,51 +16318,6 @@ request-promise-native@^1.0.5:
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
-request@~2.87.0:
-  version "2.87.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
-  integrity sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.6.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.1"
-    forever-agent "~0.6.1"
-    form-data "~2.3.1"
-    har-validator "~5.0.3"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.17"
-    oauth-sign "~0.8.2"
-    performance-now "^2.1.0"
-    qs "~6.5.1"
-    safe-buffer "^5.1.1"
-    tough-cookie "~2.3.3"
-    tunnel-agent "^0.6.0"
-    uuid "^3.1.0"
-
-requestretry@~1.12.2:
-  version "1.12.3"
-  resolved "https://registry.yarnpkg.com/requestretry/-/requestretry-1.12.3.tgz#af34d696a7cb7bcbec61b56c539295d4e6088235"
-  integrity sha512-3H5xTOfORJGSDWV0WZYWLt39tqFyW19V+joQqsKvbbIR1AfJo8b1PDYlSYBoC5jPvmQcG0ZS0DkAKF23mChTow==
-  dependencies:
-    extend "^3.0.0"
-    lodash "^4.15.0"
-    request "^2.74.0"
-    when "^3.7.7"
-
-requestretry@~2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/requestretry/-/requestretry-2.0.2.tgz#ecbd2d9e2c9abb64c66e2d42c75f61af6e2c0375"
-  integrity sha512-wBIylIEvvGHnFAYRXIKCARGzWxChn+mo7X3KjXPgtofB+c0ejcZFdZ5k6RFhBV+IOf80fkemcVuVdUKqovnj8A==
-  dependencies:
-    extend "^3.0.2"
-    lodash "^4.17.10"
-    when "^3.7.7"
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -16564,7 +16333,7 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
-requires-port@1.x.x, requires-port@^1.0.0:
+requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
@@ -16907,60 +16676,6 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-screener-ngrok@2.2.28:
-  version "2.2.28"
-  resolved "https://registry.yarnpkg.com/screener-ngrok/-/screener-ngrok-2.2.28.tgz#09a4a00509a34e83758f6637e7eb1f0dbf60bf14"
-  integrity sha512-yqLrFtaMzcNC0bgkBByiqDgQOLqNtl5N7kE5a7pB/Ubc5FoJOu/tAfEliQ4rZcujSD2G7cVrrqoBUO2rAifmCg==
-  dependencies:
-    "@types/node" "^8.0.19"
-    async "^2.3.0"
-    decompress-zip "^0.3.2"
-    lock "^0.1.2"
-    request "^2.55.0"
-    uuid "^3.0.0"
-
-screener-runner@^0.10.42, screener-runner@^0.10.43:
-  version "0.10.43"
-  resolved "https://registry.yarnpkg.com/screener-runner/-/screener-runner-0.10.43.tgz#0f924d4f0c5f2d55da6451adb5ddfbc06554ebc6"
-  integrity sha512-E+17Cww7TeHee10WnuOmjUqM1udVCw7KoIfdCrJIlptr+cGAnRV3PEpg3ewXsqoiXKIf6IzT/DrTIWXtjZnf0A==
-  dependencies:
-    bluebird "~3.4.6"
-    colors "~1.1.2"
-    commander "~2.9.0"
-    compression "~1.7.0"
-    connect "~3.6.0"
-    http-proxy "~1.16.2"
-    joi "~9.2.0"
-    js-yaml "^3.13.1"
-    lodash "~4.17.13"
-    portfinder "~1.0.10"
-    request "~2.87.0"
-    requestretry "~2.0.2"
-    screener-ngrok "2.2.28"
-
-screener-storybook@^0.18.6:
-  version "0.18.7"
-  resolved "https://registry.yarnpkg.com/screener-storybook/-/screener-storybook-0.18.7.tgz#98caef8762e91729650097d713c13bcba3a63c03"
-  integrity sha512-c/s5IYs/q5UAKugGPZuFRlzQx7hIoz8Pt/51MBysEiXKwgCzeJk6peW9FoBggVVZ9bokFgxxAweVAXrwbUjoEA==
-  dependencies:
-    "@types/react" "*"
-    bluebird "~3.4.6"
-    colors "~1.1.2"
-    commander "~2.9.0"
-    get-port "~3.2.0"
-    joi "~10.0.2"
-    js-yaml "^3.13.1"
-    lodash "~4.17.13"
-    node-static "~0.7.11"
-    prop-types "^15.6.0"
-    puppeteer "~1.17.0"
-    react "^16.0.0"
-    react-dom "^16.0.0"
-    request "^2.87.0"
-    requestretry "~1.12.2"
-    screener-runner "^0.10.42"
-    semver "~5.6.0"
-
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -17033,11 +16748,6 @@ semver@~5.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
   integrity sha1-myzl094C0XxgEq0yaqa00M9U+U8=
 
-semver@~5.6.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
-  integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
-
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -17668,11 +17378,6 @@ static-extend@^0.1.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
-statuses@~1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
-  integrity sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=
-
 stdout-stream@^1.4.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.1.tgz#5ac174cdd5cd726104aa0c0b2bd83815d8d535de"
@@ -18564,13 +18269,6 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
-topo@2.x.x:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/topo/-/topo-2.0.2.tgz#cd5615752539057c0dc0491a621c3bc6fbe1d182"
-  integrity sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=
-  dependencies:
-    hoek "4.x.x"
-
 topo@3.x.x:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/topo/-/topo-3.0.3.tgz#d5a67fb2e69307ebeeb08402ec2a2a6f5f7ad95c"
@@ -18583,13 +18281,6 @@ toposort@^2.0.2:
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
   integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
 
-touch@0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/touch/-/touch-0.0.3.tgz#51aef3d449571d4f287a5d87c9c8b49181a0db1d"
-  integrity sha1-Ua7z1ElXHU8oel2Hyci0kYGg2x0=
-  dependencies:
-    nopt "~1.0.10"
-
 tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -18607,13 +18298,6 @@ tough-cookie@^4.0.0:
     punycode "^2.1.1"
     universalify "^0.1.2"
 
-tough-cookie@~2.3.3:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
-  integrity sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==
-  dependencies:
-    punycode "^1.4.1"
-
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -19574,11 +19258,6 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
-when@^3.7.7:
-  version "3.7.8"
-  resolved "https://registry.yarnpkg.com/when/-/when-3.7.8.tgz#c7130b6a7ea04693e842cdc9e7a1f2aa39a39f82"
-  integrity sha1-xxMLan6gRpPoQs3J56Hyqjmjn4I=
-
 which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
@@ -19641,11 +19320,6 @@ wordwrap@^1.0.0, wordwrap@~1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
 
-wordwrap@~0.0.2:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
-  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
-
 worker-farm@^1.3.1, worker-farm@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"

From f0fa1d139fbffa74cdec7d8c1eaf509bf871a7fc Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Fri, 16 Dec 2022 03:23:54 -0500
Subject: [PATCH 8/9] nit: replace screener comment verbiage with storywright

---
 apps/vr-tests/src/stories/PeoplePicker.stories.tsx | 2 +-
 apps/vr-tests/src/stories/TagPicker.stories.tsx    | 2 +-
 prettier.config.js                                 | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
index 27158fd060ef26..030b7bb8a72a1c 100644
--- a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
+++ b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx
@@ -131,7 +131,7 @@ const getTextFromItem = (persona: IPersonaProps): string => persona.text as stri
 
 const getPeople = () => people;
 
-// Pickers that are 'disabled' are added before the Screener decorator because
+// Pickers that are 'disabled' are added before the StoryWright decorator because
 // css classes for suggestion items won't exist
 storiesOf('PeoplePicker', module)
   .addDecorator(FabricDecorator)
diff --git a/apps/vr-tests/src/stories/TagPicker.stories.tsx b/apps/vr-tests/src/stories/TagPicker.stories.tsx
index 6e3029e267dd95..4bb6f2a898206f 100644
--- a/apps/vr-tests/src/stories/TagPicker.stories.tsx
+++ b/apps/vr-tests/src/stories/TagPicker.stories.tsx
@@ -27,7 +27,7 @@ const getTextFromItem = (item: ITag) => item.name;
 
 const getList = () => testTags;
 
-// Pickers that are 'disabled' are added before the Screener decorator because css classes
+// Pickers that are 'disabled' are added before the StoryWright decorator because css classes
 // for suggestion items won't exist
 storiesOf('TagPicker', module)
   .addDecorator(FabricDecorator)
diff --git a/prettier.config.js b/prettier.config.js
index c3bfcb60f4934f..418e4ce76d55ce 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -8,7 +8,7 @@ module.exports = {
     {
       files: 'apps/vr-tests/**/*',
       options: {
-        // The smaller printWidth for the screener tests promotes readability by preventing test cases
+        // The smaller printWidth for the storywright tests promotes readability by preventing test cases
         // from being squished onto one line (and squished up against each other in consecutive lines)
         printWidth: 100,
       },

From 35a4339875783af797554331a96131bf0343a6b4 Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Fri, 16 Dec 2022 03:45:00 -0500
Subject: [PATCH 9/9] fix: remove Step 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 ac132818741105..27739564421618 100644
--- a/apps/vr-tests/src/stories/Slider.stories.tsx
+++ b/apps/vr-tests/src/stories/Slider.stories.tsx
@@ -1,6 +1,6 @@
 /*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
 import * as React from 'react';
-import { StoryWright, Steps, Step } from 'storywright';
+import { StoryWright, Steps } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorTall } from '../utilities';
 import { Slider } from 'office-ui-fabric-react';