test(e2e): Adds Feedback Widget Capture Screenshot Maestro E2E tests

Author: antonis

dev-packages/e2e-tests/maestro/feedback.yml

@@ -17,3 +17,13 @@ jsEngine: graaljs
     file: feedback/happyFlow-android.yml
     when:
       platform: Android
+
+- runFlow:
+    file: feedback/captureFlow-ios.yml
+    when:
+      platform: iOS
+
+- runFlow:
+    file: feedback/captureFlow-android.yml
+    when:
+      platform: Android

dev-packages/e2e-tests/maestro/feedback/captureFlow-android.yml

@@ -0,0 +1,46 @@
+# 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 with a screenshot from CI e2e tests'
+
+# Take screenshot
+- scrollUntilVisible:
+    element:
+      text: 'Take a screenshot'
+- tapOn: 'Take a screenshot'
+- tapOn: 'Take Screenshot'
+
+# 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'

dev-packages/e2e-tests/maestro/feedback/captureFlow-ios.yml

@@ -0,0 +1,54 @@
+# 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 with a screenshot from CI e2e tests'
+
+# Take screenshot
+- scrollUntilVisible:
+    element:
+      id: 'sentry-feedback-take-screenshot-button'
+- tapOn:
+    id: 'sentry-feedback-take-screenshot-button'
+- tapOn:
+    id: 'sentry-feedback-screenshot-button'
+
+# 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'

dev-packages/e2e-tests/patch-scripts/rn.patch.app.js

@@ -32,6 +32,9 @@ Sentry.init({
   },
   integrations: [
     Sentry.mobileReplayIntegration(),
+    Sentry.feedbackIntegration({
+      enableTakeScreenshot: true,
+    }),
   ],
 });
 `;

packages/core/src/js/feedback/FeedbackWidget.tsx

@@ -351,7 +351,7 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
               onCancel();
               showScreenshotButton();
             }}>
-              <Text style={styles.takeScreenshotText}>{text.captureScreenshotButtonLabel}</Text>
+              <Text style={styles.takeScreenshotText} testID='sentry-feedback-take-screenshot-button'>{text.captureScreenshotButtonLabel}</Text>
             </TouchableOpacity>
           )}
           <TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>

packages/core/src/js/feedback/ScreenshotButton.tsx

@@ -82,7 +82,7 @@ export class ScreenshotButton extends React.Component<ScreenshotButtonProps> {
         accessibilityLabel={text.triggerAriaLabel}
       >
         <Image source={{ uri: screenshotIcon }} style={styles.triggerIcon}/>
-        <Text style={styles.triggerText}>{text.triggerLabel}</Text>
+        <Text style={styles.triggerText} testID='sentry-feedback-screenshot-button'>{text.triggerLabel}</Text>
       </TouchableOpacity>
     );
   }