Detox textInput not writing text

Question

I am using Detox on my react-native project and want to input a name on the login screen, but detox is not recognising the textInput. This is my text code

describe('SCA', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('should have splash screen', async () => {
    await expect(element(by.id('splash'))).toBeVisible();
  });
  it('should show login screen', async () => {
    await waitFor(element(by.id('login'))).toBeVisible();
  });
  it('test login screen name input', async () => {
    await element(by.id('name')).typeText('Liam')
  });
});

The textInput code:

<TextInput
        testID="name"
        style={styles.input}
        onChangeText={value => this.setState({ name: value }) }
        placeholder={'Name ... '}
        placeholderTextColor='white'
        value={name} />

And this is the error I'm getting:

 ● SCA › test login screen name input

    Failed: [Error: Error: Cannot find UI element.
    Exception with Action: {
      "Action Name":  "Type 'Liam'",
      "Element Matcher":  "((!(kindOfClass('RCTScrollView')) && (respondsToSelector(accessibilityIdentifier) && accessibilityID('name'))) || (((kindOfClass('UIView') || respondsToSelector(accessibilityContainer)) && parentThatMatches(kindOfClass('RCTScrollView'))) && ((kindOfClass('UIView') || respondsToSelector(accessibilityContainer)) && parentThatMatches((respondsToSelector(accessibilityIdentifier) && accessibilityID('name'))))))",
      "Recovery Suggestion":  "Check if the element exists in the UI hierarchy printed below. If it exists, adjust the matcher so that it accurately matches element."
    }


    Error Trace: [
      {
        "Description":  "Interaction cannot continue because the desired element was not found.",
        "Error Domain":  "com.google.earlgrey.ElementInteractionErrorDomain",
        "Error Code":  "0",
        "File Name":  "GREYElementInteraction.m",
        "Function Name":  "-[GREYElementInteraction matchedElementsWithTimeout:error:]",
        "Line":  "124"
      }
    ]

Answer 1

You’re currently reloading the device between each test.

beforeEach(async () => {
  await device.reloadReactNative();
});

I don’t think that is what you want to do as it resets everything meaning you have to wait for everything to reload and move through your screens and you will face the same issue that you did in your previous post (NB your usage of waitFor is incorrect, see my answer on your previous post or re-read the documentation)

You can read more about .typeText in the documentation.

A common mistakes when using .typeText is not disconnecting the hardware keyboard

Note: Make sure hardware keyboard is disconnected. Otherwise, Detox may fail when attempting to type text.

To make sure hardware keyboard is disconnected, open the simulator from Xcode and make sure Hardware -> Keyboard -> Connect Hardware Keyboard is deselected (or press ⇧⌘K).

One thing I always do when using .typeText is make sure that the element exists

So I would add the following before you use .typeText to make sure that it is visible.

await expect(element(by.id('name'))).toBeVisible();