SX Design: test Storybook via Playwright

Just to make sure it still works after updating Storybook dependencies as it gets broken _very_ often.

.github/workflows/continuous-integration-javascript.yml

@@ -8,7 +8,8 @@ env:
   BABEL_DISABLE_CACHE: '1'
 
 jobs:
-  build:
+  javascript-test:
+    name: JavaScript test
     runs-on: ubuntu-latest
 
     strategy:

.github/workflows/continuous-integration-rust.yml

@@ -3,7 +3,9 @@ name: Continuous Integration (Rust)
 on: [push]
 
 jobs:
-  build-all-targets:
+  rust-test:
+    name: Rust test
+
     strategy:
       fail-fast: true
       matrix:

.github/workflows/playwright.yml

@@ -5,32 +5,53 @@ name: Playwright
 on: [push]
 
 jobs:
-  build:
+  playwright-test:
+    name: Playwright test
+    strategy:
+      matrix:
+        repository:
+          - '@adeira/abacus-kochka'
+          - '@adeira/sx-design'
+        include:
+          - repository: '@adeira/abacus-kochka'
+            source: 'src/abacus-kochka/**'
+          - repository: '@adeira/sx-design'
+            source: 'src/sx-design/**'
+
     runs-on: ubuntu-latest
 
     steps:
       # https://github.com/actions/checkout
       - uses: actions/checkout@v3.0.2
 
       # https://github.com/dorny/paths-filter
-      # TODO: expand as needed
       - uses: dorny/paths-filter@v2.10.2
         id: paths-filter
         with:
           filters: |
-            src:
-              - 'src/abacus-kochka/**'
+            src: ${{ matrix.source }}
 
       # https://github.com/actions/setup-node
       - name: Use Node.js 18.x
+        if: steps.paths-filter.outputs.src == 'true'
         uses: actions/setup-node@v3.2.0
         with:
           node-version: 18.x
           cache: 'yarn'
 
       - name: Install Yarn dependencies
+        if: steps.paths-filter.outputs.src == 'true'
         run: yarn install --immutable
 
-      # We currently don't have any other project using `playwright` so let's keep it simple:
+      - name: Install Playwright
+        if: steps.paths-filter.outputs.src == 'true'
+        run: yarn workspace ${{ matrix.repository }} playwright install --with-deps
+
       - name: Run Playwright tests
-        run: yarn workspace @adeira/abacus-kochka playwright test
+        if: steps.paths-filter.outputs.src == 'true'
+        run: yarn workspace ${{ matrix.repository }} playwright test
+        env:
+          # See: https://github.com/storybookjs/storybook/issues/16555
+          NODE_OPTIONS: --openssl-legacy-provider
+
+      # TODO: upload Playwright artifacts, see: https://playwright.dev/docs/next/ci#github-actions

src/sx-design/package.json

@@ -39,6 +39,7 @@
     "@adeira/sx-jest-snapshot-serializer": "^0.1.0",
     "@babel/core": "^7.18.0",
     "@fbtjs/default-collection-transform": "^1.0.0",
+    "@playwright/test": "^1.21.1",
     "@storybook/addon-a11y": "^6.5.3",
     "@storybook/addon-actions": "^6.5.3",
     "@storybook/addon-essentials": "^6.5.3",
@@ -53,6 +54,7 @@
     "babel-loader": "^8.2.5",
     "babel-plugin-fbt": "^1.0.0",
     "babel-plugin-fbt-runtime": "^1.0.0",
+    "playwright": "^1.21.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

src/sx-design/playwright.config.js

@@ -0,0 +1,29 @@
+// eslint-disable-next-line ft-flow/require-valid-file-annotation,import/no-extraneous-dependencies
+const { devices } = require('@playwright/test');
+
+const config = {
+  timeout: 60000,
+  testDir: 'tests',
+  testMatch: '**.play.js',
+  forbidOnly: !!process.env.CI,
+  reporter: process.env.CI ? 'github' : 'list',
+  retries: process.env.CI ? 2 : 0,
+  webServer: {
+    command: 'yarn storybook --quiet',
+    port: 6006,
+    timeout: 120 * 1000, // milliseconds
+    reuseExistingServer: !process.env.CI,
+  },
+  use: {
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'Desktop Chrome',
+      use: devices['Desktop Chrome'],
+    },
+  ],
+};
+
+module.exports = config;

src/sx-design/tests/.eslintrc.js

@@ -0,0 +1,16 @@
+// @flow strict
+
+/* eslint-disable no-unused-vars */
+const OFF = 0;
+const WARN = 1;
+const ERROR = 2;
+/* eslint-enable no-unused-vars */
+
+module.exports = {
+  rules: {
+    // Jest rules incompatible with Playwright:
+    'jest/no-disabled-tests': OFF,
+    'jest/no-standalone-expect': OFF,
+    'jest/valid-title': OFF,
+  },
+};

src/sx-design/tests/README.md

@@ -0,0 +1,3 @@
+```
+yarn workspace @adeira/sx-design playwright test
+```

src/sx-design/tests/ui/homepage.play.js

@@ -0,0 +1,8 @@
+// eslint-disable-next-line ft-flow/require-valid-file-annotation,import/no-extraneous-dependencies
+const { test, expect } = require('@playwright/test');
+
+test('that storybook works', async ({ page, baseURL }) => {
+  // This is here just to make sure that our Storybook works as it gets broken very often.
+  await page.goto(baseURL);
+  await expect(page).toHaveTitle(/^Styleguide \/ Colors - Page ⋅ Storybook$/);
+});

yarn.lock

@@ -430,6 +430,7 @@ __metadata:
     "@babel/core": ^7.18.0
     "@babel/runtime": ^7.18.0
     "@fbtjs/default-collection-transform": ^1.0.0
+    "@playwright/test": ^1.21.1
     "@storybook/addon-a11y": ^6.5.3
     "@storybook/addon-actions": ^6.5.3
     "@storybook/addon-essentials": ^6.5.3
@@ -448,6 +449,7 @@ __metadata:
     fbt: ^1.0.0
     flow-enums-runtime: ^0.0.6
     focus-trap-react: ^8.11.1
+    playwright: ^1.21.1
     prop-types: ^15.8.1
     react: ^17.0.2
     react-blurhash: ^0.1.3
@@ -3052,7 +3054,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:^1.22.1":
+"@playwright/test@npm:^1.21.1, @playwright/test@npm:^1.22.1":
   version: 1.22.1
   resolution: "@playwright/test@npm:1.22.1"
   dependencies:
@@ -15849,7 +15851,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright@npm:^1.22.1":
+"playwright@npm:^1.21.1, playwright@npm:^1.22.1":
   version: 1.22.1
   resolution: "playwright@npm:1.22.1"
   dependencies: