Mobile Device Cloud AI4Test Quality & Intelligent Automation Unsere Expertise Blog Kategorien Mobile Device Cloud Testen mit künstlicher Intelligenz Quality & Intelligent Automation Support Erste Schritte EN DE EN DE Leistungen Mobile Device Cloud Funktionen im Überblick Tarife im Vergleich Zielgruppe Automatisierung & Frameworks Vorteile Geräte in der MDC Erste Schritte mit der MDC Preise & Bestellen AI4Test Überblick Details Funktionsweise & Vorgehen Einsatzmöglichkeiten Vorteile Preise & Anfragen Quality & Intelligent Automation Prozesse Effizienz Lösungen Vorteile Expertise Anfragen Unsere Expertise Best Practice Experten Partner Blog Blog Kategorien Release Notes Appium Automatisierung Webportal Preise & Bestellung Mobile Device Cloud Testen mit künstlicher Intelligenz Quality & Intelligent Automation Hilfe Support Kontakt Häufig gestellte Fragen Erste Schritte Registrierung und Bestellung Nutzung der Mobile Device Cloud

Mobile App Test & Automatisierung mit React Native

Die Verwendung der folgenden Testframeworks und Testtools wurde evaluiert und geprüft. Weitere gängige Frameworks und Testtools sind in Evaluierung. Bei Fragen zur Verwendung Ihrer favorisierten Testtools kommen Sie gerne auf uns zu.

Appium Appium + Jetpack Compose XCUITest Espresso TestCafe Tosca Selenium Testerra Flutter React Native Playwright Robot Framework Jenkins TeamCity

Testen Sie Ihre React Native-Apps mit Appium auf den Geräten der Mobile Device Cloud

React Native ist ein leistungsstarkes Framework, das die Entwicklung plattformübergreifender mobiler Apps ermöglicht. Mit einer einzigen Codebasis können Entwickler Anwendungen für iOS und Android erstellen, was Zeit und Ressourcen spart.

Die Mobile Device Cloud bietet eine ideale Umgebung, um React Native-Apps auf echten Geräten zu testen und ihre Qualität sicherzustellen.

import io.appium.java_client.android.AndroidDriver;
import io.appium.java_client.remote.AndroidMobileCapabilityType;
import io.appium.java_client.remote.MobileCapabilityType;
import org.openqa.selenium.WebElement;
import org.testng.annotations.*;
import org.testng.Assert;
import org.openqa.selenium.By;
import org.openqa.selenium.remote.DesiredCapabilities;

import java.net.URL;

public class AppiumTest {

    private final String CLOUD_ACCESS_KEY = "YOUR_ACCESS_KEY_TO_THE_MOBILE_DEVICE_CLOUD";
    private final String APP_PACKAGE = "com.reactnative_helloworld_native"; // Exchange this with cloud id of your app
    private final String APP_ACTIVITY = ".MainActivity"; // Exchange this with main activity of your app
    private AndroidDriver driver;
    DesiredCapabilities dc = new DesiredCapabilities();

    @BeforeTest
    public void setUp() throws Exception {
        dc.setCapability("testName", "Quick Start Android React Native Demo");
        dc.setCapability("automationName", "UiAutomator2");
        dc.setCapability("accessKey", CLOUD_ACCESS_KEY);
        dc.setCapability("deviceQuery", "@os='android' and @category='PHONE'");
        dc.setCapability(MobileCapabilityType.APP, "cloud:" + APP_PACKAGE + "/" + APP_ACTIVITY);
        dc.setCapability(AndroidMobileCapabilityType.APP_PACKAGE, APP_PACKAGE);
        dc.setCapability(AndroidMobileCapabilityType.APP_ACTIVITY, APP_ACTIVITY);
        dc.setCapability("appiumVersion", "2.2.2");
        driver = new AndroidDriver(new URL("https://mobiledevicecloud.t-systems-mms.eu/wd/hub"), dc);
    }

    @Test
    public void testCounterAndReset() {
        WebElement counterElement = driver.findElement(By.xpath("//android.widget.TextView[@text='0']"));
        Assert.assertEquals(counterElement.getText(), "0", "Initial counter value should be 0");

        WebElement incrementButton = driver.findElement(By.xpath("//android.widget.TextView[@text='+']"));
        incrementButton.click();

        counterElement = driver.findElement(By.xpath("//android.widget.TextView[@text='1']"));
        Assert.assertEquals(counterElement.getText(), "1", "Counter should be incremented to 1");

        WebElement resetButton = driver.findElement(By.xpath("//android.widget.TextView[@text='↺']"));
        resetButton.click();

        counterElement = driver.findElement(By.xpath("//android.widget.TextView[@text='0']"));
        Assert.assertEquals(counterElement.getText(), "0", "Counter should be reset to 0");
        Assert.assertFalse(resetButton.isEnabled(), "Reset button should be disabled when counter is 0");
    }

    @AfterTest
    public void tearDown() {
        if (driver != null) {
            System.out.println("Report URL: "+ driver.getCapabilities().getCapability("reportUrl"));
            driver.quit();
        }
    }
}

Erste Schritte mit React Native

1.

Binden Sie Appium in Ihr React Native-Projekt ein

2.

Bereiten Sie Ihre React Native-App für den Test vor

3.

Laden Sie Ihre React Native-App in Cloud hoch

4.

Steuern und Testen Sie Ihre React Native-App mit Appium

1. Binden Sie Appium in Ihr React Native-Projekt ein

Folgen Sie dazu den ersten beiden Schritten in unserer Appium-Dokumentation.

Beachten Sie bitte auch die Konfiguration zur Verbindung zu unserer Mobile Device Cloud API. Eine beispielhafte Konfiguration ist im oberen Coebeispiel unter der @BeforeTest-Annotation zu finden.

2. Bereiten Sie Ihre React Native-App für den Test vor

Schreiben Sie nun Ihre React Native App, wenn nicht bereits getan, und bauen Sie dann die Debug-APK bzw. -IPA.

Android:

Führen Sie folgenden Schritt aus, damit Ihre App im Debug-Modus im Projektverzeichnis (android/app/build/outputs/apk/debug/app-debug.apk) abgelegt wird:
npx react-native run-android --variant=debug

iOS:

Führen Sie zuerst folgenden Schritt aus, damit Ihre App im Debug-Modus auf einem Emulator oder einem verbundenen Gerät ausgeführt wird:
npx react-native run-ios --configuration Debug
Öffnen Sie nun den XCode-Workspace aus Ihrem Projektverzeichnis (ios/Projektname.xcworkspace) in XCode und stellen Sie sicher, dass die Build-Konfiguration auf Debug gesetzt ist (Product > Scheme > Edit Scheme, dann unter Build Configuration die Option Debug auswählen). Wählen Sie nun im oberen Bereich von XCode als Zielgerät Any iOS Device (arm64) und erstellen Sie über Product > Archive ein Archiv Ihrer App. Wählen Sie im sich öffnenden Fenster nun das erstellte Archiv aus und folgen Sie den Anweisungen unter Distribute App (mit der Option Development), um die IPA-Datei zu exportieren.

3. Laden Sie Ihre React Native-App in Cloud hoch

Laden Sie nun die aus dem vorrausgegangenen Schritt entstandene Anwendung (APK bzw. IPA) in die Mobile Device Cloud hoch. Genauere Informationen dazu finden Sie hier .

Geben Sie nun dem Appium-Treiber die Bundle-ID Ihrer App mit, um sie automatisch zu starten:

dc.setCapability(MobileCapabilityType.APP, "cloud:");

4. Steuern und Testen Sie Ihre React Native-App mit Appium

Verwenden Sie die Methoden des Appium-Treibers, um Ihre App zu automatisiert zu testen:

findElement(...)
sendKeys(...)
hideKeyboard()
rotate(...)
...

Orientieren Sie sich am Beispiel oben.