desktop-workflow-to-playwright

# Desktop Workflow to Playwright Converter You are a senior QA automation engineer converting human-readable desktop workflow documentation into a self-contained Playwright test project. Your job is to read workflows from `/workflows/desktop-workflows.md`, translate every step into idiomatic Playwright code, and produce a fully functional test project at `e2e/desktop/` that includes authentication scaffolding, CI configuration, and Vercel deployment protection headers. Every generated test must be runnable out of the box with `cd e2e/desktop && npm ci && npx playwright test`. --- ## Task List Integration Task lists track agent progress, provide user visibility, enable session recovery after interruptions, record review iterations, and serve as an audit trail of what was parsed, generated, and approved. ### Task Hierarchy Every run of this skill creates the following task tree. Tasks are completed in order. ``` [Main Task] "Convert: Desktop Workflows to Playwright" +-- [Parse Task] "Parse: desktop-workflows.md" +-- [Check Task] "Check: Existing e2e/desktop/ project" +-- [Selector Task] "Selectors: Find for all workflows" (agent) +-- [Generate Task] "Generate: Playwright project" +-- [Approval Task] "Approval: Review generated tests" +-- [Write Task] "Write: e2e/desktop/" ``` ### Session Recovery Check At the very start of every invocation, check for an existing task list before doing anything else. ``` 1. Read the current TaskList. 2. If no task list exists -> start from Phase 1. 3. If a task list exists: a. Find the last task with status "completed". b. Determine the corresponding phase. c. Inform the user: "Resuming from Phase N -- [phase name]." d. Skip to that phase's successor. ``` See the full Session Recovery section near the end of this document for the complete decision tree. --- ## The Translation Pipeline This skill reads a single input file and produces a complete test project. ``` /workflows/desktop-workflows.md -> e2e/desktop/ +-- playwright.config.ts +-- package.json +-- tests/ | +-- auth.setup.ts | +-- workflows.spec.ts +-- .github/workflows/e2e.yml +-- .gitignore ``` Every file in the output is self-contained. The project has no dependency on the source workflow markdown at runtime -- the workflows are fully compiled into Playwright test code. --- ## Phase 1: Parse Workflows Read the workflow markdown file, extract each workflow with its metadata, and build an internal representation that drives all subsequent phases. > **Format reference:** The input workflow file follows the format defined in [`docs/workflow-format.md`](../../docs/workflow-format.md). See that spec for details on heading format, metadata comments, step format, recognized verbs, and assertion types. ### Step 1: Locate the Workflow File Use Glob to search for the workflow file: ``` Glob patterns: - workflows/desktop-workflows.md - workflows/browser-workflows.md ``` If no file is found, stop and inform the user: ``` No desktop workflow file found at /workflows/desktop-workflows.md. Please run "generate desktop workflows" first, or provide the path to your workflow file. ``` ### Step 2: Read and Parse Read the entire workflow file. For each workflow, extract: 1. **Workflow number** -- from the `## Workflow [N]:` heading 2. **Workflow name** -- the descriptive name after the number 3. **Auth requirement** -- from `<!-- auth: required -->` or `<!-- auth: no -->` 4. **Priority** -- from `<!-- priority: core -->`, `<!-- priority: feature -->`, or `<!-- priority: edge -->` 5. **Estimated steps** -- from `<!-- estimated-steps: N -->` 6. **Deprecated flag** -- from `<!-- deprecated: true -->` (skip deprecated workflows) 7. **Preconditions** -- the bullet list under `**Preconditions:**` 8. **Steps** -- each numbered step and its verification sub-steps 9. **Postconditions** -- the bullet list under `**Postconditions:**` ### Step 3: Build Internal Representation Organize workflows into a structured list: ``` workflows = [ { number: 1, name: "User Registration", auth: false, priority: "core", estimatedSteps: 7, preconditions: ["User is on the landing page"], steps: [ { action: "Navigate to /signup", verify: "Signup form is visible" }, { action: "Type 'John' in the first name field", verify: "Field shows 'John'" }, ... ], postconditions: ["User account exists", "User is redirected to dashboard"] }, ... ] ``` Skip any workflow marked `<!-- deprecated: true -->`. Log skipped workflows to the user: ``` Parsed 25 workflows from desktop-workflows.md. Skipped 2 deprecated workflows: #7 (Legacy Export), #15 (Old Settings Page). Converting 23 active workflows. ``` ### Step 4: Create Tasks ``` TaskCreate: title: "Convert: Desktop Workflows to Playwright" status: "in_progress" metadata: source_file: "/workflows/desktop-workflows.md" total_workflows: 25 active_workflows: 23 deprecated_skipped: 2 output_path: "e2e/desktop/" ``` ``` TaskCreate: title: "Parse: desktop-workflows.md" status: "completed" metadata: workflows_parsed: 25 active: 23 deprecated: 2 core: 5 feature: 12 edge: 6 ``` --- ## Phase 2: Check Existing Project Before generating, check whether an `e2e/desktop/` directory already exists. ### Step 1: Check for Existing Files Use Glob to check for existing project files: ``` Glob patterns: - e2e/desktop/playwright.config.ts - e2e/desktop/package.json - e2e/desktop/tests/*.spec.ts - e2e/desktop/tests/*.setup.ts ``` ### Step 2: Determine Strategy **If no existing project is found:** - Proceed with fresh generation. - No further decisions needed. **If an existing project is found:** - Read the existing `tests/workflows.spec.ts` to understand what is already covered. - Use `AskUserQuestion` to determine the user's intent: ``` I found an existing Playwright project at e2e/desktop/ with [N] existing test blocks. How would you like to proceed? 1. **Overwrite** -- Replace all generated files with fresh output 2. **Update** -- Add new tests for new workflows, update changed workflows, preserve custom modifications 3. **Cancel** -- Stop and keep existing files unchanged ``` ### Step 3: Create the Check Task ``` TaskCreate: title: "Check: Existing e2e/desktop/ project" status: "completed" metadata: existing_project: true # or false existing_tests: 18 # count of describe blocks strategy: "overwrite" # or "update" or "fresh" ``` --- ## Phase 3: Selector Discovery [DELEGATE TO AGENT] Spawn an Explore agent to analyze the codebase and find the best Playwright selectors for elements referenced in the workflows. ### Step 1: Create the Task ``` TaskCreate: title: "Selectors: Find for all workflows" status: "in_progress" metadata: agent_type: "explore" focus: "selectors" ``` ### Step 2: Spawn the Explore Agent Spawn via the Task tool with the following parameters: ``` Task tool: subagent_type: "Explore" model: "sonnet" prompt: | You are a QA exploration agent focused on finding Playwright selectors. Your job is to find the best Playwright-compatible selectors for every interactive element referenced in the workflow documentation. Use Read, Grep, and Glob to explore the codebase. Do NOT use any browser tools. Here are the workflows I need selectors for: [Paste the parsed workflow list with all step actions] For each element, search for: data-testid, aria-label, role attributes, <label> associations, placeholder text, and visible text content. Prefer selectors in this order (Playwright recommended): 1. getByRole 2. getByLabel 3. getByPlaceholder 4. getByText 5. getByTestId 6. CSS selector (last resort) Return findings as: ## Selector Map | Workflow | Step | Element Description | Recommended Selector | Fallback Selector | |----------|------|--------------------|--------------------|-------------------| | 1 | 2 | "Save" button | getByRole('button', { name: 'Save' }) | getByTestId('save-btn') | ## Missing Selectors - Elements not found in codebase (suggest data-testid additions) ## Selector Quality Report - Counts by selector type and elements not found ``` ### Step 3: Process Agent Results When the Explore agent returns, merge its Selector Map into the internal workflow representation. Each step now has a concrete Playwright selector to use during code generation. ``` TaskUpdate: title: "Selectors: Find for all workflows" status: "completed" metadata: selectors_found: 87 selectors_missing: 4 by_role: 42 by_label: 23 by_testid: 15 by_text: 7 css_fallback: 0 ``` For any elements the agent could not locate, generate a comment in the test code: ```typescript // TODO: Add data-testid for this element -- selector not found in codebase await page.locator('[data-testid="unknown-element"]').click(); ``` --- ## Phase 4: Generate Playwright Project This is the core generation phase. Generate ALL project files using the parsed workflows, discovered selectors, and configuration templates. ### Step 1: Create the Generation Task ``` TaskCreate: title: "Generate: Playwright project" status: "in_progress" metadata: files_to_generate: 6 ``` ### Step 2: Generate playwright.config.ts Generate the Playwright configuration file with Desktop Chrome as the primary project, auth setup as a dependency, and Vercel deployment protection bypass headers. ```typescript import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './tests', fullyParallel: true, retries: process.env.CI ? 2 : 0, reporter: process.env.CI ? 'html' : [['list'], ['html']], use: { baseURL: process.env.BASE_URL || 'http://localhost:3000', trace: 'on-first-retry', extraHTTPHeaders: { ...(process.env.VERCEL_AUTOMATION_BYPASS_SECRET && { 'x-vercel-protection-bypass': process.env.VERCEL_AUTOMATION_BYPASS_SECRET, 'x-vercel-set-bypass-cookie': 'samesitenone', }), }, }, projects: [ { name: 'setup', testMatch: /.*\.setup\.ts/ }, { name: 'desktop-chromium', use: { ...devices['Desktop Chrome'], storageState: 'playwright/.auth/user.json', }, dependencies: ['setup'], }, ], }); ``` Key configuration decisions: `fullyParallel` for speed, `retries: 2` in CI only for flaky test mitigation, `trace: 'on-first-retry'` for debugging failures, `baseURL` from environment for localhost vs deployed URL flexibility. Vercel bypass headers are conditionally applied only when `VERCEL_AUTOMATION_BYPASS_SECRET` is set. The `setup` project runs `auth.setup.ts` before any test that depends on `storageState`. ### Step 3: Generate tests/auth.setup.ts Generate the authentication setup file. This file is ALWAYS generated, even if no workflows require authentication. When credentials are not provided, it gracefully saves an empty storage state so tests that do not require auth still run. ```typescript import { test as setup } from '@playwright/test'; import * as fs from 'fs'; import * as path from 'path'; const authFile = 'playwright/.auth/user.json'; setup('authenticate', async ({ page }) => { // Check for saved profiles from /setup-profiles const profilesDir = path.join(process.cwd(), '.playwright', 'profiles'); const profilesConfig = path.join(process.cwd(), '.playwright', 'profiles.json'); if (fs.existsSync(profilesConfig)) { const config = JSON.parse(fs.readFileSync(profilesConfig, 'utf-8')); const profileName = Object.keys(config.profiles)[0]; const profilePath = path.join(profilesDir, `${profileName}.json`); if (fs.existsSync(profilePath)) { const state = JSON.parse(fs.readFileSync(profilePath, 'utf-8')); fs.mkdirSync(path.dirname(authFile), { recursive: true }); fs.writeFileSync(authFile, JSON.stringify(state)); return; } } // Fall back to env-var credentials if (!process.env.TEST_EMAIL || !process.env.TEST_PASSWORD) { await page.context().storageState({ path: authFile }); return; } await page.goto('/login'); await page.getByLabel('Email').fill(process.env.TEST_EMAIL); await page.getByLabel('Password').fill(process.env.TEST_PASSWORD); await page.getByRole('button', { name: /sign in|log in/i }).click(); await page.waitForURL('**/dashboard'); await page.context().storageState({ path: authFile }); }); ``` When the project has profiles from `/setup-profiles`, the auth setup reads `profiles.json` to discover the first available profile and copies its storageState directly — no credentials needed for local test runs. In CI, credentials from environment variables are used instead. Key auth decisions: graceful fallback saves empty auth state when credentials are not set, so non-auth tests still pass. Regex button matcher (`/sign in|log in/i`) handles common variations. When generating for a specific application, adapt the login route, field labels, button text, and post-login URL based on selector discovery results from Phase 3. ### Step 4: Generate package.json ```json {