feat: Guided Tours E2E Tests

[camielvs]

Description

This PR is 100% AI generated.

End-to-end tests that replicate and verify the exact flow of every guided tour, so a UI change that breaks a tour is caught here (and points at the tour + step to fix) rather than shipping a broken tour.

Rather than four bespoke specs, this is a single data-driven driver that reads each tour's real JSON definition and walks it the way a user would:

• tests/e2e/tours/tourDriver.ts — runTour(page, tour) opens the tour, then for each step: asserts the step's spotlight anchor resolves in the DOM (the core regression signal), performs the gating interaction (or clicks Next for passive steps), and waits for the tour to advance (synchronised on the ?step=N URL the tour writes). It finishes on the completion step. A handler exists for every interaction type — drag-from-library, edge connection, task select, set-argument, undock/redock window, subgraph navigate/unpack, marquee multi-select, create-subgraph, and the full secrets flow.
• Specs — one thin spec per tour: navigating-editor, first-pipeline, subgraphs, using-secrets. Each loads the shipped tour JSON via loadTour(...), so the test tracks the real tour and new steps are covered automatically (modulo a brand-new interaction type needing a handler).
• eslint.config.js — teach playwright/expect-expect that runTour asserts internally.

Because the driver asserts each step's data-tour* anchor, removing or renaming an anchor a tour depends on fails the matching step by design.

The using-secrets spec exercises the no-backend path from #2405 / #2406: it fails the health ping and /api/secrets so the tour's in-memory mock backend serves the secret steps. The tour runs fully hands-on with normal gating, no /api/secrets calls fire, and the Submit Run confirm is asserted disabled (real run not wired in mock mode).

Related Issue and Pull requests

Closes https://github.com/Shopify/oasis-frontend/issues/644

Sits on top of the guided-tour stack (#2405 / #2406 and the framework/tour PRs below them).

Type of Change

• New feature

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Test Instructions

• pnpm test:e2e tests/e2e/tours/ — all four tour specs pass (run in parallel against a local dev server).
• The using-secrets spec drives the no-backend path: it routes the health ping and /api/secrets to fail, so the tour's mockBackend activates and the in-memory mock serves the secret steps. It asserts no /api/secrets calls fire and that Submit Run stays disabled in mock mode.

Additional Comments

The centered tour popover overlaps a few dialog controls (Add Secret / submit confirm / the "Use Secret" lock button). The driver dispatches the click directly to those elements (clickThrough) so React's handler still fires — the only spot where it doesn't use a real mouse click.

[github-actions]

🎩 Preview

A preview build has been created at: 06-12-feat_guided_tours_e2e_tests/965c026

[camielvs]

• Learning Hub Follow-Up #2491
• feat: Onboarding Welcome Page #2435
• feat: Onboarding Pill #2440
• feat: Onboarding Checklist #2421
• feat: Learning Hub - Milestone 2 #2416
• feat: Guided Tours Cleanup #2417
• feat: Guided Tours E2E Tests #2415 👈 (View in Graphite)
• feat: Guided Tours Completion Metrics #2412
• feat: Guided Tour - Secrets #2406
• feat: Guided Tours Framework (Secrets) #2405
• feat: Guided Tour - Subgraphs #2366
• feat: Guided Tours Framework (Subgraphs) #2365
• feat: Guided Tour - First Pipeline #2312
• feat: Guided Tours Framework (First Pipeline) #2347
• feat: Guided Tour - Navigating the Editor #2306 : 1 other dependent PR (#2307 )
• feat: Guided Tours Framework (Navigating the Editor) #2299
• feat: Guided Tours End Screen #2339
• feat: Guided Tours Ephemeral Pipelines #2334
• feat: Guided Tours Custom Navigation #2340
• feat: Guided Tours Foundation #2348
• feat: Learning Hub Guided Tours #2297
• feat: Learning Hub - Milestone 1 #2341
• feat: Learning Hub Tip of the Day #2292
• feat: Learning Hub Tip Browser #2291
• feat: Learning Hub Example Pipelines #2283
• feat: Learning Hub Documentation & FAQ #2282
• feat: Learning Hub Dashboard #2281
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[camielvs]

Merge activity

• Jul 7, 5:57 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jul 7, 7:06 PM UTC: Graphite rebased this pull request as part of a merge.
• Jul 7, 7:09 PM UTC: @camielvs merged this pull request with Graphite.