Wie Sie die Arbeit von Testern mit Browser-Add-ons verbessern können

Im Beruf des Testers ist es wichtig, die richtigen Werkzeuge zu wählen, um die Arbeit zu erleichtern und zu beschleunigen. Ein großer Teil dieser Werkzeuge besteht aus Browser-Add-ons, die ich kurz beschreiben möchte. Die von mir beschriebenen Werkzeuge sind großartig, um nicht nur die Fehlererkennung zu beschleunigen, sondern auch viel Testzeit zu sparen.

Pixel Perfect

Pixel Perfect kann sehr hilfreich sein, wenn es darum geht, die Arbeit von Frontend-Entwicklern zu überprüfen.
Dies ist ein einfaches Add-on, mit dem Sie ein Grafikdesign auf die Webseite legen können, die Sie prüfen. Nach dem Auftragen der Grafik auf die Webseite sehen Sie sofort, ob alles korrekt ist oder ob es Unstimmigkeiten gibt. Pixel Perfect ermöglicht es Ihnen, wie der Name schon sagt, Unstimmigkeiten von 1 px Größe zu finden. Die wichtigsten Optionen sind:
Es erlaubt das Speichern vieler Projekte, ohne ständig neue Grafiken hochladen zu müssen
Sie können die Transparenz der Entwurfsebene steuern
Die Grafikebene kann sogar um nur 1 px verschoben werden, was eine genauere Anpassung ermöglicht.
Die Grafikebene kann auch gesperrt werden, sodass es nicht möglich ist, sie zu verschieben, was Ihnen erlaubt, die Elemente zu überprüfen, die aktuell nicht auf dem Bildschirm sichtbar sind.

Selenium IDE

Im Falle eines Projekts, bei dem Sie erwarten, dass Sie eine gegebene Funktionalität mehrfach testen müssen, kommt Ihnen das Selerniu IDE zur Hilfe – es ist ein einfaches Automatisierungstool, mit dem Sie problemlos ein Szenario aufzeichnen können, bei dem Sie ein Kaufformular ausfüllen und nach Abschluss auf "speichern" klicken. Ein weiteres Beispiel wäre, eine gegebene Landingpage zu haben und zu überprüfen, ob der Text auf der Webseite oder die relevanten Elemente korrekt sind – Sie können geeignete Assertions verwenden, die dies verifizieren. 
Die Nutzung dieses Add-ons reduziert sich darauf, die Adresse der zu testenden Webseite einzugeben, die Aufnahme zu aktivieren und die entsprechenden Befehle aus dem Menü auszuwählen, das nach einem Klick auf die LMB erscheint; nach Abschluss der Aufnahme klicken Sie auf "abspielen", um Ihren automatischen Test abzuspielen. 
Wenn Sie die Webseite herunter scrollen oder auf einen beliebigen Button klicken, fügt Selenium automatisch einen mit Ihrer Bewegung korrespondierenden Befehl zum Szenario hinzu.
Der aufgezeichnete Test kann in einer Datei gespeichert werden, um später verwendet zu werden.

Display Ruler

Ein weiteres Add-on, Display Ruler, ist einfach zu bedienen für pixelbasierte Messzwecke.
Die Messung erfolgt durch Zeichnen eines Rechtecks auf dem Bildschirm, d.h. gleichzeitig erhält man den vertikalen und horizontalen Wert.
Besonders nützlich, um den Abstand zwischen den Elementen und die Größe der Elemente selbst zu überprüfen.
Eine breite Auswahl an manuellen Einstellungen zur Anpassung des Messfelds ermöglicht es Ihnen, die Messung zu verfeinern. Das Add-on ermöglicht auch die Verfolgung und Durchführung von automatischen Messungen des Elements, über dem Sie den Mauszeiger schweben lassen.

Edit Anything

Edit Anything ist wiederum sehr einfach, aber auch sehr hilfreich, wenn Sie überprüfen möchten, wie sich die Webseite verhält, wenn sich die Länge des angezeigten Textes erheblich ändert. Um es auszuführen, klicken Sie einfach auf das Add-on-Symbol, und Sie können jeden Text auf der Webseite bearbeiten. Die Bearbeitung erfolgt wie in einem Texteditor, d.h. Sie klicken auf den Text, um ihn zu bearbeiten.

Screenshoter

Beim Melden eines Fehlers müssen Sie in der Regel einen Screenshot anhängen. Screenshooter könnte hierbei hilfreich sein.
Es ist ein Tool, das es Ihnen ermöglicht, problemlos einen Screenshot der gesamten Webseite, eines Bildschirmabschnitts oder eines sichtbaren Teils der Webseite zu machen. Nach dem Erstellen eines Screenshots können Sie ein einfaches Panel für die schnelle Bearbeitung nutzen. Das Add-on bietet auch die Möglichkeit, den erstellten Screenshot in die Zwischenablage zu kopieren, aber es ist auch möglich, ihn als .pdf- oder .png-Datei zu speichern.

CssViever

Das nächste Add-on ist CssViever – ein sehr einfaches Add-on, das sofort nach dem Start ein Fenster anzeigt, in dem Sie alle CSS-Eigenschaften des Elements sehen können, über dem Sie den Mauszeiger halten. 

Bug Magnet

Das letzte Add-on ist Bug Magnet. Es wird verwendet, um Felder in Formularen zu testen. Es enthält korrekte und inkorrekte Testdaten für verschiedene Feldtypen. Mit diesem Add-on können Sie Felder wie E-Mail, Postleitzahl, Telefonnummer und viele mehr überprüfen. Sie können auch Schwachstellen überprüfen, z.B. hinsichtlich JS- oder SQL-Skripten. Zusätzlich zu den Beispieldaten können Sie Ihre eigenen Testdaten verwenden.

Abschließende Gedanken

Die oben aufgeführten Add-ons sind nur einige der Werkzeuge, die Drupal-Tester und Drupal-Entwickler bei Droptica verwenden. Vor nur einem Jahr sah diese Liste anders aus. Im Laufe der Zeit ändern sich die von uns verwendeten Werkzeuge, es kommen neue Erweiterungen hinzu, Testmethoden ändern sich usw.

In unserem Blog finden Sie viele weitere Tipps, wie Sie die Qualität von bereitgestellten Anwendungen verbessern können. Wir empfehlen Ihnen, mehr unserer Artikel zu browsersync und Visualception zu lesen. Wenn Sie keine weiteren Artikel verpassen möchten, abonnieren Sie den Newsletter und erhalten Sie Benachrichtigungen über neue Einträge direkt in Ihren Posteingang.