Effizientes Testen: Schnellere Käufe dank eigener Browser-Extension

Als zentrale Quality Assurance (zQA) ist eine unserer Aufgaben, Services bereit zu stellen, die unsere Kolleg*innen beim Testing unterstützen. Wir wollen die Schwelle zum Testing so niedrig wie möglich machen und den Aufwand reduzieren. Eine Möglichkeit hierfür haben wir mit der Entwicklung einer Browser-Extension geschaffen. Im Folgenden skizziere ich den Weg von der Idee bis zur Umsetzung.

Die Ausgangslage

Die zQA bei Thalia führt täglich automatisierte Testfälle aus, die über die Teamgrenzen hinweg den Thalia-Shop in der Testumgebung auf Herz und Nieren prüfen. Die bei diesen Tests erstellten Neukunden und die verwendeten Testdaten, wie Kreditkarten, Adressen oder Geschenkkarten werden (auch von der zQA) per REST und GUI in einem Testdatentool zur Verfügung gestellt, was sowohl automatisiertes als auch manuelles Testen sehr vereinfacht.

Aber wenn man dann im Review sieht, wie Kolleg*innen beim Durchlauf einer Demonstration sich Daten aus dem Testdatentool kopieren und einfügen, denkt man irgendwann: Geht das nicht noch schneller und einfacher?

Das Testdatentool als Webapplikation:

Die Idee

So kamen wir in der zQA auf die Idee zur Entwicklung einer Browser-Extension. Sie kann an vielen Stellen Daten in unserem Test-Shop eintragen, von Login-Daten über Adressen bis hin zu Test-Kreditkarten, Bankdaten und Geschenkkarten. Das erspart den Kolleg*innen beim manuellen Testen viel Zeit, die vorher mit dem Raussuchen, Kopieren und Eintragen der Daten verwendet wurde – bei jedem Testvorgang vielleicht nur wenige Sekunden, aber wenn viel getestet wird (und die Schwelle fürs Testen niedriger wird), dann ist das eine große Erleichterung und ein Beitrag zu höherer Qualität.

Beispiel 1 – Eingabe von Geschenkkartendaten im Checkout:

Beispiel 2 – Eingabe einer neuen Lieferanschrift:

Nutzung und Ausblick

Aus Gründen müssen wir leider eine andere Version für Firefox als für Chrome zur Verfügung stellen. Die Firefox-Version hat den Vorteil, dass man einfach selber eine Extension hosten kann, wohingegen man für die Bereitstellung einer Chrome-Extension doch die 5$ 🙃 für die Registrierung im Chrome-Webstore bezahlen muss – dafür hat man dann Analytics-Zahlen – ganze 41 Kolleg*innen haben sich die Chrome-Version installiert. Damit das auch wirklich nur Kolleg*innen machen, haben wir es allerdings auch nicht einfach gemacht – die Version im Chrome-Webstore ist eine permanente Beta-Version, die nur bestimmte Leute testen dürfen.

Es gibt noch Ideen, das Tool zu erweitern, wie z.B. eine bessere Tastaturkürzel-Verwaltung oder Filtern von Testartikeln nach bestimmten Kriterien. Aber erstmal tut es seine Aufgabe sehr gut und erspart vielen Kolleg*innen Zeit beim Testen – und weniger Zeit mit Testen verbringen ist ja der Wunsch aller Teammitglieder.

Technische Details

Eine Browser-Extension besteht aus mehreren Teilen, die nicht direkt, sondern über den Browser per Nachrichten kommunizieren. Alle Details zu einer Browser-Extension werden in einer Manifest-Datei festgelegt, damit der Browser auch weiß, was zu tun ist.

Dann gibt es das Background-Skript, was im Hintergrund z.B. auf Menü-Klicks oder Tastaturkürzel hört und sich beim Browser als Listener für diese Events registriert. Das Background-Skript kann auch Nachrichten empfangen und an Tabs weitersenden.

Oben neben dem Suchfeld gibt es für viele Extensions noch die Browser Action, die einfach nur eine HTML-Seite ist, die beim Druck auf den Knopf der Browser-Extension erscheint und Aktionen auslösen kann – in den meisten Fällen sind dieses Aktionen das Versenden einer Nachricht an andere Browser-Extension-Elemente.

Schließlich gibt es Content Scripts. Das sind Javascript-Dateien, die man für bestimmte URL Patterns registrieren kann, und die diese manipulieren können – direkt oder beim Empfangen einer Nachricht. Manchen geneigten Leser*innen fällt an dieser Stelle vielleicht auf, dass Browser-Extensions auch ein gewisses Sicherheits-Risiko darstellen können, weswegen man die Meldungen beim Installieren genau durchlesen sollte 😉.

Hier ein Beispiel für eine relativ einfache Interaktion: die Nutzer*innen drücken eine Tastenkombination, um z.B. eine Artikeldetailseite für ein zufälliges E-Book aufzurufen. Da sich die Browser-Extension für die Tastenkombination “Alt+Shift+E“ registriert hat, kommt diese beim Background-Skript an. Das fragt dann bei unserem Tool für Testartikel, dem Artikeldex, ein E-Book an. Wenn die Antwort mit dem Artikel zurückkommt, wird die URL für die Artikeldetailseite in der Testumgebung zusammengebaut und an den Browser eine Nachricht gesendet, dass doch bitte ein Tab mit dieser URL geöffnet werden soll.

Etwas komplizierter wird es, wenn die Nutzer*innen automatisch eine Adresse im Checkout eintragen möchten: sie drücken z. B. auf der Seite zur Änderung einer Lieferanschrift den Knopf zum Adresse eintragen. Die Browser Action fragt dann das Testdatentool nach einer Adresse passend zum Testmandanten an. Wenn diese zurückgegeben wird, wird an das Content Script, was auf alle Test-URLs lauscht, eine Nachricht geschickt, mit der Adresse und der Information “als Lieferanschrift ausfüllen” gesendet. Das Content Script sucht dann im HTML nach den passenden Feldern und ändert das HTML so, dass die Werte jetzt mit der neuen Adresse gefüllt sind.

Code-Beispiele und weitere komplexe Details kann man in den diversen Dokumentationen für Browser-Extension-Entwicklung finden – die von Mozilla ist techniknah, unaufgeregt und beschreibt sowohl Chrome- als auch Firefox-Besonderheiten. Das Testen von Extensions ist manchmal etwas aufwändig, vor allem, wenn man unterschiedliche Browser bedient. Man muss bei Browser-Extensions aber wirklich nicht viel Code schreiben, um einen großen Nutzen zu haben – ich hoffe, ich konnte auch andere Entwickler*innen inspirieren: macht das Testen auch bei euch einfacher, mit einer totalen Nischen-Browser-Extension!