diff --git a/cli/src/commands/wheels/playwright/init.cfc b/cli/src/commands/wheels/playwright/init.cfc new file mode 100644 index 000000000..7555bd393 --- /dev/null +++ b/cli/src/commands/wheels/playwright/init.cfc @@ -0,0 +1,108 @@ +/** + * Initialize Playwright for end-to-end testing + * + * This command wraps `npx create-playwright` to set up Playwright testing + * in your Wheels application. + * + * The command runs interactively and will ask you a few questions: + * - Language preference (TypeScript or JavaScript) + * - Where to put your tests + * - Whether to add GitHub Actions workflow + * - Whether to install Playwright browsers (default: NO, do this manually) + * + * {code:bash} + * wheels playwright:init + * {code} + * + * Note: Browser installation is skipped by default due to Playwright webkit + * requiring macOS 14+. After setup, run: + * {code:bash} + * wheels playwright install + * {code} + */ +component aliases="wheels playwright:init, wheels playwright init" extends="../base" { + + property name="detailOutput" inject="DetailOutputService@wheels-cli"; + + function run() { + try { + requireWheelsApp(getCWD()); + + detailOutput.header("Playwright Setup"); + + if (!isNodeAvailable()) { + detailOutput.error("Node.js is required. Please install Node.js first."); + print.line("Visit https://nodejs.org to download and install Node.js"); + setExitCode(1); + return; + } + + runInteractive(); + + } catch (any e) { + detailOutput.error("Setup failed: #e.message#"); + setExitCode(1); + } + } + + private boolean function isNodeAvailable() { + try { + command("!node -v").run(); + return true; + } catch (any e) { + return false; + } + } + + private void function runInteractive() { + detailOutput.output("Launching Playwright setup wizard...") + .line(); + print.cyanLine("This will initialize Playwright with interactive prompts.") + .line(); + print.cyanLine("The wizard will ask you about:"); + print.cyanLine(" - TypeScript or JavaScript"); + print.cyanLine(" - Test directory location"); + print.cyanLine(" - GitHub Actions setup"); + print.cyanLine(" - Browser installation (answer NO - use 'wheels playwright install' instead)") + .line(); + + var confirmed = ask(("Proceed with Playwright setup? [y/n]")); + if (lCase(trim(confirmed)) != "y") { + detailOutput.output("Operation cancelled by user."); + return; + } + + detailOutput.line(); + detailOutput.output("Running: npx create-playwright"); + detailOutput.line(); + + try { + command("!npx create-playwright").run(); + + detailOutput.success("Playwright setup complete!"); + detailOutput.line(); + detailOutput.nextSteps([ + "Install browsers: wheels playwright install", + "Run tests: npx playwright test", + "Open UI mode: npx playwright test --ui" + ]); + + } catch (any e) { + var errorMsg = e.message; + detailOutput.error("Playwright setup failed: #errorMsg#"); + detailOutput.line(); + + if (findNoCase("webkit", errorMsg) || findNoCase("does not support", errorMsg)) { + print.cyanLine("This usually happens when webkit fails to install on older macOS versions.") + .line(); + } + + detailOutput.output("To complete setup without browser installation:") + .line(); + print.greenLine(" wheels playwright install") + .line(); + + setExitCode(1); + } + } +} \ No newline at end of file diff --git a/cli/src/commands/wheels/playwright/install.cfc b/cli/src/commands/wheels/playwright/install.cfc new file mode 100644 index 000000000..f7e182e23 --- /dev/null +++ b/cli/src/commands/wheels/playwright/install.cfc @@ -0,0 +1,141 @@ +/** + * Install Playwright browsers + * + * Use this command after running `wheels playwright:init` if: + * - Browser installation failed during the wizard + * - You need to install specific browsers + * + * {code:bash} + * wheels playwright install + * {code} + * + * Install specific browsers: + * {code:bash} + * wheels playwright install --chromium --firefox + * {code} + * + * Note: On macOS 13 or earlier, webkit will be skipped automatically + * as it requires macOS 14+. + */ +component aliases="wheels playwright:install, wheels playwright install" extends="../base" { + + property name="detailOutput" inject="DetailOutputService@wheels-cli"; + + /** + * @chromium Install Chromium browser (default: true) + * @firefox Install Firefox browser (default: true) + * @webkit Install Webkit browser (default: false, macOS 14+ only) + */ + function run( + boolean chromium = true, + boolean firefox = true, + boolean webkit = false + ) { + try { + requireWheelsApp(getCWD()); + + detailOutput.header("Playwright Browser Installation"); + + if (!isNodeAvailable()) { + detailOutput.error("Node.js is required. Please install Node.js first."); + print.line("Visit https://nodejs.org to download and install Node.js"); + setExitCode(1); + return; + } + + var browsers = []; + if (arguments.chromium) { + arrayAppend(browsers, "chromium"); + } + if (arguments.firefox) { + arrayAppend(browsers, "firefox"); + } + if (arguments.webkit) { + if (isMacOS13OrEarlier()) { + detailOutput.statusWarning("Webkit requires macOS 14+. Skipping webkit installation."); + } else { + arrayAppend(browsers, "webkit"); + } + } + + if (arrayIsEmpty(browsers)) { + detailOutput.output("No browsers selected for installation.") + .line(); + return; + } + + detailOutput.output("Installing browsers: " & arrayToList(browsers, ", ")) + .line(); + + local.browserList = browsers.toList(" "); + detailOutput.output("Running: npx playwright install #local.browserList#") + .line(); + + try { + command("!npx playwright install #local.browserList#").run(); + + detailOutput.success("Playwright browsers installed successfully!"); + detailOutput.nextSteps([ + "Run tests: npx playwright test", + "Open UI mode: npx playwright test --ui" + ]); + + } catch (any e) { + handleInstallError(e); + } + + } catch (any e) { + detailOutput.error("Installation failed: #e.message#"); + setExitCode(1); + } + } + + private boolean function isNodeAvailable() { + try { + command("!node -v").run(); + return true; + } catch (any e) { + return false; + } + } + + private boolean function isMacOS13OrEarlier() { + try { + var result = command("!sw_vers -productVersion").run(returnOutput=true); + var version = trim(result); + + var major = listFirst(version, "."); + var minor = 0; + if (listLen(version, ".") >= 2) { + minor = listGetAt(version, 2, "."); + } + + if (major < 14) { + return true; + } + return false; + } catch (any e) { + return false; + } + } + + private void function handleInstallError(required any e) { + var errorMsg = arguments.e.message; + + if (findNoCase("webkit", errorMsg) && findNoCase("macOS", errorMsg)) { + detailOutput.error("Webkit installation failed: requires macOS 14+"); + detailOutput.line(); + detailOutput.output("To install only Chromium and Firefox:"); + detailOutput.output(" wheels playwright install --chromium --firefox") + .line(); + } else if (findNoCase("does not support", errorMsg)) { + detailOutput.error("Browser installation failed due to system compatibility."); + detailOutput.line(); + print.cyanLine("Tip: Check https://playwright.dev/docs/browsers for system requirements."); + } else { + detailOutput.error("Browser installation failed: #errorMsg#"); + } + + setExitCode(1); + } +} \ No newline at end of file diff --git a/docs/src/SUMMARY.md b/docs/src/SUMMARY.md index b9099477c..842f6eb62 100644 --- a/docs/src/SUMMARY.md +++ b/docs/src/SUMMARY.md @@ -57,6 +57,9 @@ * Testing Commands * [wheels test run](command-line-tools/commands/test/test-run.md) * [wheels advanced testing](command-line-tools/commands/test/test-advanced.md) + * Playwright Commands + * [wheels playwright:init](command-line-tools/commands/playwright/playwright-init.md) + * [wheels playwright:install](command-line-tools/commands/playwright/playwright-install.md) * Environment Management * [wheels env setup](command-line-tools/commands/environment/env-setup.md) * [wheels env list](command-line-tools/commands/environment/env-list.md) @@ -214,4 +217,4 @@ * [Installing and Using Plugins](plugins/installing-and-using-plugins.md) * [Developing Plugins](plugins/developing-plugins.md) -* [Publishing Plugins](plugins/publishing-plugins.md) +* [Publishing Plugins](plugins/publishing-plugins.md) \ No newline at end of file diff --git a/docs/src/command-line-tools/commands/README.md b/docs/src/command-line-tools/commands/README.md index 3217da169..208a25495 100644 --- a/docs/src/command-line-tools/commands/README.md +++ b/docs/src/command-line-tools/commands/README.md @@ -153,6 +153,16 @@ Commands for running and managing tests. - **`wheels test watch`** - Rerun tests on any change [Documentation](test/test-advanced.md) +## Playwright Commands + +Commands for end-to-end testing with Playwright. + +- **`wheels playwright:init`** (alias: `wheels playwright init`) - Initialize Playwright project + [Documentation](playwright/playwright-init.md) + +- **`wheels playwright:install`** (alias: `wheels playwright install`) - Install Playwright browsers + [Documentation](playwright/playwright-install.md) + ## Environment Management Commands for managing development environments and application context. diff --git a/docs/src/command-line-tools/commands/playwright/playwright-init.md b/docs/src/command-line-tools/commands/playwright/playwright-init.md new file mode 100644 index 000000000..8852d211d --- /dev/null +++ b/docs/src/command-line-tools/commands/playwright/playwright-init.md @@ -0,0 +1,183 @@ +--- +description: Initialize Playwright for end-to-end testing in your Wheels application. +--- + +# wheels playwright:init + +Initialize Playwright for end-to-end testing in your Wheels application. This command launches the official Playwright setup wizard to configure your project. + +## Usage + +```bash +wheels playwright:init +``` + +## Prerequisites + +- Node.js and npm must be installed +- You must be in a Wheels application root directory + +## Interactive Prompts + +The setup wizard will ask you: + +1. **Language preference** - TypeScript or JavaScript +2. **Test directory** - Where to put your end-to-end tests +3. **GitHub Actions** - Whether to add a CI workflow +4. **Browser installation** - Answer **NO** to this + +## Examples + +### Basic initialization + +```bash +wheels playwright:init +``` + +### What to expect + +``` +This will initialize Playwright with interactive prompts. + +The wizard will ask you about: + - TypeScript or JavaScript + - Test directory location + - GitHub Actions setup + - Browser installation (answer NO - use 'wheels playwright install' instead) +``` + +## Browser Installation + +**Important:** When the wizard asks about browser installation, answer **NO**. Use the separate `wheels playwright install` command instead, which handles browser compatibility better. + +```bash +# After initialization completes +wheels playwright install +``` + +## Browser Compatibility + +If you encounter browser installation errors (especially webkit on older macOS), the init command will automatically suggest running: + +```bash +wheels playwright install +``` + +This command: +- Installs Chromium and Firefox by default +- Skips WebKit automatically on macOS 13 or earlier (WebKit requires macOS 14+) +- Provides better error handling than the wizard + +### Browser Support Matrix + +| Browser | macOS 13 | macOS 14+ | Linux | Windows | +|---------|----------|-----------|-------|---------| +| Chromium | Yes | Yes | Yes | Yes | +| Firefox | Yes | Yes | Yes | Yes | +| WebKit | No | Yes | No | No | + +### Common Error + +``` +Error: ERROR: Playwright does not support webkit on mac13 +``` + +This happens because webkit requires macOS 14+. Answer "n" to browser installation in the wizard, then use `wheels playwright install` which handles compatibility automatically. + +## Installing Specific Browsers + +If you need to install specific browsers: + +```bash +# Install Chromium only +wheels playwright install --chromium --firefox=false --webkit=false + +# Install Firefox only +wheels playwright install --chromium=false --firefox + +# Force WebKit (only works on macOS 14+) +wheels playwright install --webkit +``` + +## Next Steps + +After initialization: + +1. **Install browsers:** + ```bash + wheels playwright install + ``` + +2. **Run tests:** + ```bash + npx playwright test + ``` + +3. **Open UI mode:** + ```bash + npx playwright test --ui + ``` + +4. **Debug tests:** + ```bash + npx playwright test --debug + ``` + +## Generated Files + +The wizard creates: + +- `playwright.config.{ts,js}` - Playwright configuration +- `tests/` or `e2e/` - Test directory (your choice during setup) +- `package.json` - Updated with Playwright dependencies +- `.github/workflows/playwright.yml` - GitHub Actions workflow (if enabled) + +## Browser Cache Location + +Browsers are cached at: + +- **macOS:** `~/Library/Caches/ms-playwright/` +- **Linux:** `~/.cache/ms-playwright/` +- **Windows:** `%LOCALAPPDATA%\ms-playwright\Cache/` + +## Verify Installation + +Check installed browsers: + +```bash +npx playwright show-browsers +``` + +Or run a quick test: + +```bash +npx playwright test --list +``` + +## CI/CD Usage + +```bash +# Install all available browsers +wheels playwright install + +# Then run tests +npx playwright test +``` + +### GitHub Actions Example + +```yaml +- name: Install Playwright + run: | + npm ci + wheels playwright install + +- name: Run E2E tests + run: npx playwright test +``` + +## Additional Resources + +- [Playwright Documentation](https://playwright.dev/docs/intro) - Official Playwright docs +- [Playwright CLI](https://playwright.dev/docs/cli) - Command-line reference +- [wheels test run](../test/test-run.md) - Run unit and integration tests \ No newline at end of file diff --git a/docs/src/command-line-tools/commands/playwright/playwright-install.md b/docs/src/command-line-tools/commands/playwright/playwright-install.md new file mode 100644 index 000000000..40af5cd60 --- /dev/null +++ b/docs/src/command-line-tools/commands/playwright/playwright-install.md @@ -0,0 +1,141 @@ +--- +description: Install Playwright browsers after initialization or for specific browsers only. +--- + +# wheels playwright:install + +Install Playwright browsers. Use this command after [`wheels playwright:init`](playwright-init.md) if browser installation failed, or to install specific browsers. + +## Usage + +```bash +wheels playwright:install [options] +``` + +## Options + +| Option | Type | Default | Description | +|--------|------|---------|-------------| +| `--chromium` | boolean | `true` | Install Chromium browser | +| `--firefox` | boolean | `true` | Install Firefox browser | +| `--webkit` | boolean | `false` | Install WebKit browser (macOS 14+ only) | + +## Examples + +### Install default browsers (Chromium + Firefox) + +```bash +wheels playwright:install +``` + +### Install specific browsers + +```bash +# Chromium only +wheels playwright:install --chromium=false --firefox=false + +# Firefox only +wheels playwright:install --chromium=false + +# Include WebKit (macOS 14+ only) +wheels playwright:install --webkit +``` + +## When to Use This Command + +This command is useful when: + +1. **Browser installation failed during init** - The init wizard may fail on webkit +2. **You need specific browsers only** - Save space by installing only what you need +3. **Reinstalling browsers** - After upgrading Playwright version + +## Browser Compatibility + +| Browser | macOS 13 | macOS 14+ | Linux | Windows | +|---------|----------|-----------|-------|---------| +| Chromium | Yes | Yes | Yes | Yes | +| Firefox | Yes | Yes | Yes | Yes | +| WebKit | No | Yes | No | No | + +### WebKit on macOS 13 + +WebKit requires macOS 14 (Sonoma) or later. If you try: + +```bash +wheels playwright:install --webkit +``` + +On macOS 13 or earlier, you'll see: + +``` +[WARNING] Webkit requires macOS 14+. Skipping webkit installation. +``` + +WebKit is skipped automatically, and Chromium and Firefox install normally. + +## Error Handling + +### WebKit Error + +If you encounter: + +``` +Error: ERROR: Playwright does not support webkit on mac13 +``` + +**Solution:** Don't use `--webkit` on macOS 13: + +```bash +wheels playwright:install --webkit=false +``` + +### Installation Fails + +If browser installation fails: + +```bash +# Try installing specific browsers +wheels playwright:install --chromium --firefox + +# Or install manually +npx playwright install chromium +``` + +## Browser Cache Location + +Browsers are cached at: + +- **macOS:** `~/Library/Caches/ms-playwright/` +- **Linux:** `~/.cache/ms-playwright/` +- **Windows:** `%LOCALAPPDATA%\ms-playwright\Cache/` + +## Verify Installation + +Check installed browsers: + +```bash +npx playwright show-browsers +``` + +Or run a quick test: + +```bash +npx playwright test --list +``` + +## CI/CD Usage + +```yaml +- name: Install Playwright + run: | + npm ci + wheels playwright install + +- name: Run E2E tests + run: npx playwright test +``` + +## See Also + +- [`wheels playwright:init`](playwright-init.md) - Initialize Playwright project +- [Playwright Installation](https://playwright.dev/docs/browsers) - Official browser installation docs \ No newline at end of file