Web: Add a Playwright end-to-end harness for the dashboard

[mallison031]

Repo context. accensa-app is the off-chain half of Accensa — the merchant back-office for x402 sellers on Stellar. Three workspace packages matter: apps/web (Next.js dashboard and the indexer at src/app/api/sync), packages/sdk (@accensa/sdk), and apps/demo-merchant. The Soroban contracts live in accensa-contracts.

🟢 Unblocked. Nothing depends on this landing first, but several other frontend issues become far easier to verify once it exists.

Problem

apps/web has no browser-level test of any kind. The existing suite is Vitest over pure modules — lib/money.test.ts, lib/revenue-analytics.test.ts, lib/payments-csv.test.ts and peers — plus two API route tests. There is no Playwright or Cypress configuration anywhere in the workspace.

The pure logic is well covered. Everything that only exists in a browser is not covered at all: rendering, polling, the payment modal, keyboard interaction, the CSV download, the refund flow's phase transitions, offline handling, theme switching.

That gap is why several defects in this audit — a refund button that stays live mid-submission, rows that cannot be opened with a keyboard, a page that renders nothing while loading — are invisible to CI. They are all trivially detectable in a real browser and undetectable in the current suite.

What to build

Establish the harness and prove it on the highest-value flows.

1. Add Playwright to apps/web with a config that runs against a local build, and wire an e2e script consistent with the existing script naming.
2. Decide how backend state is supplied. Mocking /api/payments at the network layer keeps tests fast and deterministic and avoids a database dependency in CI; a seeded test database is more faithful but heavier. Pick one, justify it in the PR, and make the choice easy to reverse.
3. Cover a first set of flows rather than aiming for breadth: dashboard loads and renders payments; a payment opens and closes; the empty state; the error state; CSV export triggers a download; the sync button's cooldown.
4. Wire it into CI as a job that can fail the build, and keep it fast enough that people do not learn to ignore it.
5. Document how to run and debug it locally — headed mode and trace viewer — in the app README.

Out of scope: the refund flow, which needs a wallet extension and deserves its own issue; and visual regression snapshots.

Acceptance criteria

• Playwright runs against apps/web locally with one documented command.
• At least six flows are covered, including the empty and error states.
• Backend state is supplied deterministically, with the approach justified in the PR.
• The suite runs in CI and can fail the build.
• Total runtime is reported in the PR.
• Local run and debug instructions are documented.
• pnpm lint passes in apps/web.
• pnpm test passes, including new tests covering this change.
• pnpm build succeeds for apps/web.
• PR description includes Closes #<this issue>.

Contact & Support

• Telegram
• Discord
• SUPPORT.md — contribution help, Wave process, and the full list of channels

[EmeditWeb]

@EmeditWeb has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi Maintainer, I'd love to fix this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @EmeditWeb to this issue.

[bernardev254]

@bernardev254 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I’d like to add a Playwright end-to-end test harness for the Accensa dashboard. I’ll set up Playwright in apps/web, configure it for local builds, and implement tests for key flows: dashboard rendering, payment modal interactions, empty/error states, CSV downloads, and sync button cooldowns. I’ll mock backend state for speed, wire it into CI, and document local debugging.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @bernardev254 to this issue.

[oraimoitel]

@oraimoitel has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

HI maintainer can i work on this issue???

ℹ️ Repo Maintainers: To accept this application, review their application or assign @oraimoitel to this issue.

[drips-wave]

Congratulations, @oraimoitel! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @oraimoitel: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @oraimoitel as part of the Stellar Wave Program's 8th Wave 🥳

😎 @oraimoitel: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.