Integrate storywright for story tests - As part of exploring screener alternative

apps/vr-tests-react-components/convertStoriesToStoryWright.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+set -x
+sed -i "s/import.*Screener.*screener'/import { StoryWright, Steps } from 'storywright'/g" src/stories/*
+sed -i "s/Screener.Steps/Steps/g" src/stories/*
+sed -i "s/Screener/StoryWright/g" src/stories/*

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

@@ -5,6 +5,8 @@
   "description": "Visual regression tests for @fluentui/react-components",
   "scripts": {
     "build": "build-storybook -o dist/storybook",
+    "test:component": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true",
+    "convert": "bash convertStoriesToStoryWright.sh",
     "clean": "just-scripts clean",
     "format": "prettier . -w --ignore-path ../../.prettierignore",
     "lint": "just-scripts lint",
@@ -14,7 +16,8 @@
     "type-check": "tsc"
   },
   "devDependencies": {
-    "@fluentui/eslint-plugin": "*"
+    "@fluentui/eslint-plugin": "*",
+    "storywright": "0.0.23-beta.6"
   },
   "dependencies": {
     "@fluentui/react-accordion": "^9.0.9",

azure-pipelines.vrt-baseline.yml

@@ -0,0 +1,49 @@
+# Starter pipeline
+# Start with a minimal pipeline that you can customize to build and deploy your code.
+# Add steps that build, run tests, deploy, and more:
+# https://aka.ms/yaml
+
+trigger:
+  batch: true
+  branches:
+    include:
+      - master
+
+variables:
+  skipComponentGovernanceDetection: true
+
+pool: '1ES-Host-Ubuntu'
+
+jobs:
+  - job: VRToolUpdateBaseline
+    workspace:
+      clean: all
+    steps:
+      - template: .devops/templates/tools.yml
+
+      - task: Bash@3
+        inputs:
+          filePath: yarn-ci.sh
+        displayName: yarn (install packages)
+
+      - script: |
+          yarn workspace @fluentui/vr-tests-react-components screener:build
+        displayName: Build VR tests components package
+
+      - script: |
+          yarn lage test:component --verbose
+        displayName: 'Run VR tests'
+
+      - script: |
+          mkdir -p screenshots
+          cp -rf apps/vr-tests-react-components/dist/screenshots/*.png screenshots/
+        displayName: Collate Artifacts
+
+      - task: PublishBuildArtifacts@1
+        inputs:
+          PathtoPublish: 'screenshots'
+          ArtifactName: 'vrscreenshot'
+          publishLocation: 'Container'
+
+      - bash: node packages/screenshotdiff/dist/index.js release --buildId $(Build.BuildId)
+        displayName: 'Run Screenshotdiff update baseline'

azure-pipelines.vrt-pr.yml

@@ -0,0 +1,46 @@
+pr:
+  - master
+
+# There's a separate pipeline for CI which also uses this file, but with a trigger override in the UI
+# https://dev.azure.com/uifabric/fabricpublic/_apps/hub/ms.vss-ciworkflow.build-ci-hub?_a=edit-build-definition&id=164&view=Tab_Triggers
+trigger: none
+
+variables:
+  - ${{ if not(startsWith(variables['Build.SourceBranch'], 'refs/heads/')) }}:
+      - name: sinceArg
+        value: --since $(targetBranch)
+
+  - template: .devops/templates/variables.yml
+
+pool: '1ES-Host-Ubuntu'
+
+jobs:
+  - job: TestVRTool
+    workspace:
+      clean: all
+    steps:
+      - template: .devops/templates/tools.yml
+
+      - task: Bash@3
+        inputs:
+          filePath: yarn-ci.sh
+        displayName: yarn (install packages)
+
+      - script: |
+          yarn workspace @fluentui/vr-tests-react-components screener:build
+        displayName: Build vr tests components package
+
+      - script: |
+          yarn lage test:component --verbose
+        displayName: 'Run VR tests'
+
+      - script: |
+          mkdir -p screenshots
+          cp -rf apps/vr-tests-react-components/dist/screenshots/*.png screenshots/
+        displayName: Collate Artifacts
+
+      - task: PublishBuildArtifacts@1
+        inputs:
+          PathtoPublish: 'screenshots'
+          ArtifactName: 'vrscreenshot'
+          publishLocation: 'Container'

yarn.lock

@@ -21155,6 +21155,18 @@ pkg-up@^4.0.0:
   dependencies:
     find-up "^6.2.0"
 
+[email protected]:
+  version "1.27.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.27.1.tgz#840ef662e55a3ed759d8b5d3d00a5f885a7184f4"
+  integrity sha512-9EmeXDncC2Pmp/z+teoVYlvmPWUC6ejSSYZUln7YaP89Z6lpAaiaAnqroUt/BoLo8tn7WYShcfaCh+xofZa44Q==
+
+playwright@^1.27.0:
+  version "1.27.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.27.1.tgz#4eecac5899566c589d4220ca8acc16abe8a67450"
+  integrity sha512-xXYZ7m36yTtC+oFgqH0eTgullGztKSRMb4yuwLPl8IYSmgBM88QiB+3IWb1mRIC9/NNwcgbG0RwtFlg+EAFQHQ==
+  dependencies:
+    playwright-core "1.27.1"
+
 please-upgrade-node@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
@@ -24283,6 +24295,15 @@ [email protected]:
     tiny-invariant "^1.1.0"
     xstate "^4.22.0"
 
+[email protected]:
+  version "0.0.23-beta.6"
+  resolved "https://registry.yarnpkg.com/storywright/-/storywright-0.0.23-beta.6.tgz#cf44dadd29caddd51a7b1b6af1074f8efc876f76"
+  integrity sha512-Kwhk0xlRdy+e8CP21ZueAVSkw0e367MgO2XJPqPdet/RsE+rr4j0VOGA/TjqsHP+G25/FxwZI0UL/6q9alNUfQ==
+  dependencies:
+    playwright "^1.27.0"
+    prop-types "^15.6.0"
+    yargs "^16.2.0"
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"