Web3: Wie testet man Frontend-Apps?

Web3 steht für ein neues Web-Architekturkonzept und ein neues Geschäftsmodell für Webanwendungen. Die Dezentralisierung macht das Web freier und unabhängiger und schafft die Voraussetzungen für mehr Sicherheit. Damit wird das Testen bei der Entwicklung von Web3-Apps noch wichtiger.

Denn das Web 3.0 kommt mit ganz neuen Tools und Methoden, aber auch mit neuen Problemen daher, die wir so aus dem Web 2.0 noch nicht kannten. Welche sind das?

Auch wenn sich das Testen innerhalb des Entwicklungszyklus nach links verschiebt, brauchen wir zumindest einen Teil der entwickelten App zum Testen. Wie eine Web3 App entwickelt wird, haben wir in diesem Artikel erklärt. Wenn du ein absoluter Web3-Einsteiger bist, empfehle ich dir, mit dem technologischen Stack zu beginnen, der von Nader Dabit perfekt beschrieben wurde.

Alle Tools, die ich verwende, funktionieren mit der Ethereum-Blockchain, das würde ich gern vorausschicken. Die vorgestellten Prinzipien gelten jedoch auch für Solana, Tezos und andere. In diesem Artikel konzentriere ich mich auf das Testen von Web3 Apps, die Verbindung zur Wallet, Interaktionen mit Smart Contracts, externen Datenbanken und Dateisystemen - werde aber nicht auf das Testen von Smart Contracts eingehen.

Was ist beim Testen von Web3 anders?

Um es einfach zu machen, sage ich über Web 3.0, dass wir im Vergleich zu Web 2.0 den Facebook-Login gegen Metamask austauschen. Diejenigen von euch, die den Web3-Stack kennen, ahnen bereits, dass der größte Unterschied in der Dezentralisierung liegt. Das ist etwas, das per Definition eine Herausforderung für das Testen darstellt. Das Einrichten der Umgebung, der Testdaten oder der Accounts ist sehr viel schwieriger.

Das ist einer der Gründe, warum die Web3-Tools für das Testen anders sind. Die Grundlagen des Testens bleiben jedoch dieselben. Der Tester muss sicherstellen, dass die App dem Design entspricht (visuelles Testen), ob sie der Spezifikation entspricht (funktionales Testen), ob sie die Anforderungen an die Barrierefreiheit erfüllt ("Accessibility Testing") oder was auch immer im Rahmen der Teststrategie festgelegt wurde.

Arbeiten mit Testnetzen

Web3-Apps arbeiten in der Regel mit Smart Contracts, die auf der Blockchain laufen (in unserem Fall Ethereum Mainnet). Bei Web3-Tests wollen wir jedoch nicht mit echtem Ethereum arbeiten und relativ viel “Gas” für jede Testtransaktion zahlen.

Für diesen Zweck gibt es Testnets. Dabei handelt es sich im Grunde um eine Integrationsumgebung, in der Entwickler Smart Contracts bereitstellen können, die sie anschließend mit Web3 Apps verbinden.

Damit alles richtig funktioniert, musst du deine Krypto-Wallet auf das jeweilige Testnet umstellen. In den Metamask-Einstellungen erlaubst du die Anzeige von Testnets, und danach kannst du zu einem der voreingestellten Nets wechseln.

Die letzte Frage ist, wie man Ethereum testen kann. Hierfür gibt es Faucets, die es ermöglichen, Ethereum nach Belieben hinzuzufügen. Jedes Testnet hat seinen eigenen Faucet.

Eine andere Möglichkeit ist es, ein lokales Network zu erstellen und nicht von einem Testnet abhängig zu sein, was dir viel mehr Kontrolle über das gesamte Network gibt. Um ein Network zu erstellen, werden wir Ganache verwenden. Nach dem Start geht es direkt in das erstellte lokale Testnet, zusammen mit Accounts und 100 ETH für den Anfang.

Mit dem Tool Truffle können wir ganz einfach Smart Contracts auf unser lokales Network übertragen.

Testen von Web3

Jetzt sollten wir ein Testnet (oder ein lokales Network) eingerichtet und es mit einer Web3 App verbunden haben. Der Testprozess hängt von der App, den funktionalen Anforderungen und der Teststrategie ab. Wir sollten auf jeden Fall immer die Verbindung zur Krypto-Wallet testen. Wir müssen sowohl an einen positiven als auch an einen negativen Test denken: Was passiert nach einer erfolgreichen Bestätigung oder alternativ nach einer Ablehnung?

Danach ist es notwendig, die Interaktion mit dem Smart Contract zu testen. Es ist gut, nicht nur darüber nachzudenken, wie sich die App nach einer erfolgreichen Bestätigung der Transaktion verhält, sondern auch darüber, was passiert, wenn der User die Transaktion in der Wallet ablehnt. Oder wenn der User die Transaktion zulässt, aber nicht genug Ethereum hat.

Schließlich ist es sinnvoll zu überprüfen, wie die Web3 App auf Änderungen in der Blockchain reagiert (z.B. neue Transaktionen) oder wie sie sich verhält, wenn die Transaktion feststeckt (sie bleibt lange im Pending-Status). Wenn du eines der öffentlichen Testnets nutzt, kannst du den Status deiner Transaktion ganz einfach über EtherScan überprüfen.

Abschließend noch ein Blick auf externe Dienste und die Interaktion mit ihnen. Speichert deine Web3 App irgendwelche Daten von außerhalb der Chain (z.B. in IPFS oder arweave)? In diesem Fall ist es ratsam, zu überprüfen, ob die Daten erfolgreich gespeichert wurden, die Transaktion durchgeführt wurde und nicht zuletzt, ob die Daten korrekt sind.

Für den Fall, dass deine App Daten von Oracles (z.B. Chainlink oder Flux) erhält, ist es gut zu testen, wie die App auf einen Request-Fehler oder die Nichtverfügbarkeit des Oracles reagiert.

Können Web3-Tests automatisiert werden?

Der Klarheit halber muss ich erwähnen, dass wir immer noch über dApps sprechen und in erster Linie an E2E-Tests interessiert sind. Der aktuelle Industriestandard für automatisierte E2E-Web-Tests ist Cypress, das wir bei Ackee seit 2018 einsetzen.

Das Haupthindernis für Cypress war bis vor kurzem die Interaktion mit der Krypto-Wallet. Die meisten Wallets (einschließlich Metamask) fungieren als Add-on für den Browser. Diese sind in Cypress nur sehr schwer zu bedienen. Glücklicherweise gibt es seit 2020 Synpress, ein Cypress-Wrapper, der Puppeteer für die direkte Interaktion mit Metamask Wallet verwendet. Das ermöglicht die unmittelbare Kommunikation mit der Wallet, die Autorisierung des Zugriffs oder der Transaktionen.

Der direkte Konkurrent von Cypress namens Playwright hat direkte Unterstützung für Chrome add-ons. Falls du praktische Erfahrungen mit Playwright und Metamask hast, lass es mich bitte wissen. 🙂

Fazit

Das Testen von Web3-Apps bringt zwei große Herausforderungen mit sich. Die erste ist der neue technologische Stack und die Dezentralisierung, die die Art und Weise verändert, wie User Apps nutzen und wie Tester sie testen müssen. Die zweite ist das Portfolio an Tools, das noch relativ begrenzt ist. Web3 Apps stehen erst am Anfang ihrer Ära. Und das Testen hinkt, ähnlich wie beim Web 2.0, der Entwicklung etwas hinterher. Allerdings tauchen buchstäblich jeden Monat neue Tools und Methoden auf, die Teil der Qualitätssicherung eines jeden Web3-Projekts sein sollten.