test: Playwright E2E suite for connect-core, connect-react, connect-elements against gateway sandbox

[aguilar1x]

Context

The sandbox / test-mode escrow simulator (#19) exists, but there's no automated end-to-end suite exercising the full checkout flow across packages. Regressions today are only caught manually or in production.

Scope

• Playwright test suite covering: handshake → quote → checkout → escrow event → webhook, run against the sandbox simulator from feat: sandbox / test mode with escrow lifecycle simulator #19.
• Coverage across all three consumer surfaces: connect-core (headless), connect-react (mounted component), connect-elements (web component in a plain HTML page).
• Wired into CI (npm run check-equivalent) so PRs fail on a broken checkout flow.

Acceptance criteria

• The suite runs in CI on every PR and fails the build on a broken checkout flow in any of the three packages.
• At least one test per package exercises the full happy-path checkout end-to-end against the sandbox.
• A regression in escrow-event handling (e.g. missed SSE reconnect) is caught by the suite, not just manual QA.

[happyboy24]

CAN I WORK ON THIS PLEASE

[zeemscript]

Hi Maintainer! I’m interested in contributing to this task and can ensure timely delivery with clean implementation.

[Benjtalkshow]

Hi @aguilar1x, I'd like to take this one.

Makes sense that there's a gap here. The sandbox simulator from #19 exists but nothing exercises the full checkout flow automatically, so regressions only show up manually or in prod.

Here's my plan:

1. Set up Playwright at the repo root so it can drive all three surfaces, pointed at the sandbox simulator from feat: sandbox / test mode with escrow lifecycle simulator #19.
2. Write a happy-path spec per package that walks the full flow (handshake, quote, checkout, escrow event, webhook):
   • connect-core headless, driving the SDK directly.
   • connect-react mounted as a component.
   • connect-elements as the web component embedded in a plain HTML page.
3. Add a regression test around escrow-event handling, specifically a missed SSE reconnect, so that failure mode is caught by the suite and not just QA.
4. Wire it into CI on npm run check-equivalent so a broken checkout in any package fails the PR.

Before writing anything I'll go through the packages and the #19 simulator setup to match how the sandbox is spun up and reuse whatever harness is already there.

Can you assign me?

[Labi-Joy]

Hey, I would like to take this on.

Playwright against the sandbox from #19 is the right "make the pain measurable" step. The fact that a
missed SSE reconnect has to be caught means the harness has to exercise the async event path, not just
the sync REST calls.

Plan:

1. Harness. Playwright config with a shared setup that boots (or connects to) the sandbox from feat: sandbox / test mode with escrow lifecycle simulator #19,
   injects the sandbox api-key, and provides fixtures per surface. One sandboxGateway fixture so tests do
   not duplicate boot logic.

2. One happy-path per surface:

   • connect-core (headless): drive the state machine through the public API, assert handshake -> quote
     -> checkout -> escrow event received -> webhook confirmed.
   • connect-react: mount the checkout component, click through, assert the terminal state via a
     data-testid on the confirmation view.
   • connect-elements: load a plain-HTML fixture with the web component and exercise the same flow. Uses
     Playwright's iframe/shadow-DOM selectors as needed.

3. Regression coverage. A dedicated test that force-drops the SSE connection mid-flow (Playwright network
   throttle or route abort) and asserts the client reconnects and still receives escrow_event. Without this
   the AC "regression in escrow-event handling is caught by the suite" is not really proven.

4. Sandbox reset. Between tests, hit the simulator's reset endpoint or seed a fresh escrow id per test so
   runs are independent. If feat: sandbox / test mode with escrow lifecycle simulator #19 does not expose reset, I will open a small follow-up rather than sharing
   state.

5. CI. Add a workflow (or extend the existing check job) that runs npm run test:e2e on pull_request,
   caches Playwright browsers, and fails on any failure. Target under 5 min for the four tests.

Timeline: 3 to 4 days from assignment.

[anidroid1184]

Hi @aguilar1x, i would love to work on this issue

[bughunter-dotcom]

Bughunter Studio can deliver this as a bounded Playwright reliability milestone after explicit assignment and funding confirmation.

The implementation would focus on deterministic evidence rather than only happy-path UI clicks:

• reusable fixtures that boot/reset the feat: sandbox / test mode with escrow lifecycle simulator #19 sandbox and isolate escrow IDs per test;
• one full handshake → quote → checkout → escrow-event → webhook flow for connect-core, connect-react, and connect-elements;
• controlled SSE disconnect/reconnect fault injection, proving the terminal escrow event is recovered without duplicate webhook handling;
• CI with cached Playwright browsers, traces/screenshots on failure, and a documented local command.

Before starting, please confirm the fixed reward, token/network, payout eligibility, and acceptance owner. The current “MAYBE REWARDED” label is not a funded commitment. I can reserve a 24–48 hour implementation slot for an assigned and funded 100 USDC milestone; Ethereum mainnet/ERC-20 is preferred, or a verifiably funded campaign escrow if required.

I will not submit an unassigned implementation PR. Verified Playwright/CI sample: https://github.com/bughunter-dotcom/playwright-ci-sample

[AlonsoFi]

Hi! I'd love to work on this issue, please consider assigning it to me 🙏

Plan:

• Set up Playwright with a shared sandbox fixture from feat: sandbox / test mode with escrow lifecycle simulator #19 so tests don't duplicate boot logic
• One happy-path per surface: connect-core headless, connect-react mounted component, connect-elements in a plain HTML page — all walking handshake → quote → checkout → escrow event → webhook
• Dedicated SSE reconnect regression test using Playwright network abort to force-drop the connection and assert escrow event is still received
• Sandbox reset between tests via the simulator's reset endpoint (or fresh escrow ID per test)
• Wire into CI so PRs fail on any broken checkout flow

Thank you!