React Native Academy · Lektion

Installera Maestro och kör ert första flöde

Installera Maestro CLI, skriv en YAML-flödesfil som startar appen och trycker på en knapp, kör den mot en simulator som körs och läs testrapporten.

Lektion 1 av 413 steg

Installera Maestro och kör ert första flöde är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.

Vad är Maestro?

Maestro är ett ramverk med öppen källkod för testning av mobila användargränssnitt från mobile.dev. Det styr riktiga iOS-simulatorer och Android-emulatorer genom att simulera faktiska användargester – tryckningar, svepningar och inmatning – i det inbyggda användargränssnittet. Eftersom det testar den riktiga appbinären fångar det fel som enhets- och komponenttester missar, till exempel felaktig navigeringskoppling eller plattformsspecifika renderingsproblem.

Maestro-tester skrivs i enkla YAML-filer, vilket gör dem tillgängliga för utvecklare som inte är experter på testramverk. Varje YAML-fil beskriver ett flöde: en sekvens av kommandon som Maestro CLI kör mot en app som körs.

Installera Maestro CLI

Installera Maestro via ett shellskript på macOS och Linux. Det laddar ner CLI-binärfilen och lägger till den i PATH. På Windows körs Maestro i WSL2 med en Android-emulator. Verifiera installationen genom att köra maestro --version.

Maestro kräver Java 11 eller senare på macOS (för den underliggande testköraren). Om Java inte är installerat föreslår Maestro att det installeras via Homebrew. För iOS-testning krävs Xcode och Simulator-appen – standardkrav för all iOS-utveckling.

# Install Maestro (macOS / Linux)
curl -Ls 'https://get.maestro.mobile.dev' | bash

# Reload your shell profile
source ~/.zshrc  # or ~/.bashrc

# Verify installation
maestro --version
# Expected: Maestro CLI v1.x.x

# Optional: install the Maestro Studio (visual test recorder)
maestro studio

Skriva er första flow-fil

En Maestro-flow är en YAML-fil. appId på toppnivå anger vilken app som ska testas – använd bundle identifier för iOS (till exempel com.example.myapp) eller paketnamnet för Android. Avgränsaren --- inleder kommandolistan.

Börja med kommandot launchApp för att öppna appen från början. Lägg sedan till assertioner och åtgärder. Den enklaste första flowen öppnar appen och verifierar att välkomstskärmen visas.

# maestro/flows/welcome.yaml
appId: com.example.myapp
---
- launchApp
- assertVisible:
    text: 'Welcome to MyApp'
- tapOn:
    text: 'Get Started'
- assertVisible:
    text: 'Sign In'

Köra en flow

Kör en Maestro-flow med maestro test path/to/flow.yaml. Se till att en simulator eller emulator körs och att appen är installerad på den innan kommandot körs. Maestro ansluter automatiskt till den simulator som körs – ingen enhetsselektion behövs när det bara finns en.

Maestro skriver ut varje kommando medan det körs. Vid lyckad körning visas en grön bock för varje steg. Vid fel visas kommandot som misslyckades, en skärmbild av gränssnittet när felet inträffade och ett felmeddelande. Skärmbilden är ovärderlig när ni felsöker varför en assertion misslyckades.

# Run a single flow file
maestro test maestro/flows/welcome.yaml

# Run all flows in a directory
maestro test maestro/flows/

# Run with verbose output
maestro test --format junit maestro/flows/login.yaml

# Generate an HTML test report
maestro test --format html --output test-results.html maestro/flows/

Kommandot tapOn

Kommandot tapOn simulerar ett tryck med fingret. Ni kan trycka utifrån text (den synliga etiketten), id (elementets testID) eller en procentbaserad punkt på skärmen. Att trycka utifrån text är mest lättläst och står bäst emot layoutändringar.

Om flera element har samma text kan ni lägga till ett index för att ange vilket element som avses (index börjar på 0). Använd optional: true för att göra trycket villkorligt – det hoppas över utan att körningen misslyckas om elementet inte finns. Det är användbart när valfria behörighetsdialoger ska stängas.

# Tap by visible text
- tapOn:
    text: 'Next'

# Tap by testID
- tapOn:
    id: 'submit-button'

# Tap by position (50% from left, 90% from top)
- tapOn:
    point: '50%,90%'

# Tap second element with the same text
- tapOn:
    text: 'Delete'
    index: 1

# Optional tap (skips if not found)
- tapOn:
    text: 'Allow'
    optional: true

Kommandot inputText

Använd inputText för att skriva text i det inmatningsfält som för närvarande har fokus. Tryck först på TextInput för att ge det fokus och använd sedan inputText för att skriva. Maestro skriver in hela strängen på en gång i stället för tecken för tecken.

För fält där den befintliga texten först måste tas bort använder ni clearText före inputText. Använd hideKeyboard efter inmatningen för att dölja skärmtangentbordet, som annars kan täcka andra element som ni behöver interagera med.

# Type email address into the focused input
- tapOn:
    id: 'email-input'
- inputText: 'user@example.com'

# Clear and retype
- tapOn:
    id: 'search-input'
- clearText
- inputText: 'react native'

# Dismiss keyboard
- hideKeyboard

# Tap the search button after keyboard is hidden
- tapOn:
    text: 'Search'

Visa testrapporten

Maestro genererar testresultat i flera format: oformaterad text i terminalen, JUnit XML (för CI-system som GitHub Actions) eller en interaktiv HTML-rapport. HTML-rapporten innehåller skärmbilder för varje steg, vilket gör det enkelt att visuellt granska vad som hände vid varje punkt i flowen.

När ett test misslyckas sparar Maestro en skärmbild av skärmen i det ögonblick då felet inträffade. Leta efter skärmbilden vid felet i utdatat för att förstå varför en assertion misslyckades – ofta visar skärmen en laddningsindikator i stället för det förväntade innehållet, vilket avslöjar ett timingproblem.

# Run all tests and save a JUnit XML report
maestro test \
  --format junit \
  --output results/test-results.xml \
  maestro/flows/

# The XML report contains:
# - Test suite name
# - Each test case with pass/fail status
# - Failure messages with screenshot paths
# - Total duration

Förstå ordningen vid flow-körning

Kommandona i en Maestro-flow körs sekventiellt. Maestro väntar automatiskt på att varje kommando ska slutföras innan nästa körs. Tryck väntar på att elementet ska vara synligt och stabilt innan interaktionen utförs, och assertioner försöker igen tills elementet visas (med en konfigurerbar timeout).

Standard-timeouten för assertVisible är 5 sekunder. Om appen behöver längre tid för att läsa in en skärm, till exempel för att hämta data från ett långsamt API, kan ni öka timeout-värdet med alternativet timeout eller lägga till kommandot waitForAnimationToEnd.

# Increase timeout for a slow-loading screen
- assertVisible:
    text: 'Your Dashboard'
    timeout: 10000  # 10 seconds instead of default 5

# Wait for animations to finish before asserting
- waitForAnimationToEnd
- assertVisible:
    text: 'Profile Loaded'

# Scroll down before asserting an element below the fold
- scroll:
    direction: DOWN
- assertVisible:
    text: 'Footer'

Starta appen från början med clearState

Som standard tar launchApp appen till förgrunden om den redan körs (varmstart). För tester som måste börja med ett rent tillstånd – utan inloggad användare och med en tom databascache – använder ni clearState: true för att ta bort alla appdata innan appen startas.

Detta motsvarar att avinstallera och installera om appen. Använd det i era viktigaste testflows för att säkerställa att de börjar från en förutsägbar utgångspunkt och inte är beroende av data som tidigare flows har lämnat efter sig.

# maestro/flows/fresh-login.yaml
appId: com.example.myapp
---
# Clear ALL app data (like a fresh install)
- launchApp:
    clearState: true

- assertVisible:
    text: 'Welcome to MyApp'  # Onboarding screen appears

- tapOn:
    text: 'Sign In'

- tapOn:
    id: 'email-input'
- inputText: 'test@example.com'

- tapOn:
    id: 'password-input'
- inputText: 'testpassword'

- tapOn:
    text: 'Sign In'

- assertVisible:
    text: 'Home'

Organisera flows med subflows

För repetitiva steg, som att logga in före varje test, kan ni flytta ut stegen till en separat subflow-YAML-fil och referera till den med runFlow. Då kan varje testflow fokusera på sitt specifika scenario, medan inloggningen blir ett återanvändbart steg på en rad.

Subflows fungerar som funktionsanrop i kod – de körs infogade i den överordnade flowen. Ni kan skicka parametrar till subflows med avsnittet env och på så sätt återanvända dem med olika data (olika användare och olika inmatningsvärden).

# maestro/flows/subflows/login.yaml
appId: com.example.myapp
---
- tapOn:
    id: 'email-input'
- inputText: '${EMAIL}'
- tapOn:
    id: 'password-input'
- inputText: '${PASSWORD}'
- tapOn:
    text: 'Sign In'
- assertVisible:
    text: 'Home'

# maestro/flows/profile.yaml
appId: com.example.myapp
env:
  EMAIL: user@test.com
  PASSWORD: testpass
---
- launchApp:
    clearState: true
- runFlow: subflows/login.yaml
- tapOn:
    text: 'Profile'
- assertVisible:
    text: 'Edit Profile'

Maestro Studio för visuell inspelning

Maestro Studio är ett interaktivt webbaserat gränssnitt som strömmar skärmen från er simulator och låter er spela in flows genom att klicka på element. Kör maestro studio så öppnas en webbläsare där ni kan klicka för att automatiskt generera YAML-kommandon.

Detta är det snabbaste sättet att skapa era första flows – spela in det lyckade standardförloppet interaktivt och granska och redigera sedan den genererade YAML-filen för att lägga till assertioner och hantera specialfall. Studio visar även elementträdet för varje skärm, vilket hjälper er att hitta bästa möjliga testID eller text att rikta in er på.

# Start Maestro Studio
maestro studio
# Opens browser at http://localhost:9999
# - Left panel: live simulator view
# - Click any element to generate a tapOn command
# - Type in input fields to generate inputText commands
# - Right panel: generated YAML that you can copy

Snabbtest

Testa era kunskaper om koncepten inom React Native Mobile Development från den här lektionen.

Sammanfattning av lektionen

I den här lektionen har ni lärt er hur ni installerar Maestro och skriver en YAML-flow-fil som startar appen och gör assertioner på synligt innehåll, hur ni använder tapOn, inputText och assertVisible för att styra användarinteraktioner i flows samt hur ni använder subflows för att dela repetitiva steg, som inloggning, mellan flera testflows. Nästa steg är att skriva mer avancerade Maestro-assertioner och hantera dynamiska UI-tillstånd.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
30
Lektioner
120

Vanliga frågor

Är lektionen ”Installera Maestro och kör ert första flöde” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Installera Maestro och kör ert första flöde”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Installera Maestro och kör ert första flöde”?

Installera Maestro CLI, skriv en YAML-flödesfil som startar appen och trycker på en knapp, kör den mot en simulator som körs och läs testrapporten. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Native Academy?

Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Installera Maestro och kör ert första flöde”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Native Academy-lektionen?

Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Installera Maestro och kör ert första flöde
  2. Påståenden och väntan på element
  3. Testa användarresor över flera skärmar
  4. Maestro i CI med GitHub Actions
← Tillbaka till React Native Academy