Jak przetestować swoje React-Native WebViews za pomocą Detox?

Możesz wreszcie pisać testy end-to-end dla swoich WebViews za pomocą Detox!

… cóż, w każdym razie na Androidzie.

W tej chwili iOS nie jest obsługiwany. Jednak prawdopodobnie zmieni się to w przyszłości. Co więcej, chociaż istnieje funkcjonalność testowania na Androidzie, dokumentacja Detox nie została oficjalnie zaktualizowana, aby uwzględnić testowanie widoku internetowego. Sugeruje to, że prace mogą być w toku i dość cicho .

Niezależnie od tego możliwość testowania widoków internetowych na Androidzie pozostaje ogromnym skokiem dla programistów!

Jak dodać WebView do swojej aplikacji

Aby dołączyć WebView, dodaj react-native-webviewpakiet jako zależność do swojego package.json. Zaimportuj WebViewkomponent i przekaż mu źródło, jak pokazano poniżej.

Upewnij się, że testIDdołączyłeś a do swojego WebView, aby można go było znaleźć przez detoks podczas uruchamiania testu.

Jak napisać test do webview

W tym przykładzie używamy strony logowania na Twitterze. Chcielibyśmy umożliwić użytkownikowi:

• Wpisz nazwę użytkownika
• Wpisz hasło
• I kliknij przycisk Zaloguj się

Czasami załadowanie widoku internetowego zajmuje trochę czasu, więc warto dodać opóźnienie, aby upewnić się, że zakończy się ładowanie przed uruchomieniem testów.

Jak widać poniżej, możemy użyć obiektu sieciowego Detox do interakcji z widokiem i tworzenia asercji na zlokalizowanych elementach.

Lokalizowanie elementów DOM:

Strona internetowa Detox opiera się na Expresso-Web Androida i zapewnia listę funkcji do wybierania elementów DOM.

• id — znajduje element w drzewie DOM po jego id
• text —znajduje element w drzewie DOM według jego klasy CSS
• cssSelector —znajduje element w drzewie DOM pasujący do podanego selektora CSS
• name —znajduje element w drzewie DOM według jego atrybutu „name”
• xpath —znajduje element w drzewie DOM po jego XPath
• href—znajduje <a>element w drzewie DOM po tekście linku
• hrefContent—znajduje <a>element w drzewie DOM na podstawie jego częściowego tekstu linku
• tag —znajduje element w drzewie DOM według nazwy znacznika

Po zlokalizowaniu swojego elementu możesz zasymulować interakcję użytkownika z następującymi, oczywistymi metodami:

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

Detox web zawiera również zabawny zestaw dopasowań:

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

Możliwości są nieskończone!