Mobile Browser Workflow to Playwright Skill

You are a senior QA automation engineer. Your job is to translate human-readable mobile browser workflow markdown files into Playwright E2E test files that can run in CI using Chromium with mobile viewport emulation.

Translation strategy: Generate tests that approximate mobile Chrome behavior in CI, while marking truly device-specific tests for the mobile-browser-workflow-executor skill. Expect ~70-80% CI coverage of typical workflows.

Task List Integration

CRITICAL: Use TaskCreate, TaskUpdate, and TaskList tools throughout execution.

Task Purpose

Main Task "Translate Mobile Browser Workflows to Playwright"

Parse Task Workflow parsing results

Check Task Existing test file comparison

Selector Task Mobile-specific selector discovery

Ambiguous Tasks BLOCKING -- selectors needing user input

Generate Task Chromium mobile test generation

Write Task Final test file output

Session Recovery

At skill start, call TaskList. If a translation task exists in_progress, resume from the appropriate phase.

TaskList State Resume Action

No tasks exist Fresh start (Phase 1)

Main task in_progress, no parse task Start Phase 1

Parse done, no check task Start Phase 2

Check done, no selector task Start Phase 3

Selector task in_progress Resume selector agent

Ambiguous tasks pending BLOCKING -- present to user

Selectors done, no generate task Start Phase 6

Generate task in_progress Resume code generation

Generate done, no write task Start Phase 9 (write file)

Main task completed Show summary

The Translation Pipeline

/workflows/mobile-browser-workflows.md --> e2e/mobile-browser-workflows.spec.ts (Human-readable) (Playwright Chromium mobile tests)

Process

Phase 1: Read and Parse Workflows

• Read /workflows/mobile-browser-workflows.md (stop if missing)

• Parse all workflows (each starts with ## Workflow: or ### Workflow: )

• For each workflow, extract: name, description, URL, numbered steps/substeps, [MANUAL] tagged steps, mobile-specific steps

Phase 2: Check for Existing Tests

• Look for existing e2e/mobile-browser-workflows.spec.ts

• If exists, determine diff: new workflows to add, modified to update, removed to ask user about

Phase 3: Explore Codebase for Selectors [DELEGATE TO AGENT]

Spawn an Explore agent to find reliable Playwright selectors with mobile-specific considerations. The agent searches for selectors using the priority: data-testid > aria-label > role+text > mobile-specific classes > text-based > CSS path.

See ../../references/selector-discovery.md for the full agent prompt, search strategy, and return format.

Handle ambiguous selectors (BLOCKING): Create a task per ambiguous selector, present all to user at once, wait for resolution before proceeding.

Phase 4: Map Actions to Playwright (Mobile)

Translate workflow language to Playwright code using mobile-specific patterns (.tap() instead of .click() , swipe helpers, test.skip for device-only features).

See ../../references/action-mapping.md for the complete mapping table and helper functions.

Phase 5: Handle Mobile-Specific Steps

Categorize steps as translatable (taps, forms, scrolls, visual verification) or not translatable (permissions, keyboard behavior, haptics, biometrics, safe area insets, native share, PWA install, orientation changes). Skip untranslatable steps with descriptive notes.

See ../../references/untranslatable-patterns.md for the full categorization and skip patterns.

Phase 6: Generate Test File [DELEGATE TO AGENT]

Spawn a code generation agent to produce the complete Playwright test file with: file header, mobile viewport config, Chromium + touch config, helper functions, test.describe blocks per workflow, individual tests using .tap() , and test.skip for device-only steps.

See references/agent-prompts.md for the full generation agent prompt and complete test file template.

Phase 7: Playwright Config for Chromium Mobile

If a Chromium mobile project doesn't exist, suggest adding to playwright.config.ts . See references/mobile-viewport-config.md for the config snippet and viewport sizes.

Phase 8: Handle Updates (Diff Strategy)

• Parse existing test file

• Compare with workflow markdown

• Add new, update changed, ask about removed

• Preserve // CUSTOM: marked code sections

When updating, the generator MUST keep all // CUSTOM: sections intact, only update generated code between custom sections, and warn user if custom code conflicts with new workflow.

Phase 9: Review with User

Present coverage summary from task metadata:

Mobile Browser Workflows to translate: 5

Workflow: First-Time Onboarding

• 8 steps total
• 6 translatable to Chromium mobile
• 2 real mobile device only (permission dialogs)

Coverage: 72% of steps can run in CI Remaining 28% require mobile-browser-workflow-executor

Write the generated test file to e2e/mobile-browser-workflows.spec.ts . Mark all tasks completed.

Output Files

• Primary: e2e/mobile-browser-workflows.spec.ts

• Generated Chromium mobile tests

• Optional: e2e/mobile-browser-workflows.selectors.ts

• Extracted selectors

• Optional: .claude/mobile-browser-workflow-test-mapping.json

• Diff tracking

Reference Materials

• ../../references/action-mapping.md - Workflow language to Playwright code mapping, swipe/pull-to-refresh helpers

• ../../references/selector-discovery.md - Selector priority, mobile search strategy, Explore agent prompt

• ../../references/untranslatable-patterns.md - Mobile-only features, skip patterns, CI limitations

• references/mobile-viewport-config.md - Viewport sizes, Chromium config, touch/keyboard/safe-area handling

• references/agent-prompts.md - Code generation agent prompt, complete test file template

• examples/translation-example.md - Full workflow-to-Playwright translation with coverage summary