How to tap the iOS simulator built-in numpad?

Description

Hi, My react-native mobile app includes some iOS native built-in numpad keyboard in the login process, I would like to know how can I tap the numpad of the keyboard? I try to locate the numpad by by.text() or by.label(), for example, locate numpad key 1 by

await element(by.text('1')).tap();

or

await element(by.label('1')).tap();

but both by.text() and by.label() out of work to locate the numpad key 1 to tap.

Could you kindly help to advise how can I handle this?

Thanks.

Your environment

Detox version: 19.7.1 React Native version: 0.63.2 Node version: 14.16.0 Device model: iOS simulator 13 Pro Max with iOS 15.5 OS: macOS Test-runner: mocha

@ansonliao can you please try:

await element(by.id('<first input element id>')).typeText('123456');

you should replace 123456 with whatever password you want to type in, also replace <first input element id> with the first input view's id.

See: https://wix.github.io/Detox/docs/next/api/actions-on-element#typetexttext

Hi @asafkorem , thanks for your reply. the input field is disabled to interactive (by our UX design), that why need to tap the Numpad keyboard.

Thanks @asafkorem . We are blocked by this pin number input of the login process, as all features are behind the login.

@ansonliao for now, you can mock this phase on your flow, see: https://wix.github.io/Detox/docs/guide/mocking For examples: you can disable it or enable input selection just for the tests.

@ansonliao can you show me the error message that appears when you run:

await element(by.id('<first input element id>')).typeText('1');

You don't need to tap the element before

Also, if you can reproduce this issue in an isolated app, it will be very useful and will very help us work on the solution. You can use our template for that: https://github.com/wix-incubator/DetoxTemplate

@ansonliao can you show me the error message that appears when you run:

await element(by.id('<first input element id>')).typeText('1');

You don't need to tap the element before

Hi @asafkorem , Communicated with my developers, these 6 input text boxes actually are the shadow boxes of the real text input fields, the developers hidden the 6 real input text fields and they are testID are hiddenTextInput, when end user tap the numpad keyboard of iOS, actually the tapping will be fill to the hidden in text input fields, then reflecting to the disabled 6 text input fields as we see.

I tried fill the text to the hidden text input fields, but failed with error shows the element is not visible to interactive.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest Detox and report back.

Thank you for your contributions!

For more information on bots in this reporsitory, read this discussion.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest Detox and report back.

Thank you for your contributions!

For more information on bots in this repository, read this discussion.

Hi @asafkorem , I followed the instruction of the Mock of Detox, to mock my SMS code input page, the mock strategy is enabled the custom keyboard instead of the native keyboard of the iOS simulator.

so the original react-native typescript code file of SMS code input page is for example: src/scenes/login/inputPinNum.tsx, my mock file is src/scenes/login/inputPinNum.mock.tsx,

then updated metro.config.js as below:

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts:
        process.env.MY_APP_MODE === 'mocked'
          ? [...sourceExts, 'svg', 'mock.tsx']
          : [...sourceExts, 'svg'],
    },
  };
})();

then build the app to the iOS simulator by the command-lines:

$ export MY_APP_MODE=mocked
$ npx react-native run-ios

then execute the metro bundler by command-line:

MY_APP_MODE=mocked npx react-native start

After the app is running in the iOS simulator, I find that the mock file src/scenes/login/inputPinNum.mock.tsx doesn't build to the app.

So for my modification, anything is missed?

Thanks.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest Detox and report back.

Thank you for your contributions!

For more information on bots in this repository, read this discussion.

The issue has been closed for inactivity.