Updated Button e2e tests to look up elements via testID (#22593)

Summary:
Previously the e2e test for Butto looked up elements by label. This can be fragile, and based on my understanding from TheSavior we would prefer to use testIDs. This also sets a consistent pattern we can point future contributors to, to follow.

Note that we are still looking up elements in the alerts shown by label. I haven't yet looked into whether it would be possible to add testIDs to alerts; it might be too complex to be worth it.
Pull Request resolved: https://github.com/facebook/react-native/pull/22593

Differential Revision: D13410799

Pulled By: TheSavior

fbshipit-source-id: 4bda80f4b8e7fe3ef17cd33209ec86d9183fd5e9

RNTester/e2e/__tests__/Button-test.js

@@ -24,29 +24,29 @@ describe('Button', () => {
   });
 
   it('Simple button should be tappable', async () => {
-    await element(by.label('Press Me')).tap();
+    await element(by.id('simple_button')).tap();
     await expect(element(by.text('Simple has been pressed!'))).toBeVisible();
     await element(by.text('OK')).tap();
   });
 
   it('Adjusted color button should be tappable', async () => {
-    await element(by.label('Press Purple')).tap();
+    await element(by.id('purple_button')).tap();
     await expect(element(by.text('Purple has been pressed!'))).toBeVisible();
     await element(by.text('OK')).tap();
   });
 
   it("Two buttons with JustifyContent:'space-between' should be tappable", async () => {
-    await element(by.label('This looks great!')).tap();
+    await element(by.id('left_button')).tap();
     await expect(element(by.text('Left has been pressed!'))).toBeVisible();
     await element(by.text('OK')).tap();
 
-    await element(by.label('Ok!')).tap();
+    await element(by.id('right_button')).tap();
     await expect(element(by.text('Right has been pressed!'))).toBeVisible();
     await element(by.text('OK')).tap();
   });
 
   it('Disabled button should not interact', async () => {
-    await element(by.label('I Am Disabled')).tap();
+    await element(by.id('disabled_button')).tap();
     await expect(
       element(by.text('Disabled has been pressed!')),
     ).toBeNotVisible();

RNTester/js/ButtonExample.js

@@ -34,6 +34,7 @@ exports.examples = [
       return (
         <Button
           onPress={() => onButtonPress('Simple')}
+          testID="simple_button"
           title="Press Me"
           accessibilityLabel="See an informative alert"
         />
@@ -50,6 +51,7 @@ exports.examples = [
       return (
         <Button
           onPress={() => onButtonPress('Purple')}
+          testID="purple_button"
           title="Press Purple"
           color="#841584"
           accessibilityLabel="Learn more about purple"
@@ -66,11 +68,13 @@ exports.examples = [
         <View style={styles.container}>
           <Button
             onPress={() => onButtonPress('Left')}
+            testID="left_button"
             title="This looks great!"
             accessibilityLabel="This sounds great!"
           />
           <Button
             onPress={() => onButtonPress('Right')}
+            testID="right_button"
             title="Ok!"
             color="#841584"
             accessibilityLabel="Ok, Great!"
@@ -87,6 +91,7 @@ exports.examples = [
         <Button
           disabled
           onPress={() => onButtonPress('Disabled')}
+          testID="disabled_button"
           title="I Am Disabled"
           accessibilityLabel="See an informative alert"
         />