React Native-Ansichten in Android und iOS taggen
- 11 Jun 2024
- 2 Minuten zu lesen
-
Drucken
-
DunkelLicht
-
pdf
React Native-Ansichten in Android und iOS taggen
- Aktualisiert am 11 Jun 2024
- 2 Minuten zu lesen
-
Drucken
-
DunkelLicht
-
pdf
Artikel-Zusammenfassung
Fanden Sie diese Zusammenfassung hilfreich?
Vielen Dank für Ihr Feedback
Whatfix Mobile verwendet testID, um den Bildschirm eindeutig zu identifizieren, der in den Test-Frameworks Espresso und Appium verwendet wird.
Warum sollten Sie React Native-Ansichten in Android taggen?
Whatfix Mobile identifiziert den Bildschirm von nativen Apps eindeutig mit den Eigenschaften eines Elements wie Ressourcen-ID und Tag auf dem Bildschirm. Im React Native wird die resource-id zur Laufzeit automatisch generiert. Daher ist es nicht zuverlässig, einen Bildschirm mit resource-id zu identifizieren. Aber das Tag wird nicht automatisch generiert; es muss manuell hinzugefügt werden. Um Elemente zu markieren, müssen Sie dem Element ein Attribut namens testID hinzufügen. ReactNative konvertiert das testID Attribut in das tag Attribut.
Warum sollten Sie React Native-Ansichten in iOS taggen?
Whatfix Mobile identifiziert den Bildschirm von nativen Apps eindeutig mit den Eigenschaften eines Elements namens dem Erreichbarkeit Label auf dem Bildschirm. Um die Elemente zu taggen, müssen Sie dem Element ein Attribut namens testID hinzufügen. ReactNative konvertiert das testID Attribut in das Erreichbarkeit Attribut.
your title goes here
Für weitere Informationen über React Native Views und Identifikatoren sehen Sie,
Wie taggt man Ansichten?
Sie können Ansichten markieren, indem Sie das Attribut testID zu den React Native-Ansichten hinzufügen. Hier ist eine Liste der grundlegenden React Native-Ansichten mit Beispielen, wie Sie testID hinzufügen können. Sie können jede React Native-Ansicht auf ähnliche Weise markieren.
your title goes here
Weisen Sie der Ansicht auf dem aktuellen Bildschirm eine eindeutige testID zu. Wenn die TestID eindeutig ist, ist die Kontexterkennung besser.
Ansicht
Betrachten Sie eine Ansicht, die drei Kinder hat. Sie können Test-ID wie im folgenden Code-Snippet gezeigt zuweisen.
<View style={{ flexDirection: "row", height: 100, padding: 20}}>
<View testID="tag_view_blue" style={{ backgroundColor: "blue", flex: 0.3 }} />
<View testID="tag_view_red" style={{ backgroundColor: "red", flex: 0.5 }} />
<Text testID="tag_text_hello_world" >Hello World!</Text>
</View>
Button
<Button
onPress={onPressLearnMore}
title="Learn More"
testID="tag_button_learn_more"
/>
Text
<Text testID="tag_text_hello_world_base" style={styles.baseText}>
<Text testID="tag_text_title_hello_world" style={styles.titleText} onPress={onPressTitle}>
{"Hello world"}
{"\n"}
{"\n"}
</Text>
<Text testID="tag_text_body_hello_world" numberOfLines={5}>{bodyText}</Text>
</Text>
Texteingabe
<TextInput testID="tag_inputtext_enter_name" style={styles.input}
onChangeText={onChangeText} placeholder="Enter Name"/>
Bild
<Image testID="tag_image_react_native_tiny_logo"
style={styles.tinyLogo}
source={{
uri: 'https:>
Bildhintergrund
<ImageBackground
testID="tag_bg_image_inside_text"
source={image} style={styles.image}>
<Text style={styles.text}>Innerhalb</Text>
</ImageBackground>
Switch
<Switch testID="tag_switch_privacy_policy"
onValueChange={toggleSwitch}
/>
Tab Navigation
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen testID="tag_tab_home_screen_selected" name="Home" component={HomeScreen} />
<Tab.Screen testID="tag_tab_setting_screen" name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
your title goes here
Immer wenn eine Ansicht ausgewählt wird, ändert sich ihre Eigenschaft ausgewählt von falsch auf wahr. Aber im Fall der Tab-Navigation ändert sich die Eigenschaft ausgewählt nicht. In diesem Fall wird Leap nicht in der Lage sein, den ausgewählten Tab zu identifizieren. Um den ausgewählten Tab zu identifizieren, fügen Sie die testID mit _ausgewählt Taste an. In diesem Szenario, wenn der Tab "HomeScreen" ausgewählt ist, ändern Sie die testID in tag_tab_home_screen_selected. Wenn Einstellungen Tab ausgewählt ist, ändern Sie testID in tag_tab_setting_screen_selected.
WebViews
<WebView
testID='tag_webview_product_page'
source={{ uri: sourceUri }}
javaScriptEnabled={true}
/>
ScrollAnsicht
<ScrollView
testID='tag_scrollview_product_page'
contentContainerStyle={styles.scrollView}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
/>
}
>
<Text testID='tag_text_pull_down_to_refresh'>Ziehen Sie nach unten, um den RefreshControl-Indikator zu sehen</Text>
</ScrollView>
War dieser Artikel hilfreich?