test(e2e): Adds Feedback Widget Maestro E2E tests (#4604)

antonis · krystofwoldrich · lucas-zimerman · web-flow · commit 92c4d2da9a08 · 2025-05-09T10:22:47.000+03:00
* Update the client implementation to use the new capture feedback js api * Updates SDK API * Adds new feedback button in the sample * Adds changelog * Removes unused mock * Update CHANGELOG.md Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> * Directly use captureFeedback from sentry/core * Use import from core * Fixes imports order lint issue * Fixes build issue * Adds captureFeedback tests from sentry-javascript * Update CHANGELOG.md * Only deprecate client captureUserFeedback * Add simple form UI * Adds basic form functionality * Update imports * Update imports * Remove useState hook to avoid multiple react instances issues * Move types and styles in different files * Removes attachment button to be added back separately along with the implementation * Add basic field validation * Adds changelog * Updates changelog * Updates changelog * Trim whitespaces from the submitted feedback * Adds tests * Renames FeedbackFormScreen to FeedbackForm * Add beta label * Extract default text to constants * Moves constant to a separate file and aligns naming with JS * Adds input text labels * Close screen before sending the feedback to minimise wait time Co-authored-by: LucasZF <lucas-zimerman1@hotmail.com> * Rename file for consistency * Flatten configuration hierarchy and clean up * Align required values with JS * Use Sentry user email and name when set * Simplifies email validation * Show success alert message * Aligns naming with JS and unmounts the form by default * Use the minimum config without props in the changelog * Adds development not for unimplemented function * Show email and name conditionally * Adds sentry branding (png logo) * Adds sentry logo resource * Add assets in module exports * Revert "Add assets in module exports" This reverts commit 5292475. * Revert "Adds sentry logo resource" This reverts commit d6e9229. * Revert "Adds sentry branding (png logo)" This reverts commit 8c56753. * Add last event id * Mock lastEventId * Adds beta note in the changelog * Autoinject feedback form * Updates changelog * Align colors with JS * Update CHANGELOG.md Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> * Update CHANGELOG.md Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> * Update CHANGELOG.md Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> * Use regular fonts for both buttons * Handle keyboard properly * Adds an option on whether the email should be validated * Merge properties only once * Loads current user data on form construction * Remove unneeded extra padding * Fix background color issue * Adds feedback button * Updates the changelog * Fixes changelog typo * Updates styles background color Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> * Use defaultProps * Correct defaultProps * Adds test to verify when getUser is called * Use smaller image Co-authored-by: LucasZF <lucas-zimerman1@hotmail.com> * Add margin next to the icon * Adds bottom spacing in the ErrorScreen so that the feedback button does not hide the scrollview buttons * (2.2) feat: Add Feedback Form UI Branding logo (#4357) * Adds sentry branding logo as a base64 encoded png --------- Co-authored-by: LucasZF <lucas-zimerman1@hotmail.com> * Autoinject feedback form (#4370) * Align changelog entry * Update changelog * Disable bouncing * Add modal ui appearance * Update snapshot tests * Fix bottom margin * Fix sheet height * Remove extra modal border * Do not expose modal styles * Animate background color * Avoid keyboard in modal * Update changelog * Fix changelog * Updates comment * Extract FeedbackButtonProps * Add public function description to satisfy lint check * Adds tests * Fix tests * Add test ids in feedback widget * Add feedback widget button in test app * WIP: Add feedback test * Update snapshot tests with the added test ids * Android happy path test * Check field validation * Scroll if button is not visible * Adds accessibility labels * Remove extended initial checks due to flakiness * Revert "Remove extended initial checks due to flakiness" This reverts commit fa3bdfc. * Add hardcoded dark and light color themes * Rename theme options * Update snapshot tests * Include in the feedback integration * Fix circular dependency * Add theme integration options * Adds changelog * Add comment note * Align with JS api * Remove unneeded line Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> * Place widget button below the feedback widget shadow * Expose showFeedbackButton/hideFeedbackButton methods * Add dummy integration for tracking usage * Adds button border * Fixes tests * Add accentBackground and accentForeground colors * Extract integration getter in a helper function * Adds dynamic theming support * Add snapshot tests * Show screenshot button UI * Add screenshot button integration * Add screenshot icon * Adds Take a screenshot button in FeedbackWidget * Updates snapshot tests * Fix circularDepCheck * Fix circularDepCheck * Attache captured screenshot * Hide the take screenshot button when there is a screenshot * Convert uint8Array to Base64 on the native side * ref(feedback): Extracts FeedbackWidgetProvider in a separate file * Updates exposed comments * Adds snapshot tests * Disable functionality on the Web * Add screenshot button in the sample expo app * Adds system theme tests * Test dynamically changed theme * Remove showScreenshotButton and hideScreenshotButton from the exposed api * Fix function name typo * Adds enableTakeScreenshot option * Adds happy flow test * Make flow tests more granular * Increate wait time out to fix flakiness on ci * Reset widget state after each test * Fix CI flakiness * Remove flaky test * fix(feedback): Fixes accessibility issue on iOS * Add changelog * Properly wrap root app component * Handle undefined AppRegistryIntegration.onRunApplication gracefully * Fix lint issue * Do not validate all fields for visibility * Take screenshots for debugging * Revert "Take screenshots for debugging" This reverts commit 3e361a1. * Simplify test scenario * Try without hiding the keyboard * Test Feedback button * Test screenshot capture * Show an error if screenshot capture fails * Test error flow * Revert unneeded change * Test with latest Maestro * Revert "Test with latest Maestro" This reverts commit e7c31bf. * Revert "Test screenshot capture" This reverts commit 8913ffc. * Skip for 0.65.3 * Remove version check * Use testId for feedback button * Skip for 0.65.3 * Update snapshots * Cleanup testIds and accessibility labels * Enable for all RN versions * Temp: remove modal supported check * Do not use native driver for backgroundOpacity animation * Revert "Temp: remove modal supported check" This reverts commit e20aff2. * Do not use native driver for backgroundOpacity animation * Use text instead of test ids * Separate iOS and Android tests --------- Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> Co-authored-by: LucasZF <lucas-zimerman1@hotmail.com>
diff --git a/dev-packages/e2e-tests/maestro/feedback.yml b/dev-packages/e2e-tests/maestro/feedback.yml
@@ -0,0 +1,19 @@
+appId: ${APP_ID}
+jsEngine: graaljs
+---
+- runFlow: utils/launchTestAppClear.yml
+
+
+# The following tests are happy path tests for the feedback widget on both iOS and Android.
+# They verify that the feedback form can be opened, filled out, and submitted successfully.
+# The tests are separate because iOS tests work better with `testID` and Android tests work better with `text`.
+
+- runFlow:
+    file: feedback/happyFlow-ios.yml
+    when:
+      platform: iOS
+
+- runFlow:
+    file: feedback/happyFlow-android.yml
+    when:
+      platform: Android
diff --git a/dev-packages/e2e-tests/maestro/feedback/happyFlow-android.yml b/dev-packages/e2e-tests/maestro/feedback/happyFlow-android.yml
@@ -0,0 +1,39 @@
+# This is a happy path test for the feedback widget on Android.
+# It verifies that the feedback form can be opened, filled out, and submitted successfully
+appId: ${APP_ID}
+jsEngine: graaljs
+---
+
+# Show feedback button
+- tapOn: 'Feedback'
+
+# Open feedback widget
+- tapOn: 'Report a Bug'
+
+# Assert that the feedback form is visible
+- extendedWaitUntil:
+    visible: 'Report a Bug'
+    timeout: 5_000
+
+# Fill out name field
+- tapOn: 'Your Name'
+- inputText: 'John Doe'
+
+# Fill out email field
+- tapOn: 'your.email@example.org'
+- inputText: 'test@email.com'
+
+# Fill out message field
+- tapOn: "What's the bug? What did you expect?"
+- inputText: 'This is a test feedback message from CI e2e tests'
+
+# Submit feedback
+- scrollUntilVisible:
+    element:
+      text: 'Send Bug Report'
+- tapOn: 'Send Bug Report'
+- assertVisible: 'Thank you for your report!'
+- tapOn: 'OK'
+
+# Verify feedback form is closed and the home screen is visible
+- assertVisible: 'Welcome to React Native'
diff --git a/dev-packages/e2e-tests/maestro/feedback/happyFlow-ios.yml b/dev-packages/e2e-tests/maestro/feedback/happyFlow-ios.yml
@@ -0,0 +1,45 @@
+# This is a happy path test for the feedback widget on iOS.
+# It verifies that the feedback form can be opened, filled out, and submitted successfully
+appId: ${APP_ID}
+jsEngine: graaljs
+---
+
+# Show feedback button
+- tapOn: 'Feedback'
+
+# Open feedback widget
+- tapOn:
+    id: 'sentry-feedback-button'
+
+# Assert that the feedback form is visible
+- extendedWaitUntil:
+    visible:
+      id: 'sentry-feedback-form-title'
+    timeout: 5_000
+
+# Fill out name field
+- tapOn:
+    id: 'sentry-feedback-name-input'
+- inputText: 'John Doe'
+
+# Fill out email field
+- tapOn:
+    id: 'sentry-feedback-email-input'
+- inputText: 'test@email.com'
+
+# Fill out message field
+- tapOn:
+    id: 'sentry-feedback-message-input'
+- inputText: 'This is a test feedback message from CI e2e tests'
+
+# Submit feedback
+- scrollUntilVisible:
+    element:
+      id: 'sentry-feedback-submit-button'
+- tapOn:
+    id: 'sentry-feedback-submit-button'
+- assertVisible: 'Thank you for your report!'
+- tapOn: 'OK'
+
+# Verify feedback form is closed and the home screen is visible
+- assertVisible: 'Welcome to React Native'
diff --git a/dev-packages/e2e-tests/patch-scripts/rn.patch.app.js b/dev-packages/e2e-tests/patch-scripts/rn.patch.app.js
@@ -39,6 +39,7 @@ const e2eComponentPatch = '<EndToEndTestsScreen />';
 const lastImportRex = /^([^]*)(import\s+[^;]*?;$)/m;
 const patchRex = '@sentry/react-native';
 const headerComponentRex = /<ScrollView/gm;
+const exportDefaultRex = /export\s+default\s+App;/m;
 
 const jsPath = path.join(args.app, 'App.js');
 const tsxPath = path.join(args.app, 'App.tsx');
@@ -50,7 +51,8 @@ const isPatched = app.match(patchRex);
 if (!isPatched) {
   const patched = app
     .replace(lastImportRex, m => m + initPatch)
-    .replace(headerComponentRex, m => e2eComponentPatch + m);
+    .replace(headerComponentRex, m => e2eComponentPatch + m)
+    .replace(exportDefaultRex, 'export default Sentry.wrap(App);');
 
   fs.writeFileSync(appPath, patched);
   logger.info('Patched RN App.(js|tsx) successfully!');
diff --git a/dev-packages/e2e-tests/src/EndToEndTests.tsx b/dev-packages/e2e-tests/src/EndToEndTests.tsx
@@ -62,6 +62,11 @@ const EndToEndTestsScreen = (): JSX.Element => {
       name: 'Unhandled Promise Rejection',
       action: async () => await Promise.reject(new Error('Unhandled Promise Rejection')),
     },
+    {
+      id: 'feedback',
+      name: 'Feedback',
+      action: () => Sentry.showFeedbackButton(),
+    },
     {
       id: 'close',
       name: 'Close',
diff --git a/packages/core/src/js/feedback/FeedbackButton.tsx b/packages/core/src/js/feedback/FeedbackButton.tsx
@@ -59,7 +59,7 @@ export class FeedbackButton extends React.Component<FeedbackButtonProps> {
         accessibilityLabel={text.triggerAriaLabel}
       >
         <Image source={{ uri: feedbackIcon }} style={styles.triggerIcon}/>
-        <Text style={styles.triggerText}>{text.triggerLabel}</Text>
+        <Text style={styles.triggerText} testID='sentry-feedback-button'>{text.triggerLabel}</Text>
       </TouchableOpacity>
     );
   }
diff --git a/packages/core/src/js/feedback/FeedbackWidget.tsx b/packages/core/src/js/feedback/FeedbackWidget.tsx
@@ -273,7 +273,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
         >
         <View style={styles.container}>
           <View style={styles.titleContainer}>
-            <Text style={styles.title}>{text.formTitle}</Text>
+            <Text style={styles.title} testID='sentry-feedback-form-title'>{text.formTitle}</Text>
             {config.showBranding && (
               <Image
                 source={{ uri: sentryLogo }}
@@ -291,6 +291,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
             </Text>
             <TextInput
               style={styles.input}
+              testID='sentry-feedback-name-input'
               placeholder={text.namePlaceholder}
               value={name}
               onChangeText={(value) => this.setState({ name: value })}
@@ -306,6 +307,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
             </Text>
             <TextInput
               style={styles.input}
+              testID='sentry-feedback-email-input'
               placeholder={text.emailPlaceholder}
               keyboardType={'email-address' as KeyboardTypeOptions}
               value={email}
@@ -320,6 +322,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
           </Text>
           <TextInput
             style={[styles.input, styles.textArea]}
+            testID='sentry-feedback-message-input'
             placeholder={text.messagePlaceholder}
             value={description}
             onChangeText={(value) => this.setState({ description: value })}
@@ -352,7 +355,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
             </TouchableOpacity>
           )}
           <TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>
-            <Text style={styles.submitText}>{text.submitButtonLabel}</Text>
+            <Text style={styles.submitText} testID='sentry-feedback-submit-button'>{text.submitButtonLabel}</Text>
           </TouchableOpacity>
 
           <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
diff --git a/packages/core/test/feedback/__snapshots__/FeedbackButton.test.tsx.snap b/packages/core/test/feedback/__snapshots__/FeedbackButton.test.tsx.snap
@@ -78,6 +78,7 @@ exports[`FeedbackButton matches the snapshot with custom styles 1`] = `
         "fontSize": 18,
       }
     }
+    testID="sentry-feedback-button"
   >
     Report a Bug
   </Text>
@@ -162,6 +163,7 @@ exports[`FeedbackButton matches the snapshot with custom texts 1`] = `
         "fontSize": 18,
       }
     }
+    testID="sentry-feedback-button"
   >
     Give Feedback
   </Text>
@@ -246,6 +248,7 @@ exports[`FeedbackButton matches the snapshot with default configuration 1`] = `
         "fontSize": 18,
       }
     }
+    testID="sentry-feedback-button"
   >
     Report a Bug
   </Text>
diff --git a/packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap b/packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap
diff --git a/packages/core/test/feedback/__snapshots__/FeedbackWidgetManager.test.tsx.snap b/packages/core/test/feedback/__snapshots__/FeedbackWidgetManager.test.tsx.snap

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ export class FeedbackButton extends React.Component<FeedbackButtonProps> {`
`59`	`59`	`accessibilityLabel={text.triggerAriaLabel}`
`60`	`60`	`>`
`61`	`61`	`<Image source={{ uri: feedbackIcon }} style={styles.triggerIcon}/>`
`62`		`- <Text style={styles.triggerText}>{text.triggerLabel}</Text>`
	`62`	`+ <Text style={styles.triggerText} testID='sentry-feedback-button'>{text.triggerLabel}</Text>`
`63`	`63`	`</TouchableOpacity>`
`64`	`64`	`);`
`65`	`65`	`}`
Original file line number	Diff line number	Diff line change
@@ -78,6 +78,7 @@ exports[`FeedbackButton matches the snapshot with custom styles 1`] = `
`78`	`78`	`"fontSize": 18,`
`79`	`79`	`}`
`80`	`80`	`}`
	`81`	`+ testID="sentry-feedback-button"`
`81`	`82`	`>`
`82`	`83`	`Report a Bug`
`83`	`84`	`</Text>`
@@ -162,6 +163,7 @@ exports[`FeedbackButton matches the snapshot with custom texts 1`] = `
`162`	`163`	`"fontSize": 18,`
`163`	`164`	`}`
`164`	`165`	`}`
	`166`	`+ testID="sentry-feedback-button"`
`165`	`167`	`>`
`166`	`168`	`Give Feedback`
`167`	`169`	`</Text>`
@@ -246,6 +248,7 @@ exports[`FeedbackButton matches the snapshot with default configuration 1`] = `
`246`	`248`	`"fontSize": 18,`
`247`	`249`	`}`
`248`	`250`	`}`
	`251`	`+ testID="sentry-feedback-button"`
`249`	`252`	`>`
`250`	`253`	`Report a Bug`
`251`	`254`	`</Text>`