如何在iOS UITest中通过其testID获取React Native TextInput

Question

我正在尝试在ios UITest中编辑TextInput React Native组件的文本。我已经向组件添加了testID道具。

两个问题：

1. testID道具在本地ios代码中出现在什么地方？
2. 如何通过此testID选择TextInput并向其中添加文本？​​

App.js

import React from "react";
import { StyleSheet, TextInput, View } from "react-native";

export default function App() {
  return (
    <View>
      <TextInput testID="username" placeholder="Enter your username" />
    </View>
  );
}

TestappUITests.swift

import XCTest

class TestappUITests: XCTestCase {

    ...

    func testExample() {
        // UI tests must launch the application that they test.
        let app = XCUIApplication()
        app.launch()

        // Write test code here
    }
}

Answer 1

1. RN使用testID属性作为ios元素上的accessibiltiyIdentifier。

您可以通过在xcode中打开“调试视图层次结构”功能并选择元素来在xcode中对其进行查看。

1. 您必须使用XCUIElementQuery来选择ios UITest中的TextInput组件。 TextInput是RCTUITextField，因此您需要使用textFields实例属性。

然后，您可以使用RN testId选择元素。从那时起，使用tap和typeText方法很容易进行操作。

import XCTest

class TestappUITests: XCTestCase {

    ...

    func testExample() {
        // UI tests must launch the application that they test.
        let app = XCUIApplication()
        app.launch()

        // Give element focus
        app.textFields["username"].tap()
        // Type text in the element
        app.textFields["username"].typeText("super-user");

    }
}

如果您尝试通过testID获取其他类型的组件，则可以检查“调试视图层次结构”以了解您拥有哪种类型的元素。然后确定应该使用什么查询而不是textFields。

仅供参考，.otherElements实例属性用于选择React Native Views。