Come utilizzare Espresso UI Testing per React Native?

Question

Sto provando a fare alcuni test dell'interfaccia utente con Espresso sulla mia applicazione React Native Android per utilizzare Screengrab di Fastlane.

Ho seguito this tutorial per integrare React Native in un'app esistente per poter scrivere un test. Ma quando ho iniziato a scrivere il mio test dell'interfaccia utente non sono riuscito a trovare cosa scrivere e come scegliere come target un componente ed eseguire un clic su di esso, ad esempio.

Ho trovato this post in cui qualcuno fornisce un esempio su come scrivere Espresso Test per React Native ma non funziona per me ... Nessuno dei miei componenti ha impostato ID risorsa in modo da non sapere come eseguire qualche azione sulla mia applicazione.

Se qualcuno mi può aiutare a scrivere un test dell'interfaccia utente con Espresso su un'app React Native o darmi un'altra soluzione per prendere screenshot automatizzato della mia applicazione Android che sarà fantastico.

Se hai qualche domanda fammelo sapere.

Answer 1

Espresso

Attualmente non v'è alcun modo per impostare risorsa-id con reagiscono-native, così, di fare azioni complesse è necessario scrivere del codice (come aspettare per gli elementi), l'altro sembra funzionare abbastanza bene via pulsante Android studio 'record espresso test'.

1. uso prop accessibilityLabel come id per gli elementi (ad es. "ElementId")
2. uso onView(allOf(withContentDescription("elementId"), isDisplayed())) per ottenere elemento
3. peform azioni su questo elemento (come element.perform(click()))

Qui si possono trovare prova completa https://gist.github.com/cybergrind/0a2ad855352a5cd47cb5fb6a486c5eaa

Appium

.210

Se si desidera solo per eseguire azioni e catturare screenshot, è possibile farlo con appium:

1. uso prop accessibilityLabel come id per gli elementi
2. in uso conducente web waitForElementByAccessibilityId
3. catturare screenshot con saveScreenshot (' out.png ') -> questo creerà 'out.png file nella directory in cui si è a corto test

in appium finalmente si avrà qualcosa di simile (js esempio)':

driver.waitForElementByAccessibilityId('searchInputAcc', 5000) 
     .type('bold\n') 
     .sleep(5000) 
     .saveScreenshot('out.png') 

iOS vs Android accessibilityLabels

sembra che per Android si è liberi di utilizzare accessibiltyLabel su qualsiasi elemento (come testo, Vista e così via), ma iOS non si impostare l'accessibilità su tutti gli elementi come Adnroid.

Se si imposta l'etichetta su Text non sarà uguale l'etichetta

<Text accessibilityLabel="my_text">content</Text> 

vi darà etichetta uguale content su iOS, in modo sostanzialmente si può solo impostare accessible attributo sui nodi di testo per questa piattaforma

<Text accessible>content</Text> 

Stessa cosa per View - iOS ignorerà le etichette.

Finora, non molti elementi su iOS funzioneranno con le etichette di accessibilità personalizzate.

Di seguito è riportato un elenco di elementi che è possibile utilizzare per testare domanda di multipiattaforma test reagire nativo

È possibile utilizzare:

• TouchableHighlight - funzionerà stesso su iOS e Android, si può solo set accessibilityLabel
• Text - accessibilityLabel dovrebbe essere lo stesso di prova interna + è necessario impostare l'attributo accessibili

non Lavoreranno (per entrambe le piattaforme del tutto):

• View

P.S. non abbiamo ancora testato tutti gli elementi possibili, in modo da aggiungere i risultati di altri elementi o attendere i nostri risultati

debug

È possibile ottenere fonte di elemento radice, stampare e leggere in formato XML per scopi di debug (per webdriver.io: http://webdriver.io/api/property/getSource.html)

Answer 2

Ho un PR contro react-native per aggiungere il supporto adeguato per resource-id. Check it out e up-voto per favore: https://github.com/facebook/react-native/pull/9942

Una volta che è fusa in testID aggiungerà resource-id fintanto che l'Es è definito in res/values/ids.xml.

Answer 3

Attualmente se si imposta testID nel proprio livello di reazione che verrà tradotto in un tag in Android.

Poi, con Espresso è possibile utilizzare la condizione ViewMatcher withTagValue link

Poi tutto quello che dovete fare per trovare una vista è

onView(withTagValue(is((Object) tagValue))).perform(click());