feat(pos-app): Maestro E2E on web via Vercel preview#303
feat(pos-app): Maestro E2E on web via Vercel preview#303ignaciosantise wants to merge 10 commits into
Conversation
- Add payment flow E2E test (new sale -> enter amount -> QR code -> open URL) - Add testID props to Button component and key interactive elements - Add GitHub Action workflow for running Maestro tests on Android - Update AGENTS.md with testing guidelines: - Avoid testing mocked components - Use testID for E2E tests - Minimal comments rule - No unused variables rule
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Claude finished @ignaciosantise's task in 1m 30s —— View job Review CompleteFound 3 issue(s)Issue 1: App ID mismatch between workflow and E2E testID: payment-app-id-mismatch-a7b3 The E2E test file uses Recommendation: Verify the correct app ID from Issue 2: Insufficient E2E test coverage for error scenariosID: payment-edge-case-coverage-2f91 The payment flow test only covers the happy path. Critical edge cases are not tested: invalid amounts (negative, zero with validation bypassed, exceeding limits), network failures during payment initiation, QR code generation failures, and merchant configuration errors. Recommendation: Add additional test files for error scenarios: # e2e/payment-flow-invalid-amount.yaml
- tapOn: { id: "key-0" }
- tapOn: { id: "charge-button" }
- assertVisible: { text: "Amount is required" }
# e2e/payment-flow-no-merchant-config.yaml
# Clear merchant settings first, then verify error handlingIssue 3: Hardcoded amount assertion may fail with formatting variationsID: payment-amount-assertion-fragile-8c42 The assertion Recommendation: Use a more flexible assertion pattern or verify the amount is visible within a specific container: # Option 1: Check for amount components separately
- assertVisible: "0.01"
- assertVisible: "USD"
# Option 2: Use regex if Maestro supports it
- assertVisible:
text: "0\\.01.*USD"Automated Checks🔒 External Domain URL Detected (Non-blocking)
This change introduces URLs pointing to external domains. Please verify that these external dependencies are intentional and review for potential security, privacy, or compliance implications. Approved company domains are: reown.com, walletconnect.com, walletconnect.org Note: Maestro is a legitimate E2E testing tool. Consider pinning to a specific version rather than using the latest version from the install script for better reproducibility and security. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
This PR adds Maestro E2E testing infrastructure to the POS app, enabling automated end-to-end testing of key user flows on Android. The implementation includes test files, component instrumentation with testIDs, a GitHub Actions workflow for CI, and updated developer guidelines.
- Adds Maestro E2E testing framework with payment flow test coverage
- Adds testID props to interactive components for test automation
- Implements CI workflow with Android emulator and Slack notifications
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
dapps/pos-app/e2e/payment-flow.yaml |
Defines E2E test for payment flow from sale creation to QR code generation |
dapps/pos-app/e2e/README.md |
Provides documentation for running and creating Maestro tests |
dapps/pos-app/components/button.tsx |
Adds testID prop support to Button component |
dapps/pos-app/components/numeric-keyboard.tsx |
Moves testID from child elements to parent Button for better E2E targeting |
dapps/pos-app/app/scan.tsx |
Changes QR tap behavior to open URL in browser and adds testID |
dapps/pos-app/app/index.tsx |
Adds testIDs to home screen buttons |
dapps/pos-app/app/amount.tsx |
Adds testID to charge button |
dapps/pos-app/AGENTS.md |
Documents testing guidelines and coding standards |
.github/workflows/ci_e2e_tests_pos_android.yaml |
Implements CI workflow for running E2E tests on Android emulator |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Brings POS app up to Expo SDK 56 and the web-ready build (react-native-web, web:build export, DesktopFrameWrapper, Skia canvaskit setup), plus the rn_cli_wallet web-Maestro reference pattern (ci_e2e_walletkit e2e-web job + walletkit-build-and-maestro composite action). POS source files that the branch had modified for testIDs (app/index.tsx, app/amount.tsx, app/scan.tsx, components/button.tsx, components/numeric-keyboard.tsx, AGENTS.md) were reset to main's rewritten versions; the branch's stale testIDs (new-sale-button, key-dot, charge-button, qr-code) will be re-added cleanly against main's structure. Branch-only E2E files (e2e/, ci_e2e_tests_pos_android) are preserved and will be reworked into the web flow. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Migrate POS E2E from the Android emulator to the web build (react-native-web driven by Maestro's Chromium web driver) to cut CI time. CI triggers on the pos-demo Vercel *Preview* deployment and runs Maestro against the preview URL, which serves the app's /api/* payment proxy — so payment flows work too. - Make the app testable: forward testID through Button/SettingsItem; add ids across home/amount/scan/settings (main had almost none). Decimal key uses "key-decimal" (Maestro treats id/text selectors as regex, so "key-." matched any key). - Flows: payment-flow, payment-cancel, invalid-amount, keypad, plus a shared common/create-payment-qr prelude (run per-flow in isolated browsers). - Replace ci_e2e_tests_pos_android.yaml with ci_e2e_tests_pos_web.yaml (deployment_status trigger, Preview-only, per-flow xvfb-run maestro). - Docs: e2e/README.md covers the /api-proxy requirement + web gotchas. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
ignaciosantise
changed the title
- common/create-payment-qr.yaml: add the required Maestro config section
(url: ${APP_URL} + ---); a runFlow subflow without it fails with
"Config Section Required" (the payment flows were red on it).
- ci: trigger on pull_request and derive the Vercel preview URL from the
branch alias (pos-demo-git-<branch>-reown-com.vercel.app) instead of the
deployment_status immutable URL; runs from the PR branch and matches the
URL in the Vercel PR comment. Length-guarded (>63-char label -> use
workflow_dispatch).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- POS E2E workflow -> "🧪 POS - E2E Tests"; job label mentions POS App
- Release workflows -> "🚀 Release {AppKit,Mobile POS,WalletKit}"
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- 🧪 WalletKit - E2E Tests - 🚀 Release Merchant POS - 🚀 Release Mobile POS (PoC) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Match WalletKit: add ready_for_review to the pull_request types and gate the job on draft == false, so the POS E2E (which hits the real /api payment proxy) doesn't run on every draft push. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
@claude review |
|
Claude finished @ignaciosantise's task in 3m 57s —— View job Review
🔄 Incremental Review (full review — no prior Claude review on this PR) Overall: This is a well-thought-out shift from Android-emulator E2E to Vercel-preview web E2E. The isolation-per-flow design, testID naming rationale (avoiding Found 2 issue(s)Issue 1: README documents wrong CI triggerID: e2e-readme-wrong-trigger-3c91 Context:
Recommendation: **CI** (`.github/workflows/ci_e2e_tests_pos_web.yaml`) triggers on `pull_request`
events (opened, synchronize, etc.): the job then polls the Vercel branch-alias URL
until it's reachable (up to 10 min), then runs the flows. A manual
`workflow_dispatch` against an explicit URL is also available.Issue 2: Maestro CLI installed without version pinID: ci-maestro-unversioned-install-a4f1 Context:
Recommendation: Pin a specific version via the - name: Install Maestro
env:
MAESTRO_VERSION: "1.40.0" # update deliberately when upgrading
run: |
curl -Ls "https://get.maestro.mobile.dev" | bash
echo "$HOME/.maestro/bin" >> $GITHUB_PATHPrevious Issues
Inline Notes (non-blocking)
|
What
Moves the POS app's Maestro E2E from the Android emulator to the web build (react-native-web, driven by Maestro's headless Chromium). CI no longer builds anything — it runs against the app's Vercel
pos-demoPreview deployment for the PR, cutting build time significantly.Running against the preview (not a static
serve -s dist) is required because POS web payments go through the app's/api/*Vercel serverless proxy (dapps/pos-app/api/), which only exists on a real deployment. This lets the payment flows run on web too.Flows (
dapps/pos-app/e2e/)payment-flow$0.01→ charge → QR loads → tap QR copies the payment linkpayment-cancel$0.01→ QR loads → Cancel → back to a fresh amount screeninvalid-amount0; enables on a non-zero amountkeypad., max 2 fractional digits) + backspacecommon/create-payment-qr.yamlis a sharedrunFlowprelude. Flows run one process per flow (fresh browser) for isolation.App changes to make it testable
main's POS had almost no testIDs. Added them across home/amount/scan/settings and madeButton/SettingsItemforwardtestID. The decimal key iskey-decimal(Maestro treatsid:/text:selectors as regex, sokey-.matched any key).CI (
.github/workflows/ci_e2e_tests_pos_web.yaml)deployment_status, gated to a successfulPreview – pos-demodeployment (never Production/dev), plus aworkflow_dispatchfor a manual preview URL.xvfb, runs each flow (retry-once), uploads artifacts, Slack on failure.ci_e2e_tests_pos_android.yaml.Notes / to confirm
deployment_statusruns the workflow copy frommain, so this file takes effect once merged; useworkflow_dispatchto try it before then.pos-demoVercel project env (EXPO_PUBLIC_DEFAULT_MERCHANT_ID,EXPO_PUBLIC_DEFAULT_CUSTOMER_API_KEY,EXPO_PUBLIC_API_URL) being set — used to seed a merchant + proxy to the pay API.🤖 Generated with Claude Code