os-clovy: Skill for Claude Code

Browser-testing a Tauri / Vite frontend

Drive a frontend in headless/real Chromium for screenshots, interaction tests, and UI debugging. Two tools, one strategy.

First decision: can you drive the real app?

• Plain web app / Vite dev server → yes. Point Playwright or Chrome DevTools MCP at the dev URL and go.
• Tauri app on macOS → NO. The window is WKWebView, which speaks no CDP, and tauri-driver doesn't support macOS. You cannot attach Playwright/DevTools to the real .app window. Instead, run the frontend's Vite dev server (pnpm dev / npm run dev) and drive that in Chromium. The catch: Tauri invoke()/listen() calls have no backend in a plain browser, so you must fake the IPC bridge (below).
• Tauri on Windows → WebView2 is Chromium; tauri-driver + WebdriverIO works. On Linux, WebKitGTK + tauri-driver.

Faking the Tauri IPC bridge (the key technique)

@tauri-apps/api reads window.__TAURI_INTERNALS__ at load time. Define it before the app module loads and the React/Vue/etc. app can't tell it isn't in a webview — every invoke()/listen() resolves against your fake.

Recipe — a dev-only HTML entry (e.g. app-preview.html) NOT listed in vite.config rollupOptions.input (so it never ships):

<script type="module">
  // 1. install the bridge, 2. THEN import the app (dynamic import guarantees order)
  window.__TAURI_INTERNALS__ = {
    transformCallback(cb) { /* store cb, return id */ },
    unregisterCallback(id) { /* delete */ },
    convertFileSrc(p) { return p; },
    async invoke(cmd, args = {}) {
      switch (cmd) {
        case "plugin:event|listen":   /* register args.handler under args.event; return it */
        case "plugin:event|unlisten": return null;
        /* ...stub each command the app calls at boot, return realistic shapes... */
        default: return null;
      }
    },
  };
  // @tauri-apps/api >= v2.11: listener teardown uses a SEPARATE global.
  window.__TAURI_EVENT_PLUGIN_INTERNALS__ = {
    unregisterListener(event, eventId) { /* drop the handler */ },
  };
  await import("/src/main.tsx");
</script>