Skip to content

Commit 7e1c78e

Browse files
kyle-schellenkyle-schellen
committed
Add React Native Android checkout e2e flow
1 parent 69afad3 commit 7e1c78e

3 files changed

Lines changed: 286 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: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
appId: com.shopify.checkoutkitreactnative
2+
name: Checkout submits and shows result
3+
tags:
4+
- android
5+
- checkout
6+
7+
env:
8+
# CI shipping fixture
9+
COUNTRY_LABEL: "United States"
10+
ADDRESS_LINE1: "123 E2E Test St"
11+
CITY: "Los Angeles"
12+
STATE_FIELD_LABEL: "State"
13+
STATE_LABEL: "California"
14+
POSTAL_CODE: "90017"
15+
POSTAL_FIELD_LABEL: "ZIP code"
16+
17+
# CI payment fixture
18+
CARD_NUMBER: "1"
19+
CARD_EXPIRY_DISPLAY: "12 / 30"
20+
CARD_SECURITY_CODE: "123"
21+
CARDHOLDER_NAME: "Maestro Shopify"
22+
23+
# Accepted terminal checkout states for this smoke test.
24+
POST_SUBMIT_RESULT_PATTERN: ".*(Thank you|Your order|Order confirmed|confirmation|Shipping not available|There was a problem|declined|couldn.t process).*"
25+
---
26+
# Timeout tiers:
27+
# 10000 - in-app interactions (taps, animations)
28+
# 30000 - checkout step transitions (network)
29+
# 60000 - cold starts, first checkout paint, final submit
30+
31+
# Product and cart
32+
- launchApp:
33+
clearState: true
34+
- extendedWaitUntil:
35+
visible:
36+
id: product-0-add-to-cart-button
37+
timeout: 60000
38+
- scrollUntilVisible:
39+
element:
40+
id: product-0-add-to-cart-button
41+
direction: DOWN
42+
timeout: 10000
43+
centerElement: true
44+
- tapOn:
45+
id: product-0-add-to-cart-button
46+
enabled: true
47+
- waitForAnimationToEnd:
48+
timeout: 10000
49+
- runFlow:
50+
when:
51+
visible:
52+
id: header-cart-icon
53+
commands:
54+
- tapOn:
55+
id: header-cart-icon
56+
- runFlow:
57+
when:
58+
notVisible:
59+
id: checkout-button
60+
commands:
61+
- tapOn:
62+
id: cart-tab
63+
- extendedWaitUntil:
64+
visible:
65+
id: checkout-button
66+
timeout: 30000
67+
- tapOn:
68+
id: checkout-button
69+
enabled: true
70+
71+
# Contact
72+
- extendedWaitUntil:
73+
visible:
74+
text: "^Email( or mobile phone number)?$"
75+
timeout: 60000
76+
- tapOn:
77+
id: email
78+
- inputText: "maestro.e2e@shopify.com"
79+
- extendedWaitUntil:
80+
visible: "^maestro.e2e@shopify.com$"
81+
timeout: 10000
82+
- scrollUntilVisible:
83+
element:
84+
id: TextField0
85+
direction: DOWN
86+
timeout: 10000
87+
centerElement: true
88+
- tapOn:
89+
id: TextField0
90+
- inputText: "Maestro"
91+
- extendedWaitUntil:
92+
visible: "^Maestro$"
93+
timeout: 10000
94+
- scrollUntilVisible:
95+
element:
96+
id: TextField1
97+
direction: DOWN
98+
timeout: 10000
99+
centerElement: true
100+
- tapOn:
101+
id: TextField1
102+
- inputText: "Shopify"
103+
- extendedWaitUntil:
104+
visible: "^Shopify$"
105+
timeout: 10000
106+
107+
# Shipping address
108+
- scrollUntilVisible:
109+
element:
110+
id: Select0
111+
direction: DOWN
112+
timeout: 10000
113+
- tapOn:
114+
id: Select0
115+
- waitForAnimationToEnd:
116+
timeout: 10000
117+
- scrollUntilVisible:
118+
element:
119+
text: "^${COUNTRY_LABEL}$"
120+
direction: UP
121+
timeout: 10000
122+
visibilityPercentage: 10
123+
optional: true
124+
- scrollUntilVisible:
125+
element:
126+
text: "^${COUNTRY_LABEL}$"
127+
direction: DOWN
128+
timeout: 10000
129+
visibilityPercentage: 10
130+
optional: true
131+
- tapOn:
132+
text: "^${COUNTRY_LABEL}$"
133+
- waitForAnimationToEnd:
134+
timeout: 10000
135+
136+
- scrollUntilVisible:
137+
element:
138+
id: shipping-address1
139+
direction: DOWN
140+
timeout: 10000
141+
- tapOn:
142+
id: shipping-address1
143+
- eraseText: 80
144+
- inputText: "${ADDRESS_LINE1}"
145+
- waitForAnimationToEnd:
146+
timeout: 10000
147+
- extendedWaitUntil:
148+
visible: "^${ADDRESS_LINE1}$"
149+
timeout: 10000
150+
- extendedWaitUntil:
151+
notVisible:
152+
id: shipping-address1-autocomplete-title
153+
timeout: 10000
154+
- extendedWaitUntil:
155+
notVisible:
156+
id: shipping-address1-options
157+
timeout: 10000
158+
- scrollUntilVisible:
159+
element:
160+
id: TextField3
161+
direction: DOWN
162+
timeout: 10000
163+
centerElement: true
164+
- tapOn:
165+
id: TextField3
166+
- eraseText: 80
167+
- inputText: "${CITY}"
168+
- extendedWaitUntil:
169+
visible: "^${CITY}$"
170+
timeout: 10000
171+
- scrollUntilVisible:
172+
element:
173+
id: Select1
174+
direction: DOWN
175+
timeout: 10000
176+
centerElement: true
177+
- runFlow:
178+
when:
179+
notVisible: "^${STATE_LABEL}$"
180+
commands:
181+
- tapOn:
182+
id: Select1
183+
- waitForAnimationToEnd:
184+
timeout: 10000
185+
- scrollUntilVisible:
186+
element:
187+
text: "^${STATE_LABEL}$"
188+
direction: UP
189+
timeout: 10000
190+
visibilityPercentage: 100
191+
optional: true
192+
- scrollUntilVisible:
193+
element:
194+
text: "^${STATE_LABEL}$"
195+
direction: DOWN
196+
timeout: 10000
197+
visibilityPercentage: 100
198+
optional: true
199+
- tapOn:
200+
text: "^${STATE_LABEL}$"
201+
- waitForAnimationToEnd:
202+
timeout: 10000
203+
- extendedWaitUntil:
204+
notVisible: "Select a state"
205+
timeout: 10000
206+
- extendedWaitUntil:
207+
visible: "^${STATE_LABEL}$"
208+
timeout: 10000
209+
- scrollUntilVisible:
210+
element:
211+
id: TextField4
212+
direction: DOWN
213+
timeout: 10000
214+
centerElement: true
215+
- tapOn:
216+
id: TextField4
217+
- eraseText: 80
218+
- inputText: "${POSTAL_CODE}"
219+
- extendedWaitUntil:
220+
visible: "^${POSTAL_CODE}$"
221+
timeout: 10000
222+
- waitForAnimationToEnd:
223+
timeout: 10000
224+
225+
# Payment
226+
- scrollUntilVisible:
227+
element:
228+
id: number
229+
direction: DOWN
230+
timeout: 10000
231+
centerElement: true
232+
- tapOn:
233+
id: number
234+
- inputText: "${CARD_NUMBER}"
235+
- tapOn:
236+
id: expiry
237+
- inputText: "1"
238+
- waitForAnimationToEnd:
239+
timeout: 10000
240+
- inputText: "2"
241+
- waitForAnimationToEnd:
242+
timeout: 10000
243+
- inputText: "3"
244+
- waitForAnimationToEnd:
245+
timeout: 10000
246+
- inputText: "0"
247+
- extendedWaitUntil:
248+
visible: "^${CARD_EXPIRY_DISPLAY}$"
249+
timeout: 10000
250+
- tapOn:
251+
id: verification_value
252+
- inputText: "${CARD_SECURITY_CODE}"
253+
- extendedWaitUntil:
254+
visible: "^${CARD_SECURITY_CODE}$"
255+
timeout: 10000
256+
- scrollUntilVisible:
257+
element:
258+
id: name
259+
direction: DOWN
260+
timeout: 30000
261+
centerElement: true
262+
- extendedWaitUntil:
263+
visible: "^${CARDHOLDER_NAME}$"
264+
timeout: 10000
265+
- scrollUntilVisible:
266+
element:
267+
text: "^(Pay now|Complete order)$"
268+
direction: DOWN
269+
timeout: 30000
270+
- tapOn:
271+
text: "^(Pay now|Complete order)$"
272+
enabled: true
273+
- extendedWaitUntil:
274+
visible: "${POST_SUBMIT_RESULT_PATTERN}"
275+
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)