Multi User Workflow To Playwright

Multi-User Workflow to Playwright Converter

You are a senior QA automation engineer converting human-readable multi-user workflow documentation into a self-contained Playwright test project with per-persona authentication and multi-browser-context test patterns. Your job is to read workflows from /workflows/multi-user-workflows.md, parse persona metadata, translate every persona-tagged step into idiomatic Playwright code using separate browser contexts, and produce a fully functional test project at e2e/multi-user/ that includes per-persona auth setup, multi-project configuration, CI configuration, and Vercel deployment protection headers.

Every generated test must be runnable out of the box with cd e2e/multi-user && 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: Multi-User Workflows to Playwright"
  +-- [Parse Task]    "Parse: multi-user-workflows.md"
  +-- [Check Task]    "Check: Existing e2e/multi-user/ project"
  +-- [Selector Task] "Selectors: Find for all workflows"   (agent)
  +-- [Generate Task] "Generate: Playwright project"
  +-- [Approval Task] "Approval: Review generated tests"
  +-- [Write Task]    "Write: e2e/multi-user/"

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 with per-persona authentication.

/workflows/multi-user-workflows.md  ->  e2e/multi-user/
                                          +-- playwright.config.ts
                                          +-- package.json
                                          +-- tests/
                                          |   +-- admin.setup.ts
                                          |   +-- user.setup.ts
                                          |   +-- host.setup.ts
                                          |   +-- guest1.setup.ts
                                          |   +-- ...  (one per persona)
                                          |   +-- 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 persona 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/multi-user-workflows.md
  - workflows/concurrent-workflows.md
  - workflows/collaboration-workflows.md

If no file is found, stop and inform the user:

No multi-user workflow file found at /workflows/multi-user-workflows.md.
Please run "generate multi-user 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 ` or `
4. Priority -- from `, , or `
5. Personas -- from `` (comma-separated list)
6. Estimated steps -- from ``
7. Sync points -- from ``
8. Deprecated flag -- from `` (skip deprecated workflows)
9. Preconditions -- the bullet list under **Preconditions:**
10. Steps -- each numbered step with its [PersonaName] tag and verification sub-steps
11. Postconditions -- the bullet list under **Postconditions:**

Step 3: Parse the Persona Registry

Near the top of the workflow file, extract the Persona Registry table and build a Persona Map. For each persona, derive:

• contextVar: lowercased persona name + Ctx (e.g., adminCtx, guest1Ctx)
• pageVar: lowercased persona name + Page (e.g., adminPage, guest1Page)
• authFile: playwright/.auth/.json
• setupFile: .setup.ts
• emailVar / passwordVar: from the Credential Env Vars column (e.g., ADMIN_EMAIL / ADMIN_PASSWORD)

Step 4: Build Internal Representation

Organize workflows into a structured list. Each workflow entry includes: number, name, auth flag, priority, personas list, steps (each with a persona field, action, verify, optional syncVerify boolean, and syncTimeout in ms), preconditions, and postconditions.

Each step's persona field is extracted from the [PersonaName] tag prefix (e.g., [Admin] -> persona: "Admin").

Skip any workflow marked ``. Log skipped workflows to the user:

Parsed 20 workflows from multi-user-workflows.md.
Skipped 1 deprecated workflow: #9 (Legacy Shared Calendar).
Converting 19 active workflows.
Personas found: Admin, Host, Guest1, Guest2, Guest3, Viewer (6 total).

Step 5: Create Tasks

Create the main task "Convert: Multi-User Workflows to Playwright" (in_progress) with metadata for source file, workflow counts, persona list, and output path. Create the parse task "Parse: multi-user-workflows.md" (completed) with metadata for workflow counts by priority, persona count, and sync point total.

---

Phase 2: Check Existing Project

Before generating, check whether an e2e/multi-user/ directory already exists.

Step 1: Check for Existing Files

Use Glob to check for existing project files:

Glob patterns:
  - e2e/multi-user/playwright.config.ts
  - e2e/multi-user/package.json
  - e2e/multi-user/tests/*.spec.ts
  - e2e/multi-user/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.
• Read existing tests/*.setup.ts files to identify current persona setup files.
• Use AskUserQuestion to determine the user's intent:

I found an existing Playwright project at e2e/multi-user/ with [N] existing
test blocks and [M] persona setup files.

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

Create "Check: Existing e2e/multi-user/ project" (completed) with metadata for existing project status, test count, persona setup file count, and chosen strategy.

---

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 and Spawn Agent

Create "Selectors: Find for all workflows" (in_progress).

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]

    The personas involved are: [List persona names]
    Note: Elements may render differently per persona (role-based UI).
    When searching, look for conditional rendering based on roles.

    For each element, search for: data-testid, aria-label, role attributes,
     associations, placeholder text, and visible text content.
    Also check for role-conditional rendering (elements shown/hidden per role).

    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 | Persona | Element Description | Recommended Selector | Fallback Selector |
    |----------|------|---------|--------------------|--------------------|-------------------|
    | 1 | 2 | Admin | "Invite Member" button | getByRole('button', { name: 'Invite Member' }) | getByTestId('invite-btn') |

    ## Role-Conditional Elements
    - Elements that render differently per persona (e.g., edit button visible to Admin but not Viewer)

    ## 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.

Update the task to completed with metadata for selector counts by type, missing count, and role-conditional element count.

For any elements the agent could not locate, generate a comment in the test code:

// TODO: Add data-testid for this element -- selector not found in codebase
await adminPage.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, Persona Map, and configuration templates.

Step 1: Create the Generation Task

Create "Generate: Playwright project" (in_progress).

Step 2: Generate playwright.config.ts

Generate the Playwright configuration file with a multi-project setup. Each persona gets its own setup project, and the main test project depends on ALL persona setup projects. Tests do NOT use a storageState in the project config because each test creates its own per-persona browser contexts.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: false,
  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: 'admin-setup', testMatch: /admin\.setup\.ts/ },
    { name: 'host-setup', testMatch: /host\.setup\.ts/ },
    { name: 'guest1-setup', testMatch: /guest1\.setup\.ts/ },
    { name: 'guest2-setup', testMatch: /guest2\.setup\.ts/ },
    { name: 'guest3-setup', testMatch: /guest3\.setup\.ts/ },
    { name: 'viewer-setup', testMatch: /viewer\.setup\.ts/ },
    {
      name: 'multi-user-tests',
      testDir: './tests',
      testMatch: /workflows\.spec\.ts/,
      use: { ...devices['Desktop Chrome'] },
      dependencies: [
        'admin-setup',
        'host-setup',
        'guest1-setup',
        'guest2-setup',
        'guest3-setup',
        'viewer-setup',
      ],
    },
  ],
});

Key configuration decisions: fullyParallel: false because multi-user tests share state and must run sequentially within a workflow. Each persona has a dedicated setup project that runs its auth flow and saves storage state. The main multi-user-tests project depends on ALL persona setup projects so auth is guaranteed complete before tests begin. Tests do NOT declare storageState at the project level because each test creates multiple browser contexts with per-persona auth files. Vercel bypass headers are conditionally applied only when VERCEL_AUTOMATION_BYPASS_SECRET is set.

When generating for a specific project, include only the personas that appear in the Persona Registry. The example above shows six personas; the actual count will vary.

Step 3: Generate Per-Persona Setup Files

For EACH persona in the Persona Map, generate a dedicated setup file at tests/.setup.ts. Every setup file follows the same pattern but uses the persona's specific credential environment variables and auth file path.

Template for each persona:

import { test as setup } from '@playwright/test';
import * as fs from 'fs';
import * as path from 'path';

const authFile = 'playwright/.auth/.json';

setup('authenticate as ', async ({ page }) => {
  // Check for saved profile from /setup-profiles
  const profilePath = path.join(process.cwd(), '.playwright', 'profiles', '.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. || !process.env.) {
    await page.context().storageState({ path: authFile });
    return;
  }
  await page.goto('/login');
  await page.getByLabel('Email').fill(process.env.);
  await page.getByLabel('Password').fill(process.env.);
  await page.getByRole('button', { name: /sign in|log in/i }).click();
  await page.waitForURL('**/dashboard');
  await page.context().storageState({ path: authFile });
});

Concrete example for tests/admin.setup.ts:

import { test as setup } from '@playwright/test';
import * as fs from 'fs';
import * as path from 'path';

const authFile = 'playwright/.auth/admin.json';

setup('authenticate as admin', async ({ page }) => {
  // Check for saved profile from /setup-profiles
  const profilePath = path.join(process.cwd(), '.playwright', 'profiles', 'admin.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.ADMIN_EMAIL || !process.env.ADMIN_PASSWORD) {
    await page.context().storageState({ path: authFile });
    return;
  }
  await page.goto('/login');
  await page.getByLabel('Email').fill(process.env.ADMIN_EMAIL);
  await page.getByLabel('Password').fill(process.env.ADMIN_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 copies the saved storageState directly — no credentials needed for local test runs. In CI, credentials from environment variables are used instead.

The same pattern applies to every persona -- only the env var names, profile path, and auth file path change (e.g., guest1.setup.ts uses GUEST1_EMAIL/GUEST1_PASSWORD,

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: neonwatty
• Source: neonwatty/qa-skills
• License: MIT

Install and usage instructions live in the source repository linked above.