Init Playwright Tests (#81)

This PR inits the setup for Playwright tests and adds tests that cover
the most important functionality of the app.

Author: Splines

.config/vite.config.js

@@ -1,29 +1,36 @@
 import { defineConfig } from "vite";
 import fs from "fs";
+import process from "node:process";
 
 const input = {
   main: "web/index.html",
   privacy: "web/privacy.html",
   powerpoint: "web/powerpoint.html",
 };
 
-export default defineConfig(({ command }) => ({
-  root: "web",
-  base: "/pptypst/",
-  build: {
-    outDir: "../build/",
-    emptyOutDir: true,
-    rollupOptions: {
-      input,
-    },
-  },
-  server: {
-    port: 3155,
-    ...(command === "serve" && {
-      https: {
-        key: fs.readFileSync("web/certs/localhost.key"),
-        cert: fs.readFileSync("web/certs/localhost.crt"),
+function serverHttpsConfig() {
+  return {
+    key: fs.readFileSync("web/certs/localhost.key"),
+    cert: fs.readFileSync("web/certs/localhost.crt"),
+  };
+}
+
+export default defineConfig(({ command }) => {
+  const useHttps = command === "serve" && process.env.PPTYPST_USE_HTTPS !== "false";
+
+  return {
+    root: "web",
+    base: "/pptypst/",
+    build: {
+      outDir: "../build/",
+      emptyOutDir: true,
+      rollupOptions: {
+        input,
       },
-    }),
-  },
-}));
+    },
+    server: {
+      port: 3155,
+      ...(useHttps && { https: serverHttpsConfig() }),
+    },
+  };
+});

.github/workflows/test.yml

@@ -0,0 +1,38 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [ main, next ]
+  pull_request:
+    branches: [ main, next ]
+
+jobs:
+  test:
+    environment: testing-review
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+
+      - name: Install dependencies
+        run: npm ci # ci: "clean install"
+
+      - name: Install Playwright Chromium deps & browser
+        run: npx playwright install-deps chromium && npx playwright install chromium
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - uses: actions/upload-artifact@v7
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -3,4 +3,11 @@ web/certs/*
 !web/certs/.gitkeep 
 build/
 tmp/
-manifest.prod.xml
+manifest.prod.xml
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

.vscode/extensions.json

@@ -2,5 +2,6 @@
     "recommendations": [
         "dbaeumer.vscode-eslint",
         "streetsidesoftware.code-spell-checker",
+        "ms-playwright.playwright"
     ]
 }

DEV.md

@@ -37,6 +37,8 @@ mkcert -cert-file web/certs/localhost.crt -key-file web/certs/localhost.key loca
 
 If you're on WSL, follow [these steps](https://github.com/microsoft/WSL/issues/3161#issuecomment-451863149). For more background, see [this guide](https://240dc.com/wsl2-add-a-local-ssl-certificate-with-mkcert/), but rather execute the commands as shown in the first link. It's a bit tedious, but you will get there.
 
+Playwright tests do not need those certificates. The local and CI test setup starts Vite over plain `http` because the Office APIs are mocked in that scenario.
+
 ### Debug
 
 In PowerPoint, press `Ctrl+Shift+I` when the focus is on the Add-in task pane. This will open the dev console of the embedded web view where you can see network requests, the console output etc.
@@ -47,6 +49,19 @@ In PowerPoint, press `Ctrl+Shift+I` when the focus is on the Add-in task pane. T
 npm run validate-manifest
 ```
 
+## Playwright Tests
+
+```sh
+# Install necessary dependencies first
+npx playwright install-deps chromium
+npx playwright install chromium
+
+# Run tests (or even easier, just use the Playwright VSCode extension)
+# Note that a dedicated test webserver will automatically be started for the tests,
+# see the playwright.config.ts for details.
+npm run test
+```
+
 ## Test production-like environment
 
 All you have to do is sideload the `manifest.prod.xml` instead of the manifest used for local development `manifest.xml`. To do so, copy the `manifest.prod.xml` to some `tmp/` folder that you have added to the PowerPoint Trust Center (see above) and rename the file to `manifest.xml` such that PowerPoint recognizes it.
@@ -58,3 +73,7 @@ If you have used another manifest beforehand, clear the office cache as describe
 ```
 
 The production manifest has URLs configured to point to the site hosted on GitHub Pages. This way, you can see if everything works fine. All we ship to the PowerPoint Marketplace is the Manifest file in the end.
+
+## Useful links
+
+- [PowerPoint JS API](https://learn.microsoft.com/en-us/javascript/api/powerpoint) (Preview) & [v10](https://learn.microsoft.com/en-us/javascript/api/powerpoint?view=powerpoint-js-1.10)

package-lock.json

@@ -7,6 +7,7 @@
     "build": "vite build --config .config/vite.config.js",
     "start": "office-addin-debugging start manifest.xml desktop",
     "stop": "office-addin-debugging stop manifest.xml",
+    "test": "npx playwright test",
     "validate": "office-addin-manifest validate manifest.xml",
     "validate-prod": "office-addin-manifest validate -p manifest.prod.xml",
     "generate-prod-manifest": "sed 's|https://localhost:3155/pptypst/|https://splines.github.io/pptypst/|g' manifest.xml > manifest.prod.xml"
@@ -15,7 +16,9 @@
     "@eslint/css": "^1.1",
     "@eslint/js": "^10.0.1",
     "@html-eslint/eslint-plugin": "^0.59",
+    "@playwright/test": "^1.58.2",
     "@stylistic/eslint-plugin": "^5.7",
+    "@types/node": "^25.5.0",
     "@types/office-js": "^1.0",
     "eslint": "^10.2",
     "globals": "^17.5",