Appium React Native 尚未准备好进行文本输入答案

【问题标题】：Appium React Native Not Ready for Text InputAppium React Native 尚未准备好进行文本输入
【发布时间】：2020-12-20 08:19:39
【问题描述】：

我最近切换到 Appium + webdriverIO 进行 E2E 测试。除了一个与文本输入相关的测试用例外，一切都运行良好。

基本上，被测组件是一个使用 redux-form 进行表单管理的登录屏幕。我不断收到错误"'"login-field" Other' is not ready for a text input. Neither the accessibility element itself nor its accessible descendants have the input focus"。组件如下：

SignInScreen.tsx

export class SignInScreen extends React.Component<any> {
  render() {
    const { handleSubmit, submitting, style } = this.props;
    return (
      <View style={style}>
        <View>
          <View>
            <Field
              name="login"
              component={Input}
              accessibilityLabel="login-field"
              testID="login-field"
            />
            <Field
              secureTextEntry
              name="password"
              component={Input}
              accessibilityLabel="password-field"
              testID="password-field"
            />
          </View>
        </View>
      </View>
    );
  }
}

Input.tsx

export class Input extends React.Component {
  render() {
    const {
      input,
      meta: { error, active, focused },
      accessibilityLabel,
      testID
    } = this.props;

    const showError = !active && !!error && !focused;
    const errorText = "ERROR!"

    return (
      <View style={[style, styles.container]}>
        <TextInput
          autoCapitalize="none"
          value={input.value}
          onChangeText={input.onChange}
          onFocus={input.onFocus}
          onBlur={input.onBlur}
          accessibilityLabel={accessibilityLabel},
          testID={testID}
        />

        <View style={{height: 30}}>
          {showError && (
            <Text>{errorText}</Text>
          )}
        </View>
      </View>
    );
  }
}

SignInScreen.test.ts

describe('Sign In Screen Test', () => {
  let client;

  beforeAll(async () => {
    // set up code
  });

  afterAll(async () => {
    // tear down code
  });

  it('Can login', async () => {
    const loginField = await client.$('~login-field');
    await loginField.setValue('test@gmail.com'); // error here

    const passwordField = await client.$('~password-field');
    await passwordField.set('password' + '\n');
  });
});

我确实意识到，当我在 Input.tsx 组件中的现有 <TextInput /> 组件之上添加额外的 <TextInput /> 时，测试用例可以工作，如下所示：

Input.tsx

export class Input extends React.Component {
  render() {
    const {
      input,
      meta: { error, active, focused },
      accessibilityLabel,
      testID
    } = this.props;

    const showError = !active && !!error && !focused;
    const errorText = "ERROR!"

    return (
      <View style={[style, styles.container]}>
        <TextInput />
        <TextInput
          autoCapitalize="none"
          value={input.value}
          onChangeText={input.onChange}
          onFocus={input.onFocus}
          onBlur={input.onBlur}
          accessibilityLabel={accessibilityLabel},
          testID={testID}
        />

        <View style={{height: 30}}>
          {showError && (
            <Text>{errorText}</Text>
          )}
        </View>
      </View>
    );
  }
}

或者我删除嵌套错误消息的View组件中的固定高度，如下所示：

Input.tsx

export class Input extends React.Component {
  render() {
    const {
      input,
      meta: { error, active, focused },
      accessibilityLabel,
      testID
    } = this.props;

    const showError = !active && !!error && !focused;
    const errorText = "ERROR!"

    return (
      <View style={[style, styles.container]}>
        <TextInput
          autoCapitalize="none"
          value={input.value}
          onChangeText={input.onChange}
          onFocus={input.onFocus}
          onBlur={input.onBlur}
          accessibilityLabel={accessibilityLabel},
          testID={testID}
        />

        <View>
          {showError && (
            <Text>{errorText}</Text>
          )}
        </View>
      </View>
    );
  }
}

那是什么？我真的很困惑是什么导致 Appium 在没有进行上述调整的情况下无法获取输入焦点。

【问题讨论】：

标签： react-native appium webdriver-io appium-ios

【解决方案1】：

我相信这是 Appium 最近的一个错误 - https://github.com/appium/java-client/issues/1386

【讨论】：

我尝试降级到 Appium 1.17.0，它现在对我有用。
谢谢！这实际上阻止了我一个星期！

【解决方案2】：

您不应该为 ios 和 android 单独的 props 指定accessibilityLabel，因此请尝试下一个解决方法：

export default function testID(id) {
    return Platform.OS === 'android'
        ? {
            accessible        : true,
            accessibilityLabel: id,
        }
        : {
            testID: id,
        };
}

然后

<TextInput
    {...otherProps}
    {...testID('some-testID')}
/>

【讨论】：