HAR-10176 - SuperDoc automated testing demo gallery apps

.github/workflows/run-tests-example-apps.yml

@@ -0,0 +1,30 @@
+name: Run tests for example apps
+
+on:
+  workflow_call:
+  # TODO: Enable this when we test this workflow manually
+  # pull_request:
+  #   branches:
+  #     - develop
+
+jobs:
+  run-tests-example-apps:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: cd examples/tests && npm ci
+
+      - name: Install Playwright browsers
+        run: cd examples/tests && npx playwright install --with-deps
+
+      - name: Run tests
+        run: cd examples/tests && npm test

examples/react-example/package.json

@@ -13,6 +13,6 @@
     },
     "devDependencies": {
         "@vitejs/plugin-react": "^4.0.4",
-        "vite": "^7.0.5"
+        "vite": "^6.2.0"
     }
 }

examples/tests/.gitignore

@@ -0,0 +1 @@
+playwright-report

examples/tests/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "demo-gallery-tests",
+  "version": "1.0.0",
+  "description": "Automated tests suites for all examples on the demo gallery",
+  "main": "index.js",
+  "scripts": {
+    "test": "npx playwright test"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.55.0",
+    "playwright": "^1.55.0"
+  }
+}

examples/tests/playwright.config.js

@@ -0,0 +1,48 @@
+import { defineConfig, devices } from '@playwright/test';
+import testConfig from './test-config.js';
+
+const foldersToTest = testConfig.include;
+
+export default defineConfig({
+  testMatch: '**/*.spec.js',
+
+  // Run all tests in parallel.
+  fullyParallel: true,
+
+  // Fail the build on CI if you accidentally left test.only in the source code.
+  forbidOnly: !!process.env.CI,
+
+  // Retry on CI only.
+  retries: process.env.CI ? 2 : 0,
+
+  // Opt out of parallel tests on CI.
+  workers: process.env.CI ? 1 : undefined,
+
+  // Reporter to use
+  reporter: 'html',
+
+  use: {
+    // Base URL to use in actions like `await page.goto('/')`.
+    baseURL: 'http://localhost:5173',
+
+    // Collect trace when retrying the failed test.
+    trace: 'on-first-retry',
+  },
+  // Configure projects for major browsers.
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  // Open every example in a separate server
+  webServer: testConfig.include.map(({name, command}, i) => {
+    return {
+        command: `${command} -- --port ${5173 + i}`,
+        url: `http://localhost:${5173 + i}`,
+        reuseExistingServer: !process.env.CI,
+        timeout: 120 * 1000, // 2 minutes timeout for server startup
+    }
+  })
+});

examples/tests/test-config.js

@@ -0,0 +1,52 @@
+export default {
+    include: [
+        {
+            name: "cdn-example",
+            command: 'cd ../cdn-example && npm run start',
+        },
+        {
+            name: "external-plugin-dynamic-content",
+            command: 'cd ../external-plugin-dynamic-content && npm install && npm run dev',
+        },
+        {
+            name: "next-js-ssr",
+            command: 'cd ../next-js-ssr && npm install && npm run dev',
+        },
+        {
+            name: "programmatic-text-selection",
+            command: 'cd ../programmatic-text-selection && npm install && npm run dev',
+        },
+        {
+            name: "react-example",
+            command: 'cd ../react-example && npm install && npm run dev',
+        },
+        {
+            name: "typescript-example",
+            command: 'cd ../typescript-example && npm install && npm run dev',
+        },
+        {
+            name: "vanilla-example",
+            command: 'cd ../vanilla-example && npm install && npm run dev',
+        },
+        {
+            name: "vue-custom-mark",
+            command: 'cd ../vue-custom-mark && npm install && npm run dev',
+        },
+        {
+            name: "vue-docx-from-html",
+            command: 'cd ../vue-docx-from-html && npm install && npm run dev',
+        },
+        {
+            name: "vue-example",
+            command: 'cd ../vue-example && npm install && npm run dev',
+        },
+        {
+            name: "vue-fields-example",
+            command: 'cd ../vue-fields-example && npm install && npm run dev',
+        },
+        {
+            name: "vue-linked-editor-sections",
+            command: 'cd ../vue-linked-editor-sections && npm install && npm run dev',
+        },
+    ]
+}

examples/tests/tests.spec.js

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+import testConfig from './test-config.js';
+const PORT = 5173;
+const foldersToTest = testConfig.include;
+
+foldersToTest.forEach(({name}, i) => {
+  test.describe(name, () => {
+    test('should open the main page', async ({ page }) => {
+    // Should open the main page
+      await page.goto(`http://localhost:${PORT + i}`);
+
+    await page.waitForSelector('div.super-editor', {
+      timeout: 5_000,
+    });
+
+    // Compare the screenshot with the reference screenshot
+    await expect(page).toHaveScreenshot({
+      fullPage: true,
+    });
+  });
+});
+});