React Native Academy · leksjon

Installere Maestro og kjøre den første flyten

Installer Maestro CLI, skriv en YAML-flytfil som starter appen og trykker på en knapp, kjør den mot en simulator som er i gang, og les testrapporten.

Leksjon 1 av 413 trinn

Installere Maestro og kjøre den første flyten er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva er Maestro?

Maestro er et rammeverk for testing av mobile brukergrensesnitt med åpen kildekode, utviklet av mobile.dev. Det styrer ekte iOS-simulatorer og Android-emulatorer ved å simulere faktiske brukerbevegelser – trykk, sveiping og skriving – i det native brukergrensesnittet. Fordi det tester den faktiske appbinærfilen, avdekker det feil som enhets- og komponenttester ikke fanger opp, for eksempel feil kobling av navigasjon eller plattformspesifikke problemer med visningen.

Maestro-tester skrives i enkle YAML-filer, noe som gjør dem tilgjengelige for utviklere som ikke er eksperter på testrammeverk. Hver YAML-fil beskriver en flyt: en sekvens med kommandoer som Maestro CLI kjører mot en app som er startet.

Installere Maestro CLI

Installer Maestro via et shell-skript på macOS og Linux. Det laster ned CLI-binærfilen og legger den til i PATH. På Windows kjører Maestro i WSL2 med en Android-emulator. Bekreft installasjonen ved å kjøre maestro --version.

Maestro krever Java 11 eller nyere på macOS (for den underliggende testrunneren). Hvis De ikke har Java, foreslår Maestro-installasjonsprogrammet å installere det via Homebrew. Testing av iOS krever Xcode og Simulator-appen – standardkrav for all iOS-utvikling.

# 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

Skrive Deres første flow-fil

En Maestro-flow er en YAML-fil. appId på øverste nivå angir hvilken app som skal testes – bruk bundle-identifikatoren for iOS (for eksempel com.example.myapp) eller pakkenavnet for Android. Skilletegnet --- begynner kommandolisten.

Start med kommandoen launchApp for å åpne appen på nytt. Legg deretter til påstander og handlinger. Den enkleste første flowen åpner bare appen og bekrefter at velkomstskjermen vises.

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

Kjøre en flow

Kjør en Maestro-flow med maestro test path/to/flow.yaml. Sørg for at en simulator eller emulator kjører, og at appen er installert på den, før De kjører kommandoen. Maestro kobler seg automatisk til simulatoren som kjører – det er ikke nødvendig å velge enhet når det bare finnes én.

Maestro skriver ut hver kommando etter hvert som den kjøres. Ved suksess vises et grønt hakemerke for hvert trinn. Ved feil vises kommandoen som mislyktes, et skjermbilde av brukergrensesnittet da feilen oppsto, og en feilmelding. Skjermbildet er svært nyttig når De skal feilsøke hvorfor en påstand mislyktes.

# 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/

Kommandoen tapOn

Kommandoen tapOn simulerer et fingertrykk. De kan trykke basert på tekst (den synlige etiketten), id (elementets testID) eller et prosentbasert punkt på skjermen. Det er mest lesbart og robust mot layoutendringer å trykke basert på tekst.

Hvis flere elementer har samme tekst, kan De legge til en index for å angi hvilket element som skal brukes (indeksert fra 0). Bruk optional: true for å gjøre trykket betinget – det hoppes over uten feil hvis elementet ikke finnes. Dette er nyttig når valgfrie tillatelsesdialoger skal lukkes.

# 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

Kommandoen inputText

Bruk inputText til å skrive tekst i inndatafeltet som har fokus. Trykk først på TextInput for å gi det fokus, og bruk deretter inputText til å skrive. Maestro skriver inn hele strengen på én gang i stedet for tegn for tegn.

For felt der eksisterende tekst må slettes først, kan De bruke clearText før inputText. Bruk hideKeyboard etter skrivingen for å skjule skjermtastaturet, som kan dekke andre elementer De må samhandle 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'

Vise testrapporten

Maestro genererer testresultater i flere formater: ren tekst i terminalen, JUnit XML (for CI-systemer som GitHub Actions) eller en interaktiv HTML-rapport. HTML-rapporten inneholder skjermbilder for hvert trinn, slik at det er enkelt å se gjennom hva som skjedde på hvert punkt i flowen.

Når en test mislykkes, lagrer Maestro et skjermbilde av skjermen i det øyeblikket feilen oppsto. Se etter skjermbildet av feilen i resultatet for å forstå hvorfor en påstand mislyktes – ofte viser skjermen en lastespinner i stedet for det forventede innholdet, noe som avslører et 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

Forstå rekkefølgen flowen kjøres i

Kommandoene i en Maestro-flow kjøres sekvensielt. Maestro venter automatisk på at hver kommando skal fullføres før den går videre til neste. Trykk venter på at elementet skal være synlig og stabilt før det samhandles med det, og påstander prøves på nytt til elementet vises (med en konfigurerbar tidsavbruddsgrense).

Standardtidsavbruddet for assertVisible er 5 sekunder. Hvis appen bruker lengre tid på å laste inn en skjerm (for eksempel fordi den henter data fra et tregt API), kan De øke tidsavbruddet med alternativet timeout eller legge til kommandoen 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'

Starte appen på nytt med clearState

Som standard henter launchApp appen frem i forgrunnen hvis den allerede kjører (varm start). For tester som må starte med en ren tilstand – ingen innlogget bruker og tom databuffer – kan De bruke clearState: true til å slette alle appdata før appen startes.

Dette tilsvarer å avinstallere og installere appen på nytt. Bruk dette i de viktigste testflowene for å sikre at de starter fra et forutsigbart utgangspunkt og ikke avhenger av data som tidligere flower har etterlatt.

# 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'

Organisere flower med subflower

For gjentatte trinn, som å logge inn før hver test, kan De trekke dem ut i en subflow-YAML-fil og referere til den med runFlow. Da kan hver testflow konsentreres om sitt spesifikke scenario, mens innloggingen blir et gjenbrukbart trinn på én linje.

Subflower fungerer som funksjonskall i kode – de kjøres inne i den overordnede flowen. De kan sende parametere til subflower ved hjelp av delen env, slik at de kan brukes på nytt med ulike data (ulike brukere og inndataverdier).

# 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 for visuelt opptak

Maestro Studio er et interaktivt, nettbasert brukergrensesnitt som strømmer simulatorens skjerm og lar Dem ta opp flower ved å klikke på elementer. Kjør maestro studio, så åpnes en nettleser der De kan klikke for å generere YAML-kommandoer automatisk.

Dette er den raskeste måten å opprette Deres første flower på – ta opp happy path interaktivt, og gå deretter gjennom og rediger den genererte YAML-en for å legge til påstander og håndtere spesialtilfeller. Studio viser også elementtreet for hver skjerm, slik at det blir enklere å finne den beste testID-en eller teksten å målrette.

# 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

Hurtigsjekk

Test forståelsen Deres av konsepter innen React Native Mobile Development fra denne leksjonen.

Oppsummering av leksjonen

I denne leksjonen har De lært: hvordan De installerer Maestro og skriver en YAML-flow som starter appen og kontrollerer synlig innhold, hvordan De bruker tapOn, inputText og assertVisible til å styre brukerinteraksjoner i flowene, og hvordan De bruker subflower til å dele gjentatte trinn, som innlogging, mellom flere testflower. Neste trinn er å skrive mer avanserte Maestro-påstander og håndtere dynamiske tilstander i brukergrensesnittet.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
30
Leksjoner
120

Ofte stilte spørsmål

Er leksjonen «Installere Maestro og kjøre den første flyten» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Installere Maestro og kjøre den første flyten», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Installere Maestro og kjøre den første flyten»?

Installer Maestro CLI, skriv en YAML-flytfil som starter appen og trykker på en knapp, kjør den mot en simulator som er i gang, og les testrapporten. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Native Academy?

Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Installere Maestro og kjøre den første flyten»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?

Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Installere Maestro og kjøre den første flyten
  2. Påstander og venting på elementer
  3. Teste brukerreiser over flere skjermer
  4. Maestro i CI med GitHub Actions
← Tilbake til React Native Academy