feat: add playwright-pro plugin — production-grade Playwright testing toolkit (#254)

Complete Claude Code plugin with:
- 9 skills (/pw:init, generate, review, fix, migrate, coverage, testrail, browserstack, report)
- 3 specialized agents (test-architect, test-debugger, migration-planner)
- 55 test case templates across 11 categories (auth, CRUD, checkout, search, forms, dashboard, settings, onboarding, notifications, API, accessibility)
- TestRail MCP server (TypeScript) — 8 tools for bidirectional sync
- BrowserStack MCP server (TypeScript) — 7 tools for cross-browser testing
- Smart hooks (auto-validate tests, auto-detect Playwright projects)
- 6 curated reference docs (golden rules, locators, assertions, fixtures, pitfalls, flaky tests)
- Leverages Claude Code built-ins (/batch, /debug, Explore subagent)
- Zero-config for core features; TestRail/BrowserStack via env vars
- Both TypeScript and JavaScript support throughout

Co-authored-by: Leo <leo@openclaw.ai>

engineering-team/playwright-pro/templates/forms/conditional-fields.md

@@ -0,0 +1,120 @@
+# Conditional Fields Template
+
+Tests show/hide fields based on selection and correct validation of visible fields only.
+
+## Prerequisites
+- Form at `{{baseUrl}}/{{formPath}}`
+- Trigger field: `{{triggerField}}` (e.g. country, type selector)
+- Conditional field shown when value is `{{triggerValue}}`
+
+---
+
+## TypeScript
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Conditional Fields', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('{{baseUrl}}/{{formPath}}');
+  });
+
+  // Happy path: conditional field shown on trigger
+  test('shows conditional field when trigger value selected', async ({ page }) => {
+    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeHidden();
+    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
+    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeVisible();
+  });
+
+  // Happy path: conditional field hidden when trigger changes
+  test('hides conditional field when trigger changes back', async ({ page }) => {
+    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
+    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeVisible();
+    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{nonTriggerValue}}');
+    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeHidden();
+  });
+
+  // Happy path: form submits with conditional field filled
+  test('submits form when conditional field is shown and filled', async ({ page }) => {
+    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
+    await page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i }).fill('{{conditionalFieldValue}}');
+    await page.getByRole('button', { name: /submit/i }).click();
+    await expect(page.getByRole('alert')).toContainText(/submitted|saved/i);
+  });
+
+  // Error case: conditional field required when visible
+  test('validates conditional field when it is visible', async ({ page }) => {
+    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
+    await page.getByRole('button', { name: /submit/i }).click();
+    await expect(page.getByText(/{{conditionalFieldLabel}}.*required/i)).toBeVisible();
+  });
+
+  // Error case: hidden field not validated
+  test('does not validate conditional field when hidden', async ({ page }) => {
+    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{nonTriggerValue}}');
+    await page.getByRole('button', { name: /submit/i }).click();
+    await expect(page.getByText(/{{conditionalFieldLabel}}.*required/i)).toBeHidden();
+  });
+
+  // Edge case: conditional field value cleared when hidden
+  test('clears conditional field value when field is hidden', async ({ page }) => {
+    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
+    await page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i }).fill('some value');
+    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{nonTriggerValue}}');
+    // Re-show and verify value is cleared
+    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
+    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toHaveValue('');
+  });
+
+  // Edge case: radio trigger shows/hides field
+  test('shows field based on radio button selection', async ({ page }) => {
+    await page.getByRole('radio', { name: '{{radioTriggerLabel}}' }).check();
+    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeVisible();
+    await page.getByRole('radio', { name: '{{radioOtherLabel}}' }).check();
+    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeHidden();
+  });
+});
+```
+
+---
+
+## JavaScript
+
+```javascript
+const { test, expect } = require('@playwright/test');
+
+test.describe('Conditional Fields', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('{{baseUrl}}/{{formPath}}');
+  });
+
+  test('shows conditional field when trigger selected', async ({ page }) => {
+    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeHidden();
+    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
+    await expect(page.getByRole('textbox', { name: /{{conditionalFieldLabel}}/i })).toBeVisible();
+  });
+
+  test('validates visible conditional field on submit', async ({ page }) => {
+    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{triggerValue}}');
+    await page.getByRole('button', { name: /submit/i }).click();
+    await expect(page.getByText(/{{conditionalFieldLabel}}.*required/i)).toBeVisible();
+  });
+
+  test('does not validate hidden conditional field', async ({ page }) => {
+    await page.getByRole('combobox', { name: /{{triggerField}}/i }).selectOption('{{nonTriggerValue}}');
+    await page.getByRole('button', { name: /submit/i }).click();
+    await expect(page.getByText(/{{conditionalFieldLabel}}.*required/i)).toBeHidden();
+  });
+});
+```
+
+## Variants
+| Variant | Description |
+|---------|-------------|
+| Show on trigger | Selecting value reveals hidden field |
+| Hide on change | Changing back hides field again |
+| Submit with field | Visible field filled → success |
+| Validate visible | Visible empty field → required error |
+| Skip hidden | Hidden field not validated |
+| Clear on hide | Value cleared when field hidden |
+| Radio trigger | Radio button controls field visibility |