So testen Sie Ihre React-Native WebViews mit Detox

Endlich können Sie mit Detox End-to-End-Tests für Ihre WebViews schreiben!

… na ja, auf Android sowieso.

Im Moment wird iOS nicht unterstützt. Das dürfte sich jedoch in Zukunft ändern. Obwohl Funktionen zum Testen auf Android vorhanden sind, wurden die Detox-Dokumente nicht offiziell aktualisiert, um Webview-Tests einzuschließen. Dies deutet darauf hin, dass die Arbeit möglicherweise noch andauert und ziemlich still ist .

Unabhängig davon bleibt die Möglichkeit, Webviews auf Android zu testen, ein großer Sprung für Entwickler!

So fügen Sie Ihrer App eine WebView hinzu

Um eine WebView einzuschließen, fügen Sie das react-native-webviewPaket als Abhängigkeit zu Ihrer package.json. Importieren Sie die WebViewKomponente und übergeben Sie ihr eine Quelle wie unten gezeigt.

testIDStellen Sie sicher, dass Sie Ihrem WebView a hinzufügen, damit es von der Entgiftung gefunden werden kann, wenn Sie Ihren Test ausführen.

So schreiben Sie einen Test für die Webansicht

Für dieses Beispiel verwenden wir die Twitter-Login-Seite. Wir möchten dem Benutzer ermöglichen:

• Geben Sie einen Benutzernamen ein
• Geben Sie ein Passwort ein
• Und klicke auf den Login-Button

Manchmal dauert es eine Weile, bis eine Webansicht geladen wird. Daher kann es nützlich sein, eine Verzögerung hinzuzufügen, um sicherzustellen, dass der Ladevorgang abgeschlossen ist, bevor die Tests ausgeführt werden.

Wie unten zu sehen ist , können wir Detox die Nutzung Web - Objekt zu interagieren mit dem Blick und machen Aussagen über sich Elemente.

Auffinden von DOM-Elementen:

Das Web von Detox baut auf Androids Expresso-Web auf und bietet eine Liste von Funktionen zur Auswahl von DOM-Elementen.

• id — findet ein Element im DOM-Baum anhand seiner ID
• text —findet ein Element im DOM-Baum anhand seiner CSS-Klasse
• cssSelector —findet ein Element im DOM-Baum, das dem angegebenen CSS-Selektor entspricht
• name —findet ein Element im DOM-Baum anhand seines „Namens“-Attributs
• xpath —findet ein Element im DOM-Baum anhand seines XPath
• href—findet ein <a>Element im DOM-Baum anhand seines Linktextes
• hrefContent—findet ein <a>Element im DOM-Baum anhand seines partiellen Linktextes
• tag —findet ein Element im DOM-Baum anhand seines Tag-Namens

Nachdem Sie Ihr Element gefunden haben, können Sie die Benutzerinteraktion mit den folgenden selbsterklärenden Methoden simulieren:

• tap
• typeText
• getText
• clearText
• replaceText
• scrollToView
• getCurrentUrl
• getTitle
• runScript
• runScriptWithArgs

Detox Web enthält auch ein lustiges Set an Matchern:

• toExist()
• toNotExist()
• toHaveText()
• toNotHaveText()

Die Möglichkeiten sind endlos!