Skip to content

Complete creating-a-workflow screenshots: page selection, workflow workspace #20

@deanleigh

Description

@deanleigh

Follow-up to #19. The first-pass Playwright screenshot spec captures 11 of the 13 planned screenshots for `creating-a-workflow.md`. Two are skipped because they require interacting with UUI elements that resist Playwright's default click handling:

Missing:

  • `12-sidebar-pages-updated.png` — sidebar after selecting fewer than all pages
  • `13-workflow-list-with-new.png` — workflows table with the newly created workflow
  • `14-workflow-workspace.png` — the opened workflow workspace

Why these specifically:

`12` requires selecting an individual page in the page-picker modal. The cards are `` which fires `selected`/`deselected` events via shadow DOM. A plain `.click()` on the card doesn't register as a selection, and `dispatchEvent('selected')` didn't trigger Lit's reactive update either. Needs investigation.

`13` and `14` depend on `12` — the spec currently cancels out of the pages dialog without creating the workflow, so there's no new row to screenshot and no workspace to open.

Options:

  1. Investigate the UUI select-only event model properly (read UUI source, find the right event shape)
  2. Click the selection indicator on the card (the small checkbox that appears on hover) via a precise coordinate click
  3. Use `page.evaluate` to reach into the Lit component and call its selection method directly
  4. Accept the limitation and skip the per-page selection in docs, describing it in prose only

Option 4 is the current state. Options 1-3 would unlock all three missing screenshots.

Not blocking: the current 11 screenshots deliver the core of the Create Workflow flow. The missing three add polish but aren't load-bearing.

See `tests/e2e/creating-a-workflow.screenshots.ts` for current state.

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationenhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions