Skip to content

Commit 29d696c

Browse files
kyle-schellenkyle-schellen
committed
Add React Native Android checkout e2e flow
1 parent 32bd4da commit 29d696c

3 files changed

Lines changed: 184 additions & 4 deletions

File tree

‎e2e/README.md‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@ sample ships to both platforms; its flows are split because some assertions
2323
are platform-specific (iOS accessibility-label patterns vs Android resource
2424
strings).
2525

26+
The React Native Android checkout flow submits payment and waits for the order
27+
confirmation screen. The React Native iOS checkout flow currently stops at
28+
`Pay now`; the store/address path can show a checkout-web shipping availability
29+
banner after submit, which is outside the Checkout Kit integration contract.
30+
2631
Folders are created when their first flow lands. Don't pre-create empty
2732
directories.
2833

@@ -35,7 +40,7 @@ Use these in the `appId:` header of every flow. Don't invent new bundle ids.
3540
| `swift/` | `com.shopify.example.MobileBuyIntegration` |
3641
| `android/` | `com.shopify.checkout_kit_mobile_buy_integration_sample` |
3742
| `react-native/ios/` | `com.shopify.example.CheckoutKitReactNative` |
38-
| `react-native/android/` | `com.shopify.example.CheckoutKitReactNative` |
43+
| `react-native/android/` | `com.shopify.checkoutkitreactnative` |
3944

4045
## Running
4146

@@ -48,7 +53,7 @@ terminal.
4853
| React Native, iOS | `platforms/react-native/` | `pnpm e2e:ios` |
4954
| Swift, iOS | TBD | TBD |
5055
| Android (native) | TBD | TBD |
51-
| RN, Android | TBD | TBD |
56+
| RN, Android | `platforms/react-native/` | `pnpm e2e:android` |
5257

5358
Maestro itself is a system CLI, not an npm dependency. Install once with:
5459

@@ -61,7 +66,8 @@ curl -fsSL "https://get.maestro.mobile.dev" | bash
6166
1. Drop a new `<name>.yaml` under the right folder.
6267
2. Set `appId:` from the table above.
6368
3. Keep timeouts in the existing tiers (in-app interactions ~10s, network
64-
transitions ~30s, cold starts and checkout first-paint ~60s).
69+
transitions ~30s, cold starts, checkout first-paint, and order confirmation
70+
~60s).
6571
4. If the flow needs an npm script wrapper, add an `e2e:<platform>` script to
6672
the matching `package.json` next to existing scripts. The script should
6773
point at the folder, not an individual file, so the whole folder runs.

‎e2e/react-native/android/checkout-completion.yaml‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
appId: com.shopify.checkoutkitreactnative
2+
name: Checkout completes
3+
tags:
4+
- android
5+
- checkout
6+
7+
# Override these for store-specific product and shipping-address data.
8+
env:
9+
PRODUCT_INDEX: ${PRODUCT_INDEX || "1"}
10+
COUNTRY: ${COUNTRY || "United States"}
11+
ADDRESS_LINE1: ${ADDRESS_LINE1 || "350 5th Ave"}
12+
CITY: ${CITY || "New York"}
13+
POSTAL_CODE: ${POSTAL_CODE || "10118"}
14+
POSTAL_FIELD: ${POSTAL_FIELD || "ZIP code"}
15+
---
16+
# Timeout tiers:
17+
# 10000 - in-app interactions (taps, animations)
18+
# 30000 - checkout step transitions (network)
19+
# 60000 - cold starts, first checkout paint, final confirmation
20+
21+
# Product and cart
22+
- launchApp:
23+
clearState: true
24+
- extendedWaitUntil:
25+
visible:
26+
id: product-0-add-to-cart-button
27+
timeout: 60000
28+
- scrollUntilVisible:
29+
element:
30+
id: product-${PRODUCT_INDEX}-add-to-cart-button
31+
direction: DOWN
32+
timeout: 10000
33+
centerElement: true
34+
- tapOn:
35+
id: product-${PRODUCT_INDEX}-add-to-cart-button
36+
enabled: true
37+
- waitForAnimationToEnd:
38+
timeout: 10000
39+
- tapOn:
40+
id: cart-tab
41+
- extendedWaitUntil:
42+
visible:
43+
id: checkout-button
44+
timeout: 30000
45+
- tapOn:
46+
id: checkout-button
47+
enabled: true
48+
49+
# Contact
50+
- extendedWaitUntil:
51+
visible:
52+
text: "^Email( or mobile phone number)?$"
53+
timeout: 60000
54+
- tapOn:
55+
text: "^Email( or mobile phone number)?$"
56+
- inputText: "maestro.e2e@shopify.com"
57+
- hideKeyboard
58+
- tapOn:
59+
text: "^First name( \\(optional\\))?$"
60+
- inputText: "Maestro"
61+
- hideKeyboard
62+
- tapOn:
63+
text: "^Last name$"
64+
- inputText: "Shopify"
65+
- hideKeyboard
66+
67+
# Shipping address
68+
- scrollUntilVisible:
69+
element:
70+
text: "Country/Region"
71+
direction: DOWN
72+
timeout: 10000
73+
- tapOn:
74+
text: "Country/Region"
75+
index: 1
76+
- waitForAnimationToEnd:
77+
timeout: 3000
78+
- scrollUntilVisible:
79+
element:
80+
text: "^${COUNTRY}$"
81+
direction: UP
82+
timeout: 10000
83+
visibilityPercentage: 50
84+
centerElement: true
85+
optional: true
86+
- runFlow:
87+
when:
88+
notVisible: "^${COUNTRY}$"
89+
commands:
90+
- scrollUntilVisible:
91+
element:
92+
text: "^${COUNTRY}$"
93+
direction: DOWN
94+
timeout: 30000
95+
visibilityPercentage: 50
96+
centerElement: true
97+
- tapOn:
98+
text: "^${COUNTRY}$"
99+
- waitForAnimationToEnd:
100+
timeout: 3000
101+
102+
- scrollUntilVisible:
103+
element:
104+
text: "Address"
105+
direction: DOWN
106+
timeout: 10000
107+
- tapOn:
108+
text: "Address"
109+
index: -1
110+
- eraseText: 80
111+
- scrollUntilVisible:
112+
element:
113+
text: "^${POSTAL_FIELD}$"
114+
direction: DOWN
115+
timeout: 10000
116+
centerElement: true
117+
- inputText: "${ADDRESS_LINE1} ${CITY} ${POSTAL_CODE}"
118+
- extendedWaitUntil:
119+
visible: ".*${ADDRESS_LINE1}, ${CITY}.*${POSTAL_CODE}.*${COUNTRY}.*"
120+
timeout: 30000
121+
- waitForAnimationToEnd:
122+
timeout: 2000
123+
- tapOn:
124+
text: ".*${ADDRESS_LINE1}, ${CITY}.*${POSTAL_CODE}.*${COUNTRY}.*"
125+
index: 0
126+
retryTapIfNoChange: true
127+
- waitForAnimationToEnd:
128+
timeout: 5000
129+
- extendedWaitUntil:
130+
visible: "^${POSTAL_CODE}$"
131+
timeout: 15000
132+
- hideKeyboard
133+
- waitForAnimationToEnd:
134+
timeout: 5000
135+
136+
# Payment
137+
- scrollUntilVisible:
138+
element:
139+
text: "^Card number$"
140+
direction: DOWN
141+
timeout: 30000
142+
centerElement: true
143+
- tapOn:
144+
text: "^Card number$"
145+
- inputText: "4242424242424242"
146+
- hideKeyboard
147+
- tapOn: "Expiration date (MM / YY)"
148+
- inputText: "1230"
149+
- hideKeyboard
150+
- tapOn:
151+
text: "^Security code$"
152+
- inputText: "123"
153+
- hideKeyboard
154+
- scrollUntilVisible:
155+
element:
156+
text: "^Name on card$"
157+
direction: DOWN
158+
timeout: 30000
159+
centerElement: true
160+
- scrollUntilVisible:
161+
element:
162+
text: "^Pay now$"
163+
direction: DOWN
164+
timeout: 30000
165+
- extendedWaitUntil:
166+
visible: "^Pay now$"
167+
timeout: 30000
168+
- tapOn:
169+
text: "^Pay now$"
170+
enabled: true
171+
- extendedWaitUntil:
172+
visible: ".*(Thank you|[Oo]rder (is )?confirmed).*"
173+
timeout: 60000

‎platforms/react-native/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
"compare-snapshot": "./scripts/compare_snapshot",
2626
"turbo": "turbo",
2727
"test": "jest",
28-
"e2e:ios": "maestro --platform ios test --config ../../e2e/config.yaml ../../e2e/react-native/ios"
28+
"e2e:ios": "maestro --platform ios test --config ../../e2e/config.yaml ../../e2e/react-native/ios",
29+
"e2e:android": "maestro --platform android test --config ../../e2e/config.yaml ../../e2e/react-native/android"
2930
},
3031
"devDependencies": {
3132
"@babel/core": "^7.25.2",

0 commit comments

Comments
 (0)