test: expand and consolidate playwright e2e suite with cross-browser matrix

[Dubemtopsite]

Playwright E2E Suite Expansion (#56)

Closes #56

Consolidated the isolated Playwright specs into a single orchestrated suite under e2e/, implemented robust mocks, established a cross-browser CI matrix, fixed critical elliptic curve simulation/signature bugs, and improved component accessibility.

Scope & Implementation Details

1. Suite Consolidation & Config

• Consolidated Directory: Created the single e2e/ directory containing all Stellar stealth payment specs.
• Matrix Configuration: Added playwright.config.ts to run Chromium, Firefox, and WebKit test targets with retry and trace logs on failure.
• CI Pipeline: Updated .github/workflows/ci.yml to automatically install Playwright dependencies, build the demo, and execute tests on every PR.
• Git Ignore Rules: Modified .gitignore to exclude generated test reports, trace logs, and cache folders.
• Developer Documentation: Wrote e2e/README.md detailing test execution, mock behaviors, and how to write new tests.

2. Core Mocking Architecture (fixtures.ts)

• Freighter Wallet Mocking: Connected Freighter extension state directly to window.freighterMock when connected in tests, eliminating the need to load external web extensions in headless browsers.
• Stellar Horizon & Soroban Mocking: Intercepted Horizon REST API requests and Soroban JSON-RPC calls (getEvents, simulateTransaction, and sendTransaction) in the headless page context to allow deterministic, offline E2E runs.

3. Critical Bug Fixes

• "Bad union switch" XDR Error: Discovered that @stellar/stellar-sdk's assembleTransaction failed when parsing the dummy transaction data returned by simulation. Fixed it by returning a valid base64-encoded SorobanTransactionData structure (AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=).
• "Invalid signature" Error: Discovered that Stellar's SDK verifies signatures during tx.addSignature and throws an error if mathematically invalid. Resolved by deriving a mathematically consistent Stellar address (GAL77LMANDOA32MTLU3GG3Z22G2543PDIE5REOEOIU5QL4VEYHJ5WKON) corresponding to the private key scalar (123456789n) used to sign.
• Strict Selector Resolution: Resolved a strict mode ambiguity for page.getByText('Stealth Key') in test 14 by adding { exact: true }.

4. Accessibility & UI Adjustments

• Linked input fields in StellarSend.tsx and StellarReceive.tsx to their labels using htmlFor and id tags. This ensures clean programmatic access for testers/screen readers.

---

E2E Scenarios (15 Scenarios Covered)

1. Wallet - Initial State: Connect button visible when Stellar is selected.
2. Wallet - Error Handling: Shows installer recommendation if Freighter is missing.
3. Wallet - Connection Error: Handles connection rejects.
4. Wallet - Connect: Successfully connects wallet and renders key derivation.
5. Wallet - Disconnect: Cleans connection state on wallet disconnection click.
6. Send - Form Validation: Disables Send button if inputs are empty.
7. Send - Format Validation: Rejects invalid prefix types (e.g. st:eth:).
8. Send - Success (New Address): Successfully executes a private transfer to a new account.
9. Send - Success (Existing Address): Executes a payment operation to an existing stealth address.
10. Receive - Key Derivation: Generates stealth keys and encodes the meta-address on connect.
11. Receive - Clipboard Copy: Verifies that clicking copy adds the stealth meta-address to clipboard.
12. Receive - On-Chain Registration: Successfully registers public stealth keys via Soroban contract.
13. Receive - Scan Payments (Empty): Shows empty state when no events exist.
14. Receive - Scan Payments (Match Found): Scans events, matches viewing key, and reveals stealth keys.
15. Receive - Withdrawal: Withdraws stealth address balance to destination address and returns withdrawal hash.

---

Validation Status

• Pre-commit Checks: Run pnpm format to resolve all style linting.
• TypeScript & Production Build: pnpm build runs cleanly with no errors.
• Test Execution: All 15 E2E scenarios pass successfully locally:

  Running 15 tests using 4 workers
    15 passed (18.2s)
  

[vercel]

@Dubemtopsite is attempting to deploy a commit to the truthixify's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Dubemtopsite Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[truthixify]

Conflicts in 7 files. Solid e2e suite under e2e/ (fixtures + stellar.spec) lands cleanly; the conflicts are in shared files that have moved on develop.

git fetch origin
git rebase origin/develop
git push --force-with-lease

When resolving:

• playwright.config.ts: develop already has one from earlier work, keep your fixture wiring + browser matrix expansion
• package.json / pnpm-lock.yaml: re-add your Playwright deps on top of develop's
• .gitignore: keep both sides
• StellarSend/Receive/WalletConnect: keep develop's content; your changes are likely test-attr additions (data-testid) that should still apply

[Dubemtopsite]

Have fixed them @truthixify

[truthixify]

Sorry @Dubemtopsite — #90 (RPC retry) just landed and touched src/components/StellarReceive.tsx too. Quick rebase:

git fetch origin
git rebase origin/develop
# StellarReceive: keep develop's retry wrapper around the RPC calls, then re-apply your test-friendly props
git push --force-with-lease

[Dubemtopsite]

Fixed @truthixify

[truthixify]

#92 just landed (WalletConnect v2) which added deps to pnpm-lock.yaml. Quick rebase:

git fetch origin
git rebase origin/develop
# pnpm-lock.yaml: easiest is to take develop's version then re-run `pnpm install` to add your own deps back
pnpm install
git add pnpm-lock.yaml
# also resolve any src/components/WalletConnect.tsx conflict — keep develop's WalletConnect integration
git rebase --continue
git push --force-with-lease

[Dubemtopsite]

Fixed

[truthixify]

Almost there! After #91 (QR/camera scan) just landed, only pnpm-lock.yaml conflicts:

git fetch origin
git rebase origin/develop
pnpm install
git add pnpm-lock.yaml
git rebase --continue
git push --force-with-lease

[Dubemtopsite]

u can now check it again

[truthixify]

Rebased cleanly. 290+375-line playwright fixtures + Stellar e2e spec + cross-browser CI matrix is exactly what the demo needed. Substantial. Thanks @Dubemtopsite.

[Dubemtopsite]

You are welcome @truthixify