chore: add playwright system test (#64)

Author: axis-d0op

.github/workflows/verify-page.yml

@@ -0,0 +1,42 @@
+name: Verifies gh-page is up and running
+
+on:
+  push:
+    branches:
+      - main
+      - playwright-base
+  workflow_dispatch:
+
+jobs:
+  verify-gh-page:
+    runs-on: ubuntu-latest
+    steps:
+      # - name: Delay start
+      #   run: sleep 30s
+      #   shell: bash
+
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: |
+          corepack enable
+          corepack prepare --activate
+          pnpm install --frozen-lockfile
+
+      - name: Run Playwright tests
+        run: pnpm stest
+        working-directory: ./examples
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: examples/test-results/*
+          retention-days: 5

examples/.gitignore

@@ -3,3 +3,6 @@ node_modules
 dist
 dist-ssr
 *.local
+/test-results/
+/playwright-report/
+/playwright/.cache/

examples/package.json

@@ -17,7 +17,9 @@
     "check:unused-deps": "depcheck . --config=depcheck.yml",
     "dev": "vite",
     "lint": "tsc --noEmit && eslint . --cache",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "stest": "pnpm playwright test",
+    "stest:ui": "pnpm playwright test --ui"
   },
   "dependencies": {
     "@axiscommunications/fluent-hooks": "workspace:*",
@@ -41,6 +43,8 @@
     "vite": "^3.0.9"
   },
   "devDependencies": {
+    "@types/node": "^20.8.4",
+    "@playwright/test": "1.38.1",
     "@types/react": "^17.0.67",
     "@types/react-dom": "^17.0.21",
     "eslint": "^8.52.0",

examples/playwright.confg.base.ts

@@ -0,0 +1,42 @@
+import { Config, PlaywrightTestConfig } from "@playwright/test";
+
+type UseConfig = Config["use"];
+type Projects = Config["projects"];
+
+export const chromium = ({ flags }: { flags?: string[] } = {}): UseConfig => ({
+  browserName: "chromium",
+  channel: process.env.BROWSER ?? "chrome",
+  viewport: { width: 1280, height: 720 },
+  permissions: ["clipboard-write", "clipboard-read"],
+  launchOptions: {
+    args: [
+      "--ignore-certificate-errors",
+      "--use-fake-ui-for-media-stream",
+      "--use-fake-device-for-media-stream",
+      ...(flags ?? []),
+    ],
+  },
+});
+
+export function createConfig(
+  projects: Projects,
+  addUseOptions: Partial<PlaywrightTestConfig["use"]> = {}
+): PlaywrightTestConfig {
+  return {
+    forbidOnly: !!process.env.CI,
+    projects: projects,
+    use: {
+      // Context options
+      ignoreHTTPSErrors: true,
+      contextOptions: {
+        locale: "en_GB",
+      },
+      // Artifacts
+      screenshot: "only-on-failure",
+      trace: "on-first-retry",
+      ...addUseOptions,
+    },
+    retries: process.env.CI ? 1 : 0,
+    reporter: process.env.CI ? [["github"], ["list"]] : [["list"]],
+  };
+}

examples/playwright.config.ts

@@ -0,0 +1,13 @@
+import { PlaywrightTestConfig } from "@playwright/test";
+import { chromium, createConfig } from "./playwright.confg.base";
+
+const config: PlaywrightTestConfig = {
+  ...createConfig([
+    {
+      name: "fluent-components:stest:chromium",
+      use: chromium(),
+      testMatch: ["system-test/**.stest.ts"],
+    },
+  ]),
+};
+export default config;

examples/system-test/home-page.stest.ts

@@ -0,0 +1,10 @@
+import { expect, test } from "@playwright/test";
+import { goToPage } from "./utils";
+
+test("should be able to navigate to home page", async ({ page }) => {
+  await goToPage(page);
+
+  const homePage = page.locator("#welcome-page");
+
+  await expect(homePage).toBeVisible();
+});

examples/system-test/utils.ts

@@ -0,0 +1,17 @@
+import { Page } from "@playwright/test";
+
+const GH_PAGE = "https://axiscommunications.github.io/fluent-components/";
+const LOCAL_HOST = "http://127.0.0.1:3000/fluent-components/";
+
+export function goToPage(page: Page, url?: string) {
+  if (url) {
+    return page.goto(url);
+  }
+
+  const envUrl = isCi() ? GH_PAGE : LOCAL_HOST;
+  return page.goto(envUrl);
+}
+
+export function isCi(): boolean {
+  return process.env.CI === "true";
+}

examples/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "lib": ["es5", "es6", "dom", "dom.iterable", "ES2015", "es2017"],
+    "types": ["node"],
     "paths": {
       "@axiscommunications/fluent-hooks": ["hooks/src"],
       "@axiscommunications/fluent-password-input": [
@@ -18,5 +19,5 @@
       ]
     }
   },
-  "include": ["src"]
+  "include": ["src", "system-test", "*.ts"]
 }

examples/vite.config.ts

@@ -5,6 +5,9 @@ import path from "path";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    port: 3000,
+  },
   base: "/fluent-components/",
   resolve: {
     alias: {