Skip to content

Commit ec98086

Browse files
kyle-schellenkyle-schellen
committed
Add React Native Android checkout e2e flow
1 parent 7d77bc3 commit ec98086

3 files changed

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