run-wwtt-website

Runs, screenshots, and tests the WanderWave React/Vite frontend using a Playwright driver.

Updated Nov 13, 2025
One-click install
npx skills add https://github.com/WanderWave-Travel-and-Tours/WWTT-Website --skill run-wwtt-website-wanderwave-travel-and-tours
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: run-wwtt-website
Source: https://github.com/WanderWave-Travel-and-Tours/WWTT-Website/tree/main/.claude/skills/run-wwtt-website
Command: npx skills add https://github.com/WanderWave-Travel-and-Tours/WWTT-Website --skill run-wwtt-website-wanderwave-travel-and-tours

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve? Verifying that changes to the WanderWave Travel & Tours website actually work requires manually starting the Vite dev server, opening a browser, and navigating routes — a slow, error-prone loop. This Skill automates running the app, capturing screenshots, and checking routes through a Playwright driver. ## Core Features & Use Cases - Automated Browser Control: A Playwright driver (driver.mjs) supports one-shot commands or an interactive REPL for screenshots, navigation, clicks, and text extraction. - Route Verification: Navigate to key routes like /packages, /flights, and /tours and print page titles and HTTP statuses to confirm pages render. - Visual Regression Checks: Capture full screenshots of any route to verify UI changes visually. - Use Case: After editing the flight search page, start the dev server on port 3000 and run the driver's screenshot command against http://localhost:3000/flights to confirm the change renders correctly. ## Quick Start Start the Vite dev server on port 3000, then ask the agent to take a screenshot of the /packages page using the run-wwtt-website driver.

Frequently Asked Questions about run-wwtt-website

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I take a screenshot of a Vite dev server page with Playwright?

Run the driver from the repo root with the screenshot command, an output path, and the target URL, for example node driver.mjs screenshot packages.png http://localhost:3000/packages. The driver uses Playwright's Chromium with networkidle waiting and a 30-second timeout.

How do I run a React Vite frontend against a production backend?

Start the Vite dev server on port 3000 or 3001; the Vite proxy forwards /api requests to the production Render backend, so no local backend is needed. These two ports are in the backend's CORS allowlist.

Why do API calls fail with CORS errors on my local Vite dev server?

The production backend only allowlists localhost ports 3000 and 3001. If Vite bumps to port 3002 or higher, all /api calls fail with CORS errors while the page shell still renders. Free up port 3000 or 3001 and restart.

Why does Playwright show ERR_MODULE_NOT_FOUND when running a script?

The driver resolves Playwright via an explicit path to frontend/node_modules, so it must be run from the repository root. Running it from the frontend directory or the skill directory breaks the relative path resolution.

Can Playwright run in headed mode on Windows for debugging?

Yes, set the HEADLESS environment variable to false before running the driver to open a visible Chromium window. Playwright ships its own Chromium binary, so no extra OS packages are needed on Windows.