https://github.com/minhtrung0110/wp-test-tool
WP Test Tool - Modern desktop application for WordPress testing & management built with Electron 34, React 19, Tailwind CSS v4 and TypeScript
https://github.com/minhtrung0110/wp-test-tool
ai ai-agents app-desktop claude-code claude-skills design electron electron-app electron-vite-react stitch testing tool vide-coding
Last synced: about 2 months ago
JSON representation
WP Test Tool - Modern desktop application for WordPress testing & management built with Electron 34, React 19, Tailwind CSS v4 and TypeScript
- Host: GitHub
- URL: https://github.com/minhtrung0110/wp-test-tool
- Owner: minhtrung0110
- Created: 2026-04-11T18:18:44.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-12T10:33:09.000Z (2 months ago)
- Last Synced: 2026-04-12T11:13:33.344Z (2 months ago)
- Topics: ai, ai-agents, app-desktop, claude-code, claude-skills, design, electron, electron-app, electron-vite-react, stitch, testing, tool, vide-coding
- Language: TypeScript
- Homepage:
- Size: 4.04 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WP Test Tool
**A desktop app for WordPress developers to verify CSS & layout changes across all pages after every merge — without touching a browser.**
[](https://github.com/minhtrung0110/wp-test-tool/releases)
[](https://github.com/minhtrung0110/wp-test-tool/releases)
[](https://www.electronjs.org/)
[](https://react.dev/)
[](https://www.typescriptlang.org/)
[](LICENSE)
---
## Overview
After merging CSS or layout changes to a WordPress project, manually opening each page in a browser to check for regressions is slow and error-prone. **WP Test Tool** gives you a focused, keyboard-friendly workspace: maintain a curated list of test pages, preview them in an embedded browser at any viewport width, take screenshots, write notes on issues found, and export a full test report — all from a single window.
---
## Features
| Feature | Description |
| -------------------------- | ----------------------------------------------------------------------------- |
| **Multi-viewport Preview** | Switch instantly between Desktop, Tablet (768 px), and Mobile (375 px) |
| **Page Management** | Add, edit, and delete pages with title, slug, and category |
| **Category Filtering** | Pill-style category tabs to focus on one section at a time |
| **404 / HTTP Checker** | HEAD-checks every page URL and flags non-2xx responses in the sidebar |
| **Screenshot Capture** | `capturePage()` saves PNGs locally; thumbnail gallery in the bottom panel |
| **Per-page Notes** | Write error notes per page (Ctrl+Enter to save); auto-marks the page as Error |
| **Progress Tracking** | Live progress bar showing Tested / Error / Untested counts |
| **Import / Export** | Import a JSON page list; export to JSON or a formatted `.txt` report |
| **Theme Support** | Light, dark, and system-aware themes — persisted across sessions |
| **Domain Management** | Set a base domain once; all slugs are resolved against it automatically |
| **Keyboard Shortcuts** | `Ctrl+N` new page · `Ctrl+R` reload · `Ctrl+Enter` save note |
---
## Installation
Download the latest installer for your platform from the [**Releases**](https://github.com/minhtrung0110/wp-test-tool/releases) page.
| Platform | Installer |
| -------- | ------------------------------ |
| Windows | `WP.Test.Tool-Setup-1.0.4.exe` |
| macOS | `WP.Test.Tool-1.0.4.dmg` |
| Linux | `WP.Test.Tool-1.0.4.AppImage` |
> **macOS note:** The app is not notarized. Right-click → **Open** to bypass Gatekeeper on first launch, or run:
>
> ```sh
> xattr -cr "/Applications/WP Test Tool.app"
> ```
> **Linux note:** Make the AppImage executable before running:
>
> ```sh
> chmod +x WP.Test.Tool-*.AppImage
> ```
---
## Tech Stack
| Layer | Library |
| ------------- | -------------------------------------------------------------------------------------------------- |
| Shell | [Electron 34](https://www.electronjs.org/) |
| UI Framework | [React 19](https://react.dev/) |
| Language | [TypeScript 5.8](https://www.typescriptlang.org/) — strict mode |
| Styling | [Tailwind CSS v4](https://tailwindcss.com/) |
| State | [Zustand 5](https://zustand-demo.pmnd.rs/) |
| Persistence | [electron-store 8](https://github.com/sindresorhus/electron-store) |
| UI Primitives | [Radix UI](https://www.radix-ui.com/) |
| Notifications | [Sonner](https://sonner.emilkowal.ski/) |
| Icons | [Lucide React](https://lucide.dev/) |
| Build | [electron-vite 5](https://electron-vite.org/) + [electron-builder 25](https://www.electron.build/) |
---
## Development
### Prerequisites
- Node.js ≥ 20
- npm ≥ 10
### Getting Started
```sh
git clone https://github.com/minhtrung0110/wp-test-tool.git
cd wp-test-tool
npm install
npm run dev
```
### Scripts
```sh
npm run dev # Development server with hot reload
npm run typecheck # TypeScript check across all three tsconfigs
npm run lint # ESLint
npm run format # Prettier
npm run build # Production build (electron-vite)
npm run build:win # Windows NSIS installer → dist/
npm run build:mac # macOS DMG → dist/
npm run build:linux # Linux AppImage → dist/
```
---
## Architecture
```
src/
├── main/ Electron main process (Node.js)
│ ├── index.ts Window lifecycle, splash screen, WebContentsView
│ ├── ipc.ts IPC handlers + layout constants
│ └── store.ts electron-store initialization
├── preload/
│ └── index.ts Context bridge — exposes window.api to the renderer
└── renderer/
├── splash-main.tsx Loading screen entry point
└── src/
├── App.tsx Root layout (Header · Sidebar · Toolbar · Preview · BottomPanel)
├── store/index.ts Zustand store — all runtime state
├── index.css Tailwind v4 @theme tokens + dark mode overrides
└── components/
├── Sidebar.tsx Page list, progress bar, category pills
├── WebviewToolbar.tsx URL bar, viewport switcher, screenshot button
├── BottomPanel.tsx Notes & screenshot tabs
├── AddPageModal.tsx Add / edit page dialog
├── ManageCategoriesModal.tsx Category CRUD dialog
├── ThemeSelectionModal.tsx First-launch theme picker
├── LoadingScreen.tsx Splash screen UI
└── ConfirmDialog.tsx Generic confirm dialog
```
### Key Patterns
- **IPC-only Node access** — the renderer has no direct Node.js access; all privileged operations go through `window.api.*` defined in the context bridge.
- **WebContentsView overlay** — the live preview is a native `WebContentsView` (not the deprecated `` tag) positioned by the main process above the HTML layer, enabling true browser rendering.
- **Dual-layer viewport visual** — in Tablet/Mobile mode the renderer shows distinct gutter areas alongside the native overlay, giving immediate visual confirmation of the active viewport width.
- **Two-gate splash** — the main window only appears after _both_ the minimum splash duration (2 s) and the renderer's `app-ready` IPC signal are satisfied.
---
## Releasing
Create and push a semver tag to trigger the GitHub Actions release workflow, which builds installers for all three platforms in parallel and publishes them to a GitHub Release automatically:
```sh
git tag v1.0.0
git push origin v1.0.0
```
---
## Author
Nguyen Duc Minh Trung
minhtrung4367@gmail.com
@minhtrung0110
---
Made with ♥ for the WordPress developer community