Skip to content

Commit f630f50

Browse files
kyle-schellenkyle-schellen
committed
Add React Native Android checkout e2e flow
1 parent de93b38 commit f630f50

3 files changed

Lines changed: 284 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: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
appId: com.shopify.checkoutkit.reactnativedemo
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+
- extendedWaitUntil:
58+
visible: ".*1, Cart$"
59+
timeout: 15000
60+
- tapOn:
61+
id: header-cart-icon
62+
- extendedWaitUntil:
63+
visible:
64+
id: checkout-button
65+
timeout: 15000
66+
- tapOn:
67+
id: checkout-button
68+
enabled: true
69+
70+
# Contact
71+
- extendedWaitUntil:
72+
visible:
73+
text: "^Email( or mobile phone number)?$"
74+
timeout: 60000
75+
- tapOn: "Email or mobile phone number"
76+
- inputText: "${EMAIL}"
77+
- extendedWaitUntil:
78+
visible: "^${EMAIL}$"
79+
timeout: 5000
80+
- scrollUntilVisible:
81+
element:
82+
text: "^First name( \\(optional\\))?$"
83+
direction: DOWN
84+
timeout: 5000
85+
visibilityPercentage: 100
86+
centerElement: true
87+
- tapOn: "First name (optional)"
88+
- inputText: "${FIRST_NAME}"
89+
- extendedWaitUntil:
90+
visible: "^${FIRST_NAME}$"
91+
timeout: 5000
92+
- scrollUntilVisible:
93+
element:
94+
text: "^Last name$"
95+
direction: DOWN
96+
timeout: 5000
97+
visibilityPercentage: 100
98+
centerElement: true
99+
- tapOn: "Last name"
100+
- inputText: "${LAST_NAME}"
101+
- extendedWaitUntil:
102+
visible: "^${LAST_NAME}$"
103+
timeout: 5000
104+
105+
# Shipping address
106+
- scrollUntilVisible:
107+
element:
108+
text: "Country/Region"
109+
direction: DOWN
110+
timeout: 5000
111+
- tapOn: "Country/Region"
112+
- waitForAnimationToEnd:
113+
timeout: 3000
114+
- scrollUntilVisible:
115+
element:
116+
text: "^${COUNTRY_LABEL}$"
117+
direction: UP
118+
timeout: 5000
119+
visibilityPercentage: 10
120+
optional: true
121+
- scrollUntilVisible:
122+
element:
123+
text: "^${COUNTRY_LABEL}$"
124+
direction: DOWN
125+
timeout: 5000
126+
visibilityPercentage: 10
127+
optional: true
128+
- tapOn:
129+
text: "^${COUNTRY_LABEL}$"
130+
- waitForAnimationToEnd:
131+
timeout: 3000
132+
133+
- scrollUntilVisible:
134+
element:
135+
text: "Address"
136+
direction: DOWN
137+
timeout: 5000
138+
- tapOn: "Address"
139+
- eraseText: 80
140+
- inputText: "${ADDRESS_LINE1}"
141+
- waitForAnimationToEnd:
142+
timeout: 3000
143+
- extendedWaitUntil:
144+
visible: "^${ADDRESS_LINE1}$"
145+
timeout: 5000
146+
- runFlow:
147+
when:
148+
visible: "Close suggestions"
149+
commands:
150+
- tapOn: "Close suggestions"
151+
- waitForAnimationToEnd:
152+
timeout: 3000
153+
- extendedWaitUntil:
154+
notVisible:
155+
id: shipping-address1-autocomplete-title
156+
timeout: 5000
157+
- extendedWaitUntil:
158+
notVisible:
159+
id: shipping-address1-options
160+
timeout: 5000
161+
- scrollUntilVisible:
162+
element:
163+
text: "^City$"
164+
direction: DOWN
165+
timeout: 5000
166+
centerElement: true
167+
- tapOn: "City"
168+
- eraseText: 80
169+
- inputText: "${CITY}"
170+
- extendedWaitUntil:
171+
visible: "^${CITY}$"
172+
timeout: 5000
173+
- scrollUntilVisible:
174+
element:
175+
text: "^${STATE_FIELD_LABEL}$"
176+
direction: DOWN
177+
timeout: 5000
178+
centerElement: true
179+
- runFlow:
180+
when:
181+
notVisible: "^${STATE_LABEL}$"
182+
commands:
183+
- tapOn: "State"
184+
- waitForAnimationToEnd:
185+
timeout: 3000
186+
- scrollUntilVisible:
187+
element:
188+
text: "^${STATE_LABEL}$"
189+
direction: UP
190+
timeout: 5000
191+
visibilityPercentage: 100
192+
optional: true
193+
- scrollUntilVisible:
194+
element:
195+
text: "^${STATE_LABEL}$"
196+
direction: DOWN
197+
timeout: 5000
198+
visibilityPercentage: 100
199+
optional: true
200+
- tapOn:
201+
text: "^${STATE_LABEL}$"
202+
- waitForAnimationToEnd:
203+
timeout: 3000
204+
- extendedWaitUntil:
205+
notVisible: "Select a state"
206+
timeout: 5000
207+
- extendedWaitUntil:
208+
visible: "^${STATE_LABEL}$"
209+
timeout: 5000
210+
- scrollUntilVisible:
211+
element:
212+
text: "^${POSTAL_FIELD_LABEL}$"
213+
direction: DOWN
214+
timeout: 5000
215+
centerElement: true
216+
- tapOn: "ZIP code"
217+
- eraseText: 80
218+
- inputText: "${POSTAL_CODE}"
219+
- extendedWaitUntil:
220+
visible: "^${POSTAL_CODE}$"
221+
timeout: 5000
222+
- waitForAnimationToEnd:
223+
timeout: 3000
224+
225+
# Payment
226+
- scrollUntilVisible:
227+
element:
228+
id: number
229+
direction: DOWN
230+
timeout: 5000
231+
centerElement: true
232+
- tapOn:
233+
text: "Card number"
234+
index: -1
235+
- inputText: "${CARD_NUMBER}"
236+
- tapOn:
237+
id: expiry
238+
- inputText: "1"
239+
- waitForAnimationToEnd:
240+
timeout: 3000
241+
- inputText: "2"
242+
- waitForAnimationToEnd:
243+
timeout: 3000
244+
- inputText: "3"
245+
- waitForAnimationToEnd:
246+
timeout: 3000
247+
- inputText: "0"
248+
- extendedWaitUntil:
249+
visible: "^${CARD_EXPIRY_DISPLAY}$"
250+
timeout: 5000
251+
- tapOn:
252+
text: "Security code"
253+
index: -1
254+
- inputText: "${CARD_SECURITY_CODE}"
255+
- extendedWaitUntil:
256+
visible: "^${CARD_SECURITY_CODE}$"
257+
timeout: 5000
258+
- scrollUntilVisible:
259+
element:
260+
id: name
261+
direction: DOWN
262+
timeout: 5000
263+
centerElement: true
264+
- extendedWaitUntil:
265+
visible: "^${CARDHOLDER_NAME}$"
266+
timeout: 5000
267+
- scrollUntilVisible:
268+
element:
269+
text: "^Pay now$"
270+
direction: DOWN
271+
timeout: 5000
272+
centerElement: true
273+
- tapOn: "Pay now"
274+
- extendedWaitUntil:
275+
visible: "${POST_SUBMIT_RESULT_PATTERN}"
276+
timeout: 60000
277+
- tapOn: "Close Checkout"
278+
- extendedWaitUntil:
279+
visible: "^Your cart is empty\\.$"
280+
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)