Skip to content

Commit a751da3

Browse files
kyle-schellenkyle-schellen
committed
Add React Native Android checkout e2e flow
1 parent 159b8b8 commit a751da3

3 files changed

Lines changed: 286 additions & 3 deletions

File tree

‎e2e/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ Use these in the `appId:` header of every flow. Don't invent new bundle ids.
3535
| `swift/` | `com.shopify.example.MobileBuyIntegration` |
3636
| `android/` | `com.shopify.checkout_kit_mobile_buy_integration_sample` |
3737
| `react-native/ios/` | `com.shopify.example.CheckoutKitReactNative` |
38-
| `react-native/android/` | `com.shopify.example.CheckoutKitReactNative` |
38+
| `react-native/android/` | `com.shopify.checkoutkitreactnative` |
3939

4040
## Running
4141

@@ -48,7 +48,7 @@ terminal.
4848
| React Native, iOS | `platforms/react-native/` | `pnpm e2e:ios` |
4949
| Swift, iOS | TBD | TBD |
5050
| Android (native) | TBD | TBD |
51-
| RN, Android | TBD | TBD |
51+
| RN, Android | `platforms/react-native/` | `pnpm e2e:android` |
5252

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

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

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
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: "700 S Flower 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 successful checkout states for this smoke test.
24+
POST_SUBMIT_RESULT_PATTERN: ".*(Thank you|Your order|Order confirmed|confirmation).*"
25+
---
26+
# Timeout tiers:
27+
# 3000 - animation settles
28+
# 5000 - local in-page interactions and optional probes
29+
# 15000 - sample-app checkout transitions
30+
# 60000 - cold starts, first checkout paint, final submit
31+
32+
# Product and cart
33+
- launchApp:
34+
clearState: true
35+
- extendedWaitUntil:
36+
visible:
37+
id: product-0-add-to-cart-button
38+
timeout: 60000
39+
- scrollUntilVisible:
40+
element:
41+
id: product-0-add-to-cart-button
42+
direction: DOWN
43+
timeout: 5000
44+
centerElement: true
45+
- tapOn:
46+
id: product-0-add-to-cart-button
47+
enabled: true
48+
- waitForAnimationToEnd:
49+
timeout: 3000
50+
- runFlow:
51+
when:
52+
visible:
53+
id: header-cart-icon
54+
commands:
55+
- tapOn:
56+
id: header-cart-icon
57+
- runFlow:
58+
when:
59+
notVisible:
60+
id: checkout-button
61+
commands:
62+
- tapOn:
63+
id: cart-tab
64+
- extendedWaitUntil:
65+
visible:
66+
id: checkout-button
67+
timeout: 15000
68+
- tapOn:
69+
id: checkout-button
70+
enabled: true
71+
72+
# Contact
73+
- extendedWaitUntil:
74+
visible:
75+
text: "^Email( or mobile phone number)?$"
76+
timeout: 60000
77+
- tapOn: "Email or mobile phone number"
78+
- inputText: "maestro.e2e@shopify.com"
79+
- extendedWaitUntil:
80+
visible: "^maestro.e2e@shopify.com$"
81+
timeout: 5000
82+
- scrollUntilVisible:
83+
element:
84+
text: "^First name( \\(optional\\))?$"
85+
direction: DOWN
86+
timeout: 5000
87+
visibilityPercentage: 100
88+
centerElement: true
89+
- tapOn: "First name (optional)"
90+
- inputText: "Maestro"
91+
- extendedWaitUntil:
92+
visible: "^Maestro$"
93+
timeout: 5000
94+
- scrollUntilVisible:
95+
element:
96+
text: "^Last name$"
97+
direction: DOWN
98+
timeout: 5000
99+
visibilityPercentage: 100
100+
centerElement: true
101+
- tapOn: "Last name"
102+
- inputText: "Shopify"
103+
- extendedWaitUntil:
104+
visible: "^Shopify$"
105+
timeout: 5000
106+
107+
# Shipping address
108+
- scrollUntilVisible:
109+
element:
110+
text: "Country/Region"
111+
direction: DOWN
112+
timeout: 5000
113+
- tapOn: "Country/Region"
114+
- waitForAnimationToEnd:
115+
timeout: 3000
116+
- scrollUntilVisible:
117+
element:
118+
text: "^${COUNTRY_LABEL}$"
119+
direction: UP
120+
timeout: 5000
121+
visibilityPercentage: 10
122+
optional: true
123+
- scrollUntilVisible:
124+
element:
125+
text: "^${COUNTRY_LABEL}$"
126+
direction: DOWN
127+
timeout: 5000
128+
visibilityPercentage: 10
129+
optional: true
130+
- tapOn:
131+
text: "^${COUNTRY_LABEL}$"
132+
- waitForAnimationToEnd:
133+
timeout: 3000
134+
135+
- scrollUntilVisible:
136+
element:
137+
text: "Address"
138+
direction: DOWN
139+
timeout: 5000
140+
- tapOn: "Address"
141+
- eraseText: 80
142+
- inputText: "${ADDRESS_LINE1}"
143+
- waitForAnimationToEnd:
144+
timeout: 3000
145+
- extendedWaitUntil:
146+
visible: "^${ADDRESS_LINE1}$"
147+
timeout: 5000
148+
- runFlow:
149+
when:
150+
visible: "Close suggestions"
151+
commands:
152+
- tapOn: "Close suggestions"
153+
- waitForAnimationToEnd:
154+
timeout: 3000
155+
- extendedWaitUntil:
156+
notVisible:
157+
id: shipping-address1-autocomplete-title
158+
timeout: 5000
159+
- extendedWaitUntil:
160+
notVisible:
161+
id: shipping-address1-options
162+
timeout: 5000
163+
- scrollUntilVisible:
164+
element:
165+
text: "^City$"
166+
direction: DOWN
167+
timeout: 5000
168+
centerElement: true
169+
- tapOn: "City"
170+
- eraseText: 80
171+
- inputText: "${CITY}"
172+
- extendedWaitUntil:
173+
visible: "^${CITY}$"
174+
timeout: 5000
175+
- scrollUntilVisible:
176+
element:
177+
text: "^${STATE_FIELD_LABEL}$"
178+
direction: DOWN
179+
timeout: 5000
180+
centerElement: true
181+
- runFlow:
182+
when:
183+
notVisible: "^${STATE_LABEL}$"
184+
commands:
185+
- tapOn: "State"
186+
- waitForAnimationToEnd:
187+
timeout: 3000
188+
- scrollUntilVisible:
189+
element:
190+
text: "^${STATE_LABEL}$"
191+
direction: UP
192+
timeout: 5000
193+
visibilityPercentage: 100
194+
optional: true
195+
- scrollUntilVisible:
196+
element:
197+
text: "^${STATE_LABEL}$"
198+
direction: DOWN
199+
timeout: 5000
200+
visibilityPercentage: 100
201+
optional: true
202+
- tapOn:
203+
text: "^${STATE_LABEL}$"
204+
- waitForAnimationToEnd:
205+
timeout: 3000
206+
- extendedWaitUntil:
207+
notVisible: "Select a state"
208+
timeout: 5000
209+
- extendedWaitUntil:
210+
visible: "^${STATE_LABEL}$"
211+
timeout: 5000
212+
- scrollUntilVisible:
213+
element:
214+
text: "^${POSTAL_FIELD_LABEL}$"
215+
direction: DOWN
216+
timeout: 5000
217+
centerElement: true
218+
- tapOn: "ZIP code"
219+
- eraseText: 80
220+
- inputText: "${POSTAL_CODE}"
221+
- extendedWaitUntil:
222+
visible: "^${POSTAL_CODE}$"
223+
timeout: 5000
224+
- waitForAnimationToEnd:
225+
timeout: 3000
226+
227+
# Payment
228+
- scrollUntilVisible:
229+
element:
230+
id: number
231+
direction: DOWN
232+
timeout: 5000
233+
centerElement: true
234+
- tapOn:
235+
text: "Card number"
236+
index: -1
237+
- inputText: "${CARD_NUMBER}"
238+
- tapOn:
239+
id: expiry
240+
- inputText: "1"
241+
- waitForAnimationToEnd:
242+
timeout: 3000
243+
- inputText: "2"
244+
- waitForAnimationToEnd:
245+
timeout: 3000
246+
- inputText: "3"
247+
- waitForAnimationToEnd:
248+
timeout: 3000
249+
- inputText: "0"
250+
- extendedWaitUntil:
251+
visible: "^${CARD_EXPIRY_DISPLAY}$"
252+
timeout: 5000
253+
- tapOn:
254+
text: "Security code"
255+
index: -1
256+
- inputText: "${CARD_SECURITY_CODE}"
257+
- extendedWaitUntil:
258+
visible: "^${CARD_SECURITY_CODE}$"
259+
timeout: 5000
260+
- scrollUntilVisible:
261+
element:
262+
id: name
263+
direction: DOWN
264+
timeout: 5000
265+
centerElement: true
266+
- extendedWaitUntil:
267+
visible: "^${CARDHOLDER_NAME}$"
268+
timeout: 5000
269+
- scrollUntilVisible:
270+
element:
271+
text: "^Pay now$"
272+
direction: DOWN
273+
timeout: 5000
274+
centerElement: true
275+
- tapOn: "Pay now"
276+
- extendedWaitUntil:
277+
visible: "${POST_SUBMIT_RESULT_PATTERN}"
278+
timeout: 60000
279+
- tapOn: "Close Checkout"
280+
- extendedWaitUntil:
281+
visible: "^Your cart is empty\\.$"
282+
timeout: 15000

‎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)