rameel · rameel · Apr 7, 2026 · Apr 7, 2026
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,41 @@
+name: Build & Test
+on:
+  pull_request:
+    branches: [main]
+    types: [opened, synchronize, reopened, ready_for_review]
+
+jobs:
+  main:
+    if: ${{ !github.event.pull_request.draft }}
+    name: "Build & Test"
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    container:
+      image: mcr.microsoft.com/playwright:v1.59.1-noble
+      options: --user 1001:1001 # Run as non-root user for security
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm i
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Test
+        run: pnpm run test
+        env:
+          CI: true
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,8 @@
-coverage
+coverage/
 node_modules/
 .idea/
 .vscode/
 .vs/
 dist/
+playwright-report/
+test-results/
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
   ],
   "scripts": {
     "build": "rimraf dist && rollup -c",
+    "test": "playwright test",
     "size-report": "node scripts/compare-package-sizes.js"
   },
   "keywords": [
@@ -35,6 +36,7 @@
     "vue": "^3.4.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.59.1",
     "@ramstack/hotkey": "^1.2.1",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
@@ -44,6 +46,7 @@
     "rollup": "^4.60.1",
     "rollup-plugin-bundle-size": "^1.0.3",
     "terser": "^5.46.1",
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "vue": "^3.4.0"
   }
 }
diff --git a/playwright.config.js b/playwright.config.js
@@ -0,0 +1,32 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+    testDir: "./tests",
+    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 ? 2 : undefined,
+    reporter: [
+        ["html", { open: "never", outputFolder: "playwright-report" }]
+    ],
+    use: {
+        trace: "on-first-retry",
+    },
+    projects: [
+        {
+            name: "chromium",
+            use: {
+                ...devices["Desktop Chrome"]
+            },
+        },
+        {
+            name: "firefox",
+            use: {
+                ...devices["Desktop Firefox"]
+            },
+        }
+    ]
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/assets/index.html b/tests/assets/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+</head>
+<body>
+    <div id="app"></div>
+
+    <script src="../../node_modules/vue/dist/vue.global.js"></script>
+    <script src="../../dist/vue-hotkey.js"></script>
+    <script>
+        function mount(options) {
+            const { template, data = {} } = options;
+
+            const app = Vue.createApp({
+                data() {
+                    return {
+                        ...data
+                    };
+                },
+                template
+            });
+
+            app.use(window.HotkeyPlugin);
+            app.mount("#app");
+        }
+
+        window.__hotkeyTest = {
+            mount,
+        };
+    </script>
+</body>
+</html>