Cannot find TextInput with secureTextEntry true in React-Native 0.55.4

[Xaber20110202]

Description

If I set TextInput secureTextEntry=true in RN 0.55.4, I can not get this element by element(by.id(str))

Steps to Reproduce

You can see code below, the normal TextInput could be found, but password could not.

// the View element
import * as React from 'react'
import { TextInput, View } from 'react-native'

export default class extends React.Component {
  render() {
    return <View>
      <TextInput
        testID="normal"
        secureTextEntry={true}
      />
      <TextInput
        testID="password"
        secureTextEntry={true}
      />
    </View>
  }
}

// e2e tests
it('should input something', async () => {
  await element(by.id('normal')).typeText('11111111')
  await element(by.id('password')).typeText('222222222')
})

Detox, Node, Device, Xcode and macOS Versions

• Detox: 8.2.3
• React Native: 0.55.4
• Node: 9.11.1
• Device: Mac / Simulator - iPhone 8 11.4
• Xcode: Version 9.4.1 (9F2000)
• macOS: 10.13.5

Device and verbose Detox logs

Logs see below

Error: Cannot find UI element.
    Exception with Action: {
      "Action Name":  "Type '222222222'",
      "Element Matcher":  "((!(kindOfClass('RCTScrollView')) && (respondsToSelector(accessibilityIdentifier) && accessibilityID('password'))) || (((kindOfClass('UIView') || respondsToSelector(accessibilityContainer)) && parentThatMatches(kindOfClass('RCTScrollView'))) && ((kindOfClass('UIView') || respondsToSelector(accessibilityContainer)) && parentThatMatches((respondsToSelector(accessibilityIdentifier) && accessibilityID('password'))))))",
      "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":  "Failed to type string '222222222', because key [K] could not be found on the keyboard.",
        "Description Glossary":    {
          "K":  "more, numbers"
        },
        "Error Domain":  "com.google.earlgrey.ElementInteractionErrorDomain",
        "Error Code":  "0",
        "File Name":  "GREYKeyboard.m",
        "Function Name":  "+[GREYKeyboard grey_setErrorForkeyNotFoundWithAccessibilityLabel:forTypingString:error:]",
        "Line":  "519"
      }
    ]

    Hierarchy: <UIWindow:0x7f9439c37d50; AX=N; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |--<UILayoutContainerView:0x7f9439f4c890; AX=N; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |--<UINavigationTransitionView:0x7f9439c603c0; AX=N; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |--<UIViewControllerWrapperView:0x7f9439f44130; AX=N; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |--<RCTRootView:0x7f9439e22450; AX=N; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |--<RCTRootContentView:0x7f9439d14e30; AX=N; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |--<RCTView:0x7f9439f6b3e0; AX=N; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |  |--<RCTView:0x7f9439f6b0d0; AX=N; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |--<RCTView:0x7f9439f529f0; AX=N; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |--<RCTView:0x7f9439c889c0; AX=N; AX.frame={{0, 0}, {375, 667}}; AX.activationPoint={187.5, 333.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 667}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |--<RCTSinglelineTextInputView:0x7f9439c87b90; AX=N; AX.frame={{0, 67}, {375, 17}}; AX.activationPoint={187.5, 75.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 67}, {375, 17}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |--<RCTUITextField:0x7f943a057c00; AX=Y; AX.id='password'; AX.frame={{0, 67}, {375, 17}}; AX.activationPoint={1, 74.353515625}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 17}}; alpha=1; text=''>
      |  |  |  |  |  |  |  |  |  |  |  |--<UIFieldEditor:0x7f943b875000; AX=N; AX.frame={{0, 67}, {375, 17}}; AX.activationPoint={187.5, 75.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 17}}; alpha=1; text=''>
      |  |  |  |  |  |  |  |  |  |  |  |  |--<_UITextFieldContentView:0x7f9439c883a0; AX=N; AX.frame={{0, 67}, {375, 17}}; AX.activationPoint={187.5, 75.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 17}}; alpha=1; UIE=N>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |--<UITextSelectionView:0x7f9439f7ebb0; AX=N; AX.frame={{0, 67}, {0, 0}}; AX.activationPoint={0, 67}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {0, 0}}; opaque; alpha=1; UIE=N>
      |  |  |  |  |  |  |  |  |  |  |  |  |  |  |--<UIView:0x7f9439d19260; AX=N; AX.frame={{0, 67}, {2, 15.70703125}}; AX.activationPoint={1, 74.853515625}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {2, 15.70703125}}; opaque; alpha=1; UIE=N>
      |  |  |  |  |  |  |  |  |  |  |  |--<UIAccessibilityTextFieldElement:0x60400085e600; AX=Y; AX.frame={{0, 67}, {375, 17}}; AX.activationPoint={1, 74.353515625}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'>
      |  |  |  |  |  |  |  |  |  |--<RCTSinglelineTextInputView:0x7f9439c85b10; AX=N; AX.frame={{0, 50}, {375, 17}}; AX.activationPoint={187.5, 58.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 50}, {375, 17}}; opaque; alpha=1>
      |  |  |  |  |  |  |  |  |  |  |--<RCTUITextField:0x7f943a8c2a00; AX=Y; AX.id='normal'; AX.value='11111111'; AX.frame={{0, 50}, {375, 17}}; AX.activationPoint={187.5, 58.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 17}}; alpha=1; text='11111111'>
      |  |  |  |  |  |  |  |  |  |  |  |--<_UITextFieldContentView:0x7f9439ec51a0; AX=N; AX.frame={{0, 50}, {375, 17}}; AX.activationPoint={187.5, 58.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'; frame={{0, 0}, {375, 17}}; alpha=1; UIE=N>
      |  |  |  |  |  |  |  |  |  |  |  |--<UIAccessibilityTextFieldElement:0x600000c573d0; AX=Y; AX.value='11111111'; AX.frame={{0, 50}, {375, 17}}; AX.activationPoint={187.5, 58.5}; AX.traits='UIAccessibilityTraitNone'; AX.focused='N'>

      11 |     it('should input something', async () => {
      12 |       await id('normal').typeText('11111111')
    > 13 |       await id('password').typeText('222222222')
      14 |     })
      15 |   })
      16 | }

      at Client.execute (../node_modules/detox/src/client/Client.js:72:28)
      at InvocationManager.execute (../node_modules/detox/src/invoke.js:11:33)
      at ActionInteraction.execute (../node_modules/detox/src/ios/expect.js:178:29)
      at Element.typeText (../node_modules/detox/src/ios/expect.js:282:73)
      at _callee$ (specs/identity/create.js:13:27)
      at tryCatch (../node_modules/regenerator-runtime/runtime.js:62:40)
      at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:296:22)
      at Generator.prototype.(anonymous function) [as next] (../node_modules/regenerator-runtime/runtime.js:114:21)
      at tryCatch (../node_modules/regenerator-runtime/runtime.js:62:40)
      at invoke (../node_modules/regenerator-runtime/runtime.js:152:20)
      at ../node_modules/regenerator-runtime/runtime.js:162:13

[LeoNatan]

I am not sure why you are assuming that it can't find the text field, when the error clearly states "Failed to type string '222222222', because key [K] could not be found on the keyboard."

Entering numbers is a problematic and has been discussed several times already, including most recently in #902. I am guessing that for the normal text field, you have set a numeric keyboard, but for the password one you have not or cannot, and thus the keyboard does not include the number buttons.

Try instead using replaceText().

[Xaber20110202]

@LeoNatan Thanks for your reply, it was my env problem, my colleagues runs well.

[LeoNatan]

Could you please explain what the problem was?

[Xaber20110202]

Sorry about that, I don't know what matters, I copied node_modules from my colleagues computer(He rans well), but it didn't work too.

You can close this issue, it's only my environment problem.