Skip to content

Add comprehensive Playwright E2E test suite for V3 UI#1084

Merged
Tim020 merged 4 commits into
devfrom
feature/v3-e2e-playwright-tests
May 25, 2026
Merged

Add comprehensive Playwright E2E test suite for V3 UI#1084
Tim020 merged 4 commits into
devfrom
feature/v3-e2e-playwright-tests

Conversation

@Tim020
Copy link
Copy Markdown
Contributor

@Tim020 Tim020 commented May 25, 2026

Summary

  • Adds a full Playwright E2E test suite for the Vue 3 frontend (client-v3/), covering every user-facing workflow across 14 spec files (148 tests)
  • Includes a GitHub Actions workflow that spins up a clean backend server and runs the suite against Chromium and Firefox on every push/PR
  • Fixes two minor V3 component bugs uncovered during test development (ConfigShows.vue form field naming, ConfigUsers.vue modal ref typing)

Test coverage

Spec Area
01 First run / initial setup
02 Authentication (login, logout, password guards)
03 System config: shows, users, RBAC, settings, system, logs, backups
04 Show config: show details
05 Show config: acts & scenes
06 Show config: characters & groups
07 Show config: stage (props, scenery, crew, stage manager allocations)
08 Show config: cue types
09 Show config: microphone CRUD, allocations, timeline, density, availability
10 Show config: script editing, save, stage direction styles, cue add/edit/delete
11 Show config: script revisions & compiled scripts
12 Show config: sessions & tags
13 Live show: start/stop session, leader/follower sync, stage manager mode
14 User settings: personal settings, password change, API token

Key implementation notes

  • All specs run serially in a single browser context per file, sharing DB state accumulated from earlier specs — spec ordering matters
  • Global setup starts the Python backend with a temporary SQLite DB; global teardown kills it and cleans up
  • Several BVN-specific patterns required targeted fixes:
    • v-show DOM persistence: BVN modals stay in the DOM when closed, so closed modal content can match generic locators in later tests — fixed with .first(), type-scoping (select#id), and container filtering
    • Modal stacking: ScriptLineCueEditor.deleteCue() opens a ConfirmDialog (BVN modal) on top of the Edit Cue modal — confirmDialog() was picking the wrong modal's button; fixed by filtering to the stacked dialog by .modal-title text
    • MicAllocations onMounted timing: internalState is populated from the Pinia store at mount time; navigating to the Mics page before any mics exist left the component with empty state — fixed by re-navigating after mic creation
    • cue-button / add-cue-btn class overlap: the add-cue button shares the cue-button class; using .first() after addCue could hit the add button before the WS update arrived — fixed with :not(.add-cue-btn) scoping

Test plan

  • CI green on Chromium (primary) and Firefox
  • Local run: cd client-v3 && npm run test:e2e passes all 148 tests

🤖 Generated with Claude Code

148 serial tests across 14 spec files covering every user-facing
workflow in the Vue 3 frontend: authentication, system config (shows,
users, RBAC, settings, backups), all show-config tabs (acts/scenes,
characters, stage/props, cues, microphone allocations, script editing,
revisions, sessions), and live show operation.

Includes GitHub Actions workflow, global setup/teardown that starts
a clean backend server, Playwright config with chromium/firefox
projects, and targeted fixes for BVN v-show DOM persistence,
modal stacking, and MicAllocations onMounted timing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@Tim020 Tim020 added the claude Issues created by Claude label May 25, 2026
@github-actions github-actions Bot added github GitHub actions related issue or pull request xlarge-diff git client-v3 labels May 25, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 25, 2026

Client V3 Test Results

23 tests   23 ✅  0s ⏱️
 2 suites   0 💤
 1 files     0 ❌

Results for commit e642a46.

♻️ This comment has been updated with latest results.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 25, 2026

Client Test Results

128 tests   128 ✅  0s ⏱️
  6 suites    0 💤
  1 files      0 ❌

Results for commit e642a46.

♻️ This comment has been updated with latest results.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 25, 2026

Python Test Results

  1 files    1 suites   1m 27s ⏱️
603 tests 603 ✅ 0 💤 0 ❌
608 runs  608 ✅ 0 💤 0 ❌

Results for commit e642a46.

♻️ This comment has been updated with latest results.

…tifact v4

- Run Prettier on 5 e2e spec files that had formatting violations
- Exclude e2e/** from Vitest so Playwright spec files are not picked up
  by the unit test runner (test.describe.configure() is Playwright-only)
- Upgrade actions/upload-artifact from v3 (deprecated) to v4 in the
  Playwright workflow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 25, 2026

Playwright E2E Results (chromium)

148 tests   136 ✅  1m 44s ⏱️
 14 suites   11 💤
  1 files      0 ❌  1 🔥

For more details on these errors, see this check.

Results for commit e642a46.

♻️ This comment has been updated with latest results.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 25, 2026

Playwright E2E Results (firefox)

148 tests   136 ✅  1m 46s ⏱️
 14 suites   11 💤
  1 files      0 ❌  1 🔥

For more details on these errors, see this check.

Results for commit e642a46.

♻️ This comment has been updated with latest results.

Tim020 and others added 2 commits May 25, 2026 19:26
- Add 10s timeouts to three toBeVisible() assertions in spec 03 that
  follow lazy BTabs switches (Users, Settings, Logs tabs in ConfigView)
  — default 5s wasn't enough on Ubuntu CI runners
- Upgrade actions/checkout, setup-python, setup-node from v3/v4 to
  v4/v5/v4 to avoid Node.js 20 deprecation warnings and future breakage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@sonarqubecloud
Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
3 Security Hotspots
8.7% Duplication on New Code (required ≤ 3%)
C Security Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

@Tim020 Tim020 enabled auto-merge (squash) May 25, 2026 18:42
@Tim020 Tim020 merged commit 5f896e9 into dev May 25, 2026
30 of 35 checks passed
@Tim020 Tim020 deleted the feature/v3-e2e-playwright-tests branch May 25, 2026 18:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

claude Issues created by Claude client-v3 git github GitHub actions related issue or pull request xlarge-diff

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant