feat(pos-app): Add Maestro E2E testing infrastructure

.github/workflows/ci_e2e_tests_pos_android.yaml

@@ -0,0 +1,142 @@
+name: e2e-tests-pos-android
+
+permissions:
+  contents: read
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths:
+      - 'dapps/pos-app/**'
+  pull_request:
+    paths:
+      - 'dapps/pos-app/**'
+
+jobs:
+  e2e-tests:
+    name: Maestro E2E Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup
+        uses: ./.github/actions/ci-setup
+        with:
+          root-path: dapps/pos-app
+          package-manager: npm
+
+      - name: Install Java 17
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'zulu'
+          java-version: '17'
+          architecture: x86_64
+
+      - name: Create env file
+        run: |
+          touch dapps/pos-app/.env
+          echo ${{ vars.POS_DEV_ENV_FILE }} >> dapps/pos-app/.env
+
+      - name: Expo Prebuild
+        run: |
+          cd dapps/pos-app
+          npm run prebuild
+
+      - name: Cache Gradle
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.gradle/caches
+            ~/.gradle/wrapper
+          key: ${{ runner.os }}-gradle-pos-e2e-${{ hashFiles('dapps/pos-app/package.json', 'dapps/pos-app/app.json') }}
+          restore-keys: |
+            ${{ runner.os }}-gradle-pos-e2e-
+
+      - name: Build Release APK
+        id: build
+        run: |
+          cd dapps/pos-app/android
+          ./gradlew assembleRelease
+
+      - name: Enable KVM
+        run: |
+          echo 'KERNEL=="kvm", GROUP="kvm", MODE="0666", OPTIONS+="static_node=kvm"' | sudo tee /etc/udev/rules.d/99-kvm4all.rules
+          sudo udevadm control --reload-rules
+          sudo udevadm trigger --name-match=kvm
+
+      - name: Install Maestro
+        run: |
+          curl -Ls "https://get.maestro.mobile.dev" | bash
+          echo "$HOME/.maestro/bin" >> $GITHUB_PATH
+
+      - name: Run Maestro E2E Tests
+        id: maestro
+        uses: reactivecircus/android-emulator-runner@v2
+        with:
+          api-level: 31
+          arch: x86_64
+          profile: pixel_6
+          heap-size: 512M
+          ram-size: 4096M
+          emulator-options: -no-snapshot-save -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim
+          disable-animations: true
+          script: |
+            adb install dapps/pos-app/android/app/build/outputs/apk/release/app-release.apk
+            $HOME/.maestro/bin/maestro test dapps/pos-app/e2e/ --format junit --output maestro-report.xml
+
+      - name: Upload Test Results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: maestro-test-results
+          path: maestro-report.xml
+
+      - name: Send Slack notification
+        if: always() && !cancelled()
+        uses: slackapi/slack-github-action@v2.1.0
+        with:
+          webhook: ${{ secrets.SLACK_WEBHOOK_URL }}
+          webhook-type: incoming-webhook
+          payload: |
+            {
+              "text": "POS App E2E Test Report",
+              "blocks": [
+                {
+                  "type": "header",
+                  "text": { "type": "plain_text", "text": "🧪 POS App E2E Test Report" }
+                },
+                {
+                  "type": "section",
+                  "fields": [
+                    { "type": "mrkdwn", "text": "*Branch:*\n`${{ github.ref_name }}`" },
+                    { "type": "mrkdwn", "text": "*Triggered by:*\n`${{ github.actor }}`" }
+                  ]
+                },
+                {
+                  "type": "section",
+                  "fields": [
+                    { "type": "mrkdwn", "text": "*Build:*\n`${{ steps.build.outcome == 'success' && '✅ Success' || '❌ Failed' }}`" },
+                    { "type": "mrkdwn", "text": "*E2E Tests:*\n`${{ steps.maestro.outcome == 'success' && '✅ Passed' || '❌ Failed' }}`" }
+                  ]
+                },
+                {
+                  "type": "section",
+                  "fields": [
+                    { "type": "mrkdwn", "text": "*Overall Status:*\n`${{ job.status == 'success' && '✅ Success' || '❌ Failed' }}`" }
+                  ]
+                },
+                {
+                  "type": "actions",
+                  "elements": [
+                    {
+                      "type": "button",
+                      "text": { "type": "plain_text", "text": "View Workflow Run" },
+                      "url": "${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+                    }
+                  ]
+                }
+              ]
+            }

dapps/pos-app/AGENTS.md

@@ -624,10 +624,21 @@ const apiKey = await secureStorage.getItem(SECURE_STORAGE_KEYS.MERCHANT_API_KEY)
 - Use ESLint and Prettier for consistent formatting
 - Prefer functional components with hooks
 - Use TypeScript types/interfaces for all props and data structures
+- **Minimal comments**: Do not add comments unless absolutely necessary to understand the code. Code should be self-documenting through clear naming and structure. Avoid explanatory comments that describe what the code does - the code itself should be clear enough.
+- **No unused variables**: Ensure code changes do not leave unused variables, imports, or functions. ESLint will flag these - fix them before committing.
 - **No trailing whitespace**: New code must not have trailing whitespace at the end of lines. Most editors can be configured to remove trailing whitespace on save.
 - **Run lint after changing code**: Always run `npm run lint` after making code changes to ensure code quality and catch any formatting or linting issues before committing.
 - **Check TypeScript errors**: Always run `npx tsc --noEmit` after making code changes to check for TypeScript errors. Fix any TypeScript errors in files you've modified before committing. Note: Pre-existing TypeScript errors in other files can be ignored if they're unrelated to your changes.
 
+### Testing Guidelines
+
+- **Avoid testing mocked components**: Component tests that mock underlying UI primitives (PressableScale, Pressable, QRCodeSkia, etc.) don't provide real value - they just test that mocks work correctly, not actual component behavior. For meaningful component testing, either:
+  - Use the real components (may require native setup)
+  - Focus on testing business logic in hooks/utils instead
+  - Use E2E tests for UI behavior
+- **Focus on business logic**: Unit tests should focus on utilities, stores, services, and hooks that contain actual business logic rather than UI rendering.
+- **Use testID for E2E tests**: Always use `testID` props to identify components in E2E tests (Maestro). Prefer testID over text strings as text can change and may be localized. Add testID to interactive components (buttons, inputs, etc.) that need to be targeted by E2E tests.
+
 ## Troubleshooting
 
 ### Printer Issues

dapps/pos-app/app/amount.tsx

@@ -116,6 +116,7 @@ export default function AmountScreen() {
         )}
       />
       <Button
+        testID="charge-button"
         onPress={handleSubmit(onSubmit)}
         disabled={!isValid}
         style={[

dapps/pos-app/app/index.tsx

@@ -35,6 +35,7 @@ export default function HomeScreen() {
   return (
     <View style={styles.container}>
       <Button
+        testID="new-sale-button"
         onPress={handleStartPayment}
         style={[
           styles.actionButton,
@@ -50,6 +51,7 @@ export default function HomeScreen() {
         <ThemedText fontSize={18}>New sale</ThemedText>
       </Button>
       <Button
+        testID="settings-button"
         onPress={handleSettingsPress}
         style={[
           styles.actionButton,

dapps/pos-app/app/scan.tsx

@@ -16,7 +16,7 @@ import * as Clipboard from "expo-clipboard";
 import { Image } from "expo-image";
 import { router, UnknownOutputParams, useLocalSearchParams } from "expo-router";
 import React, { useCallback, useEffect, useState } from "react";
-import { StyleSheet, View } from "react-native";
+import { Linking, StyleSheet, View } from "react-native";
 import { v4 as uuidv4 } from "uuid";
 
 interface ScreenParams extends UnknownOutputParams {
@@ -65,9 +65,13 @@ export default function ScanScreen() {
     resetNavigation("/amount");
   };
 
-  const handleCopyPaymentUrl = async () => {
-    await Clipboard.setStringAsync(qrUri);
-    showSuccessToast("Payment URL copied");
+  const handleLogoPress = async () => {
+    try {
+      await Clipboard.setStringAsync(qrUri);
+      await Linking.openURL(qrUri);
+    } catch {
+      showErrorToast("Failed to open payment URL");
+    }
   };
 
   useEffect(() => {
@@ -182,10 +186,11 @@ export default function ScanScreen() {
             </ThemedText>
           </View>
           <QRCode
+            testID="qr-code"
             size={300}
             uri={qrUri}
             logoBorderRadius={100}
-            onPress={handleCopyPaymentUrl}
+            onPress={handleLogoPress}
           >
             <Image source={assets?.[0]} style={styles.logo} />
           </QRCode>

dapps/pos-app/components/button.tsx

@@ -7,16 +7,23 @@ interface Props {
   style?: StyleProp<ViewStyle>;
   onPress: () => void;
   disabled?: boolean;
+  testID?: string;
 }
 
 export const Button: React.FC<Props> = ({
   children,
   style,
   onPress,
   disabled,
+  testID,
 }) => {
   return (
-    <PressableScale style={style} onPress={onPress} enabled={!disabled}>
+    <PressableScale
+      testID={testID}
+      style={style}
+      onPress={onPress}
+      enabled={!disabled}
+    >
       {children}
     </PressableScale>
   );

dapps/pos-app/components/numeric-keyboard.tsx

@@ -33,6 +33,7 @@ function NumericKeyboardBase({ onKeyPress, style }: NumericKeyboardProps) {
           {row.map((key) => (
             <Button
               key={key}
+              testID={key === "." ? "key-dot" : `key-${key}`}
               onPress={() => handlePress(key)}
               style={[
                 styles.key,
@@ -41,7 +42,6 @@ function NumericKeyboardBase({ onKeyPress, style }: NumericKeyboardProps) {
             >
               {key === "erase" ? (
                 <Image
-                  testID="key-erase"
                   source={assets?.[0]}
                   style={[
                     styles.backspace,
@@ -55,7 +55,6 @@ function NumericKeyboardBase({ onKeyPress, style }: NumericKeyboardProps) {
                 />
               ) : (
                 <ThemedText
-                  testID={`key-${key}`}
                   style={[styles.keyText, { color: Theme["text-primary"] }]}
                 >
                   {key}

dapps/pos-app/e2e/README.md

@@ -0,0 +1,83 @@
+# E2E Tests with Maestro
+
+This directory contains end-to-end tests using [Maestro](https://maestro.mobile.dev/).
+
+## Prerequisites
+
+1. Install Maestro CLI:
+   ```bash
+   curl -Ls "https://get.maestro.mobile.dev" | bash
+   ```
+
+2. Build and install the app on your device/emulator:
+   ```bash
+   npm run android:build
+   adb install android/app/build/outputs/apk/release/app-release.apk
+   ```
+
+3. Configure merchant settings in the app before running tests
+
+## Running Tests
+
+### Run all tests
+```bash
+maestro test e2e/
+```
+
+### Run specific test
+```bash
+maestro test e2e/payment-flow.yaml
+```
+
+### Run with Maestro Studio (interactive debugging)
+```bash
+maestro studio
+```
+
+## Test Files
+
+| File | Description |
+|------|-------------|
+| `payment-flow.yaml` | Basic payment flow: New sale → Enter amount → QR code → Copy URL |
+
+## Adding New Tests
+
+1. Create a new `.yaml` file in this directory
+2. Start with `appId: com.reown.pos`
+3. Add test steps using Maestro commands
+
+### Common Maestro Commands
+
+```yaml
+# Tap on text
+- tapOn: "Button Text"
+
+# Tap on element by testID
+- tapOn:
+    id: "my-test-id"
+
+# Assert element is visible
+- assertVisible:
+    text: "Expected Text"
+
+# Wait for element with timeout
+- extendedWaitUntil:
+    visible:
+      id: "element-id"
+    timeout: 10000
+
+# Type text
+- inputText: "Hello World"
+
+# Scroll
+- scroll
+
+# Take screenshot
+- takeScreenshot: "screenshot-name"
+```
+
+## Notes
+
+- Tests require the app to have merchant credentials configured
+- Payment simulation is not yet implemented (pending backend support)
+- Run on a real device or emulator with network access