Menü

Responsive Webdesign-Tests: Das vollständige Handbuch für Anfänger

responsive web design testing

Versuchen Sie Unser Instrument, Um Probleme Zu Beseitigen

In der heutigen Zeit hat die Nutzung mobiler Geräte für den Zugang zum Internet zugenommen und ist sehr beliebt geworden. Fast jeder Internetnutzer wünscht sich eine mobile Version der Website.

Die meisten Websites sind jedoch nicht so optimiert, wie sie für mobile Geräte sein sollten. Die Tester sollten einen mobilen Reaktionstest für reaktionsschnelle Designs durchführen.

Herkömmliche Softwareprodukte rendern auf jedem Gerät im Wesentlichen gleich.

Microsoft Office, zum Beispiel sieht auf jedem PC gleich aus. Stellen Sie sich vor, Sie nehmen Microsoft Word genau so, wie es auf Ihrem Desktop ausgeführt wird, und zeigen es auf einem iPhone4 an. Entweder erscheinen die Menüs und Schaltflächen winzig, oder Sie sehen nur eine Ecke des Bildschirms und müssen umfangreiche Bildlaufleisten verwenden. In jedem Fall wird die Anwendung im Wesentlichen unbrauchbar.

Responsive-Web-Tests

Diese frustrierende Erfahrung ist genau das, was jeder Designer durchmacht, wenn er versucht, für das Web zu entwerfen.

Die Lösung für das Problem ist das so genannte 'Responsive Design', eine Technik, bei der Webseiten den Browser nach der Auflösung fragen und dann die Benutzererfahrung basierend auf der verfügbaren Bildschirmfläche elegant neu gestalten. Plötzlich ist es unmöglich, genau zu wissen, wie Ihre Software in der Produktion aussehen wird.

Dies bedeutet eine Teststrategie (und eine Automatisierungsstrategie), die in der Lage sein muss, zu experimentieren und zu lernen, was bei verschiedenen Auflösungen „richtig aussieht“ und was nicht.

Was du lernen wirst:

Anfängerleitfaden zum Testen reaktionsschneller Website-Designs

Wenn wir versuchen, eine Website zu öffnen, lautet der Server „ Unterdomänen ”Um festzustellen, von welcher Art von mobilem Gerät die Anfrage stammt. Auf dieser Grundlage wird der Benutzer zur entsprechenden mobilen Version weitergeleitet.

Um dies zu 100% effektiv zu machen, sollte jedes Gerät ein eigenes Design der speziell für ihn erstellten Website haben. foder zum Beispiel,ein anderes spezifisches Design für Blackberry, iPhone, iPad usw. unter Berücksichtigung ihrer Bildschirmgröße und Auflösung.

Eine unterschiedliche Webversion für jede Auflösung und jedes Gerät ist jedoch nicht praktikabel. Das Ethan Marcotte hat einen neuen Ansatz entwickelt - Responsive Web Design ( RWD ) - das löst dieses Problem.

Unsere Empfehlung

# 1) LT Browser

LT Browser hilft Benutzern beim Testen und Debuggen ihrer Website in über 45 Geräte-Ansichtsfenstern. Testen Sie Ihre Website an verschiedenen vorinstallierten Ansichtsports für Mobil- und Desktopgeräte mit LT Browser, einem entwicklerfreundlichen Browser für das Debuggen von Mobilansichten.

Geben Sie einfach Ihre Website-URL ein und wählen Sie das Gerät aus, auf dem Sie Ihre Website testen möchten. Sie können gleichzeitig zwei Geräte für den Vergleich der Seitenansichten auswählen.

LambdaTest

Nicht nur testen, sondern Benutzer können ihre Website auch unterwegs mithilfe der von LT Browser angebotenen integrierten DevTools debuggen.

LT Browser

Das Beste daran ist, dass Benutzer auf der Grundlage ihrer Anforderungen ein benutzerdefiniertes Gerät erstellen können, das LT Browser zu unserer ersten Wahl für reaktionsschnelle Tests macht.

=> Besuchen Sie den LT Browser

Was ist Responsive Web Design?

RWDZiele für Websites, um auf ihr Gerät und ihre Auflösung zu reagieren und in der Lage zu sein, korrekt zu rendern und anzupassen. Zum Beispiel, Wenn der Benutzer von Desktop / Laptop zu iPad wechselt, sollte die Website die Auflösungsänderungen wie Bildgröße usw. automatisch an die jeweiligen Gerätefähigkeiten anpassen.

Zusamenfassend,Sich anpassendes Designist 'Eine Website für jeden Bildschirm' .

Der folgende Bildschirm ist einBeispielvon RWD:

RWD-Beispiel

Hinweis: EchtzeitBeispieleiner reaktionsfähigen Website ist www.fpl.com

In RWD wurde eine Website entwickelt, um durch einfache Navigation, klare und einfache Benutzeroberfläche usw. eine überlegene Benutzererfahrung zu bieten. Reaktionsschnelle Websites lassen sich leicht anpassen und funktionieren in allen Auflösungen, Browsern, Bildschirmgrößen, Hardware und Betriebssystemen.

  • Responsive Websites sind in PHP, .NET, Java, CQ5 (Adobe Experience Manager - AEM) und vielen neuen Frameworks codiert, die für die Entwicklung von Responsive Designs sehr praktisch sind.
  • CSS- und HTML-Funktionen werden genutzt, um Bildschirmauflösungen und Bilder automatisch in der Größe anzupassen.
  • Das RW-Design verwendet Haltepunkte, um das Layout einer Site zu identifizieren. Jedes Design wird an verschiedenen Haltepunkten verwendet. Ein Entwurf wird auf einen Haltepunkt angewendet, während ein anderer Entwurf unterhalb des Haltepunkts verwendet wird. Diese Haltepunkte basieren im Allgemeinen auf der Breite der Browser.
  • Beim Entwerfen einer reaktionsfähigen Website berücksichtigen die Entwickler den Inhalt, das Design und die Leistung der Website auf allen Geräten Benutzerfreundlichkeit sicherstellen .

Das Diagramm ist ein genaues Gleichnis darüber, wie sich der Inhalt an die Umgebung und das Verhalten des Geräts anpasst.

Beispiel dafür, wie sich Inhalte an das Gerät anpassen

Hinweis :: Neben RWD gibt es einen anderen Ansatz Adaptives Webdesign ( AWD ) . Beim AWD-Ansatz gibt es für jedes Gerät ein spezifisches Design. AWD ist jedoch möglicherweise nicht immer geeignet. Außerdem kostet das Entwerfen von AWD-Sites im Vergleich zu RWD-Sites mehr Zeit und Geld.

Vorteile von Responsive Design:

# 1) Benutzererfahrung: Basierend auf dem Gerät, von dem aus wir auf eine RW zugreifen, werden die ungewöhnlichen Elemente ausgeblendet und die Benutzer können ihre Ziele schneller erreichen.Zum Beispiel:Wenn wir eine RW vom Handy aus öffnen, werden die unwichtigen Elemente ausgeblendet und das Laden von Webseiten beschleunigt.

#zwei) Teilen oder Verknüpfen: Für eine RW wird nur eine URL für verschiedene Geräte verwendet. Da nur eine einzige URL alle Daten und Informationen von verschiedenen Geräten sammelt, bietet dies eine bessere Benutzeroberfläche für Benutzer.

#3) Für eine RW ist nur eine geringe oder minimale Wartung erforderlich.

# 4) RW-Layouts sind flüssig.

Unterschiede zwischen Responsive Web Design und Adaptive Web Design:

RWD & AWD sind eng miteinander verwandt.

  • RWD reagiert schnell und positiv auf die Änderungen, während AWD leicht für einen neuen Zweck modifiziert werden kann.
  • RWD verfügt über mehrere Fluidgitter-Layouts und AWD über mehrere Layouts mit fester Breite.
  • Bilder in RWD werden als kontextsensitiv bezeichnet.

Hauptkomponenten des Responsive Website-Designs:

Responsive Web Design besteht aus drei Hauptkomponenten:

# 1) Flexible Layouts: Erstellen einer Website mit einem flexiblen Raster, dessen Größe dynamisch auf jede beliebige Breite geändert werden kann.

#zwei) Medien-Anfragen: Stellen Sie je nach Kontext verschiedene Stile für die Browser und Geräte bereit, z. B. die Ausrichtung des Geräts, des Ansichtsfensters usw.

#3)Flexibles Medium: Wenn sich die Größe der Ansichtsfenster ändert, müssen auch die Medien (Bilder, Videos usw.) ihre Größe oder Auflösung entsprechend den Anforderungen ändern.

Hinweis :: 'Ansichtsfenster' ist der Bereich des Browsers, in dem der tatsächliche Inhalt der Website angezeigt wird. Das Ansichtsfenster enthält keine Symbolleisten, Registerkarten usw.

Responsive Webdesign-Beispiele

Beispiel 1)

Öffnen Sie den Link www.fpl.com von verschiedenen Geräten und beachten Sie die URL. Die URL einer Responsive-Website bleibt für alle Geräte gleich.

zu) Ansicht der RW von einem Desktop oder Laptop (großer Bildschirm)

rwd-fpl-Laptop

b) Ansicht der RW von einem Tablet (mittlere Bildschirmgröße)

rwd-fpl-tablet

c) Ansicht der RW von einem Handy aus (kleine Bildschirmgröße)

rwd-fpl-mobile

Beispiel # 2)

Öffnen Sie die Site www.yepme.com von einem Laptop und auch von einem Handy und vergleichen Sie die URLs. Dies yepme.com Link ist kein reaktionsfähiger Link.

zu) Ansicht einer nicht reagierenden Website von einem Desktop oder Laptop

Nicht-RWD-Laptop

Dokumentvorlage für Teststrategie für agile Methodik

b) Ansicht einer nicht reagierenden Website von einem Handy aus

nicht rwd-mobil

So testen Sie eine Responsive Website

Der Responsive Design Test bedeutet Testen der Website oder URL von verschiedenen Geräten. In der Praxis ist es nicht möglich, die responsive Website vollständig zu testen, da dazu verschiedene Systeme für verschiedene Bildschirmgrößen eingerichtet werden müssen.

Ein möglicher Weg für den reaktionsschnellen Test besteht darin, die Größe des Browserfensters gemäß dem Testszenario zu ändern.

Einige Browser, wie z. B. IE und Safari, bieten Plug-Ins oder Browsererweiterungen, mit denen Sie den Ansichtsfensterbereich in Pixel anzeigen können. Dies erleichtert das Testen, indem die gewünschte Bildschirmgröße durch Ändern der Pixel ermittelt wird.

Andere Browser wie Chrome bieten Software oder Programme namens 'Emulator' Dies hilft dabei, die Bildschirmfunktionen und die Umgebung entsprechend dem gewünschten Gerät zu ändern, das zum Testen benötigt wird.

Hinweis: 'Emulator' ist eine im Browser bereitgestellte Software oder ein Programm, mit der sich das Hostsystem (aktueller Browser) wie das Gastsystem verhält (Browser des gewünschten Geräts, das auf die gewünschte Bildschirmgröße getestet werden soll).

Obwohl die Emulatoren Ihnen nicht die genaue Umgebung bieten können, die zum Testen benötigt wird, sind sie eine kostengünstige Lösung, um eine RW auf hohem Niveau zu testen.

Beispieltestszenarien für reaktionsschnelle Website-Tests:

Der Responsive Web Design Tester sollte sicherstellen, dass das Responsive Design alle unten genannten Anforderungen erfüllt Testszenarien um sicherzustellen, dass es sich um ein fehlerfreies, ansprechendes Design handelt.

# 1) Der Responsive-Website-Link oder die Responsive-URL sollten für alle Browser auf jedem Gerät unabhängig von der Bildschirmauflösung gleich sein.

Annehmen www.abc.com ist eine reaktionsschnelle Website. Wenn wir es auf einem Laptop und einem Mobiltelefon öffnen, sollte die URL auf beiden Geräten gleich sein. Die im mobilen Browser geöffnete Website sollte nicht mit beginnen www.m.abc.com oder www.mobile.abc.com

Beispiel: Öffnen Sie die Website www.kotak.com von einem Laptop und öffnen Sie das gleiche auch von Handy und beobachten Sie die URL in beiden Geräten. Die URL ist nicht für beide Geräte gleich.

Der folgende Schnappschuss zeigt, wie sich die URL für a ändert nicht reagierende Website auf verschiedenen Geräten wie Laptop und Handy.

nicht reagierende Website auf verschiedenen Geräten

Öffnen Sie die Website www.w3schools.com von einem Laptop und von einem Handy und überprüfen Sie die URLs. Es sollte für beide Geräte gleich sein.

Der folgende Schnappschuss zeigt, dass die URL für eine reaktionsfähige Website auf verschiedenen Geräten gleich bleibt:

Testszenario 2 für RWD

#zwei) Der Anzeigeort des Inhalts (Bilder, Unterlinks, Menüs usw.) einer reaktionsfähigen Website sollte sich entsprechend der Änderung der Bildschirmauflösung dynamisch ändern. Das heißt, wenn wir die Bildschirmauflösung von der Größe des Laptops auf ein Mobiltelefon ändern, sollte sich die Anzeige der Menüoptionen dynamisch ändern.

Beispiel: Öffnen Sie den Link www.fpl.com von einem Laptop und klicken Sie auf das Menü in der rechten oberen Ecke des Fensters. Menüoptionen werden wie folgt angezeigt:

Fragen und Antworten zum Interview mit Selenium Webdriver

Testen des RWD-Menüs 1

Öffnen www.fpl.com Klicken Sie auf dem Handy auf das Menü in der rechten oberen Ecke des Fensters. Die Menüoptionen sind wie folgt:

RWD-Menütest für Mobilgeräte

Hinweis: Dieses Szenario kann auch mit Browser-Emulatoren getestet werden (Ehemalige:Chrom).

Öffnen Sie die Website www.fpl.com durch einen Desktop und beobachten Sie, wie die Menüoptionen angezeigt werden. Siehe folgenden Schnappschuss:

Chrome-Emulator zum Testen des reaktionsschnellen Designs

Ändern Sie nun die Größe des Browserfensters auf die Größe des mobilen Bildschirms und überprüfen Sie die Anzeige der Menüoptionen. Siehe folgenden Schnappschuss:

Chrome-Emulator zum Testen der reaktionsschnellen Designgröße

#3) URLs einer reaktionsfähigen Website sollten auch auflösungsspezifisch sein.

Voraussetzung zum Testen dieses Szenarios: Bitten Sie den Entwickler, einen Unterlink in die Responsive-Test-Website einzufügen, auf der der Unterlink nicht reagiert.

Zum Beispielkann der Entwickler einen Link einfügen www.snapdeal.com auf unserer Test-Website.

Öffnen Sie nun die Website für reaktionsschnelle Tests von einem Mobiltelefon aus und klicken Sie auf den in der Voraussetzung genannten Unterlink. Dann sollte sich die URL des Unterlinks in ändern https://m.snapdeal.com .

# 4) Das gleiche Szenario kann auch von einem Laptop aus getestet werden. Öffnen Sie die RW von einem Desktop oder Laptop aus und klicken Sie auf den Unterlink (der in der Voraussetzung von Testszenario 3 erwähnt wird), der nicht reagiert. Die URL des Unterlinks sollte sich nicht ändern (da wir dieses Szenario vom Laptop aus testen, sollte die URL dieselbe bleiben).

# 5) Voraussetzung zum Testen dieses Szenarios: Bitten Sie den Entwickler, einen Unterlink einzufügen.zum Beispiel, www.paytm.com in die Teststelle. Auf dem mobilen Gerät, auf dem Sie dieses Szenario ausführen möchten, sollte die entsprechende Paytm-Anwendung auf dem Mobiltelefon installiert sein.

Öffnen Sie jetzt unsere Test-Responsive-Website von einem Handy aus und klicken Sie auf den Unterlink 'paytm'. Dann sollte die Paytm-Anwendung geöffnet werden, die auf dem Handy installiert ist. (Der Benutzer sollte nicht im Browser oder einem anderen Fenster zur Website weitergeleitet werden. Nur die App sollte geöffnet sein.)

# 6) Die Bilder auf der Responsive-Website sind auflösungsspezifisch. Dies bedeutet, dass sich die Auflösung des Bilds, das in den Code der reaktionsfähigen Website eingefügt wird, die auf mobile Kompatibilität ausgelegt ist, von der eines Desktops oder Tablets unterscheidet. Jede Bildschirmgröße sollte ein bestimmtes Bild im Design haben.

Voraussetzung zum Testen dieses Szenarios: Das Testen und Überprüfen der Auflösung der Bilder kann eine schwierige Aufgabe sein. Bitten Sie den Entwickler, drei verschiedene Bilder getrennt für Mobilgeräte, Tablets und Desktops in die responsive Website einzufügen.

Öffnen Sie die Test-Responsive-Design-Website von einem Desktop, Tablet und Handy aus. Die Bilder auf der reaktionsfähigen Webseite sollten für alle drei Geräte unterschiedlich sein.

(ODER)

Öffnen Sie die Test-RW von einem Desktop aus und überprüfen Sie das Bild auf der Webseite. Ändern Sie nun die Größe des Fensters auf das eines Tablets und überprüfen Sie das Bild. Dies sollte sich von dem für die Desktop-Bildschirmgröße angezeigten Bild unterscheiden. Jetzt können Sie die Größe des Fensters auf die Bildschirmgröße des Mobilgeräts ändern und das Bild überprüfen. Dieses Bild sollte sich auch von den beiden oben genannten Bildern unterscheiden.

Beispiel: Öffnen Sie die reaktionsfähige Site www.fpl.com von einem Desktop; Klicken Sie mit der rechten Maustaste auf das Bild auf der Homepage -> wählen Sie 'Inspizieren' aus dem Menü. Überprüfen Sie die Bildauflösung (überprüfen Sie die Bilddateinamenerweiterung .jpg) anhand des Codes. Siehe folgenden Screenshot:

Bildtest für reaktionsschnelle Webdesign-Laptops

Ändern Sie nun die Größe des gleichen Fensters auf die Bildschirmgröße eines Tablets und überprüfen Sie die Bildauflösung. (Die Bildnamenerweiterung lautet medium.jpg)

Bildtest für reaktionsschnelle Webdesign-Tablets

Ändern Sie abschließend die Fenstergröße auf die Größe eines mobilen Bildschirms und überprüfen Sie das Bild. (Die Bildnamenerweiterung ist small.jpg)

Bildtests für reaktionsschnelle Webs entwerfen mobil

# 7) Klicken Sie zufällig auf eine beliebige Stelle auf der Webseite und prüfen Sie, ob Daten oder Text, die nicht mit einem Hyperlink versehen sind, initiiert und auf eine andere Seite oder einen anderen Inhalt umgeleitet werden. Dadurch wird geprüft, ob ein Wort oder ein Text als Hyperlink in der Liste markiert ist Backend .

Hinweis :: In einigen Projekten sprechen die Anforderungen über die Pixelgröße und Auflösung des Bildschirms für bestimmte Geräte. (Zum Beispielsollte eine Tablet-Ansicht für ihre RW bei 15:15 Pixel und für ein Mobiltelefon bei 10:10 usw. liegen.)

Das Testen der dynamischen Änderungen, die für die RW-Anzeige auftreten sollten, wenn wir die Pixelgröße ändern, ist das Hauptszenario.

# 8) Öffnen Sie unsere Test-RW in einem Browser und zeigen Sie den Inhalt und die Anzeige der Hauptbilder an. Ändern Sie nun die Größe des Fensters bis zum Haltepunkt der Tablet-Größe und überprüfen Sie die Änderungen, die an der Bildauflösung und anderen Inhalten vorgenommen werden sollen. An Haltepunkten sollten die Änderungen dynamisch erfolgen (manchmal treten die Änderungen nicht an den Haltepunkten auf und können sich bei einer anderen Pixelgröße ändern, die ein Defekt ist.)

Tools zum Testen einer Responsive Website

Es gibt nur wenige Tools (Websites), mit denen Sie eine Vorschau der Webseiten unserer reaktionsfähigen Website anzeigen können.

Zum Beispiel,Wir können unsere reaktionsfähige Site mit verschiedenen vordefinierten Bildschirmauflösungen (Smartphones, Tablets usw.) testen und auch an jede gewünschte Auflösung anpassen. Diese Tools erleichtern und beschleunigen das Testen. Solche In-Browser-Tools können als bezeichnet werden Responsinator .

Einige Tools bieten auch eine wichtige Funktion zum Erfassen des reaktionsschnellen Screenshots, mit deren Hilfe wir das Website-Design, HTML, Layouts, CSS usw. der reaktionsfähigen Website testen können.

Diese Tools sind großartige Alternativen, wenn die tatsächlichen Geräte nicht verfügbar oder bereit sind.

Hier ist eine kurze Werkzeugliste:

# 1) Responsive Design Checker

Responsive Design Checker

Geben Sie die URL der reaktionsfähigen Website, die getestet werden soll, in das obige Feld 'Geben Sie Ihre URL hier ein' ein und klicken Sie auf 'GO'. Sie können sogar das Gerät und die Auflösung auswählen, mit denen Sie die reaktionsfähige Site anzeigen möchten.

Nun eintreten www.fpl.com Wählen Sie im Feld das Layout „Nexus 7 PORTRAIT“ aus und klicken Sie auf GO. Die Site wird in der Auflösung des ausgewählten Formats angezeigt.

Werkzeug-1-2

#zwei) Screenfly

Screenfly RWD-Testwerkzeug 2

Betreten Sie die Teststelle www.fpl.com und klicken Sie auf GO.

Screenfly 2

Ändern Sie das Layout in Desktop, Tablet, Handy usw. und testen Sie die Site. Mit diesem Tool können Sie sogar die Auflösung anpassen.

Zum BeispielStellen Sie die Bildschirmauflösung auf 512 x 256 ein und testen Sie die Site.

Screenfly 3

Hinweis :: Mit diesem Tool können Sie sogar testen Szenario 6 einfach durch Ändern der Auflösungen und Überprüfen der Bildbenennung.

#3) Designmodo

Designmodo 1

Geben Sie eine beliebige URL ein. www.makemytrip.com und klicken Sie auf Enter.

Designmodo 2

Auf der rechten oberen Seite des Browsers haben Sie die Möglichkeit, das Layout der Website in das eines bestimmten mobilen Modells oder Geräts usw. zu ändern.

Hinweis :: Dieses Tool verfügt über eine weitere Funktion wie das Ziehen des Bildschirms und das Ändern der Auflösung auf die gewünschte Auflösung.

# 4) isResponsive

isResponsive 1

Geben Sie die Test-URL ein. www.fpl.com im Feld und klicken Sie auf die Schaltfläche 'Test'.

isResponsive 2

Hinweis: Dieses Tool verfügt nur über wenige feste Layoutoptionen, auf denen unsere Website getestet werden kann.

# 5) Mattkersley

Wenn Sie eine Ansicht Ihrer RW auf mehreren Bildschirmgrößen gleichzeitig haben möchten, dann dieses Tool Mattkersley ist was du brauchst.

Mattkersley 1

Geben Sie nun Ihre Test-URL in die Adressleiste ein und klicken Sie auf die Eingabetaste. Sie können die RW auf mehreren Bildschirmgrößen gleichzeitig anzeigen.

Mattkersley 2

# 6) Standardmäßig, Chrome hat nur wenige Dev Tools über die wir den Gerätemodus und ihre Fähigkeiten simulieren können.

Um diese Funktion von Chrome zu nutzen, öffnen Sie eine Test-Responsive-Design-Website wie www.fpl.com in Chrom und klicken Sie mit der rechten Maustaste auf die Webseite und wählen Sie die Option „Inspizieren“ aus dem Menü oder drücken Sie Strg + Umschalt + I. Das folgende Fenster wird unten auf der Webseite geöffnet.

Chrome Dev Tools 1

Klicken Sie nun auf das Symbol, wie im folgenden Screenshot gezeigt.

Chrome Dev Tools 2

Der mobile Modus der Webseite wird geöffnet. Von hier aus können Sie die Auflösung auf ein bestimmtes Pixel und auch auf ein vordefiniertes mobiles Modell ändern, das im Dropdown-Menü angezeigt wird. Sehen Sie sich den folgenden Schnappschuss an, um eine klare Vorstellung zu erhalten:

Chrome Dev Tools 3

Hinweis: Wir können die Webseite auch in die Hoch- oder Querformatansicht ändern.

Was ist Regressionstest in Software

Chrome Dev Tools 4

Andere gute Tools zum Testen von Responsive Design:

7) Sich anpassendes Design
8) BrowserStack
9) Troy
10) AmIResponsiveDesign
elf) Responsinator
12) Studiopress
13) ResponsiveTest
14) Für MAC-Maschinen haben wir eine separate Anwendung namens „ PASSEN ”, Um eine RW zu testen. Mit dieser Anwendung können Sie verschiedene Haltepunkte auf verschiedenen Geräten zum Testen einrichten. APTUS ist keine kostenlose Anwendung und wir müssen sie im Mac App Store kaufen.

Herausforderungen beim Testen von Responsive Design und möglichen Lösungen

Dynamische Teststrategie

Beim Übergang von 320 × 480 (Auflösung des iPhone4) zu 2048 × 2048 (ein großer Monitor) bleiben über 4 Millionen mögliche Browsergrößen übrig. Die meisten Testgruppen beschränken die Liste der Testgeräte auf eine Handvoll. Selbst dann ist das manuelle Testproblem schwer oder gar nicht zu lösen.

Entwickler können möglicherweise nicht alle Plattformprobleme vorhersehen, und Tester können sie nicht vor der Veröffentlichung abfangen. Aus diesem Grund treten gelegentlich Probleme mit der Benutzeroberfläche in der Produktion auf.

Vielleicht hat jemand die Größe seines Browsers reduziert, wodurch wichtige Textfelder von einer Seitenbeschriftung abgedeckt werden. Möglicherweise bricht ein Code, der für die dynamische Größenänderung von Seiten entwickelt wurde, die modale Datumsauswahl und wird von einem normalen Test, der auf WebDriver basiert, nie bemerkt. Es gibt zu viele Anzeigeoptionen zum Erstellen von Tests und zu wenig Zeit.

Werfen wir einen Blick auf arealistisches Beispielum das Problem zu veranschaulichen.

Dynamische Seiten, beispielsweise Werbeschieber und Inhalte, die von Benutzern mit unterschiedlichen Seitengrößen gestreamt werden, sind ein Grundnahrungsmittel vieler Softwareprodukte. Hinzu kommt, dass wir nicht vorhersagen können, wie die Seite angezeigt wird, und viele Automatisierungsbemühungen mit einem Fehlschlag beginnen.

Ich sehe zwei beliebte Lösungen für dieses Problem - die Verwendung eines standardisierten Datensatzes oder eines Basisdatensatzes und die Aktualisierung jedes Mal, wenn die Testsuite ausgeführt wird, und die gleichzeitige Verwendung einer Umgebung oder Plattform.

Standarddaten stellen sicher, dass der Seiteninhalt bei jedem Laden der Testumgebung gleich aussieht. Diese Strategie kombiniert mit so etwas wie Sauce Labs, die Menschen Zugang zu vielen Plattformen verschafft, und Sie kommen ziemlich weit.

Dieser Ansatz erfordert Zeit und Ressourcen. Sie benötigen Zeit von jemandem mit Datenbankzugriff, normalerweise einem DBA, um Datenbankexporte zu erstellen und zu aktualisieren. Außerdem muss jemand Skripts zum Einrichten und Herunterfahren von Skripten erstellen, um die Testumgebung aufrechtzuerhalten. Nach all diesen Bemühungen könnten Sie mit der Art von sanitären Umgebungsfehlern enden, in denen Sie sich gerne verstecken.

Alternativ können Sie die Visual Testing-Technologie verwenden, um Tests auf Webseiten zu automatisieren, die sich in Layout und Inhalt unterscheiden. Mit diesem Tool können Sie Tests erstellen, ohne Änderungen an Ihrer Testumgebung vorzunehmen und ohne dass Fähigkeiten von Personen außerhalb Ihrer Testgruppe erforderlich sind.

Schauen wir uns ein Beispiel an.

Betrachten Sie die mobile Twitter-App.

Dieses Produkt ist eine Kombination aus sich ständig ändernden Benutzerinhalten und Werbung. Es gibt auch einige Kernteile der Benutzeroberfläche, wie z. B. den Newsfeed und Benachrichtigungen, in der Kopfzeile.

Mit einem visuellen Testwerkzeug können Sie zunächst eine Bildschirmaufnahme der gesamten scrollbaren Seite und nicht nur des sichtbaren Bereichs durchführen. Sie können eine Vergleichsoption auswählen, die Textinhalte ignoriert, sich jedoch auf Elemente auf der Seite konzentriert.

Zum Beispiel, Sie konnten sehen, dass die Felder für Tweets vorhanden sind, dass jeder Tweet ein Namenselement und ein Datums- / Zeitelement enthält, ohne sich Gedanken darüber zu machen, was in den Elementen enthalten ist.

Die Suche nach Elementen auf ganzen Seiten entlastet auch die Wartungs- und Komplexitätsbelastung, die wir bei vielen automatisierten Tests sehen. Anstatt Daten auf einer Seite zu bearbeiten, zu speichern, zu scrollen und dann zu überprüfen, erhalten Sie alles auf einen Schlag. Dies bedeutet weniger Code zum Schreiben, weniger Code zum Verwalten und weniger Fehlalarme in den nächtlichen Testläufen.

Responsive Testing für Responsive Design:

Responsive Design hat das kombinatorische Problem zu jeder verfügbaren Plattform hinzugefügt. Die Frage ist; Aus all diesen möglichen Plattformen und Bildschirmgrößen wählen wir die beste Testabdeckung aus.

Die Reduzierung der Anzahl der von uns abgedeckten Umgebungen auf die beliebtesten erleichtert die technische Aufgabe und ignoriert gleichzeitig das Abdeckungsproblem.

Das Erhöhen der Anzahl von Umgebungen mit einem Automatisierungsframework allein schafft einen Alptraum für die Wartung und führt möglicherweise zu einem unlösbaren Testproblem.

Die Kombination guter visueller Testtools mit einem flexiblen UI-Automatisierungsframework wie dem Webtreiber kann die technischen Aspekte dieses Problems nicht nur einfacher zu behandeln, sondern auch lösbar machen.

Das Ziel ist eine gute Abdeckung der Benutzeroberfläche mit einem angemessenen Wartungsaufwand. Visuelle Tests sind Ihre einzige robuste und skalierbare Option.

Tipps für Responsive Web-Tests

# 1) Beim Testen einer RW sollten Sie die Designkonsistenz berücksichtigen, z. B. die Ausrichtung von Bildern, Texten, das Auffüllen der Kanten usw. in allen Browsern und Betriebssystemen.

#zwei) Während des Testens einer RW sollte der Tester wissen, was zu testen ist und wie auf mehreren Geräten an verschiedenen Haltepunkten zu testen ist. Andernfalls könnte es ziemlich erschöpfend und verwirrend sein.

#3) Für gründliche Tests einer reaktionsfähigen Website ist die Koordination zwischen Tester und Entwickler ein Muss. Der Entwickler sollte den Testern bei der Erstellung der Bedingungen helfen, die in den Voraussetzungen der Testfälle angegeben sind.

# 4) Überprüfen Sie, ob die Webseiten bei allen Auflösungen lesbar sind, d. H. Der Inhalt sollte lesbar sein, auch wenn wir die Größe des Browsers auf die Bildschirmgröße des Mobilgeräts ändern.

# 5) Der wichtige Inhalt der RW sollte für alle Haltepunkte sichtbar sein, d. H. Wenn wir die Browsergröße vom Desktop-Bildschirm zum mobilen Bildschirm ändern, sollten die Hauptbilder, der Haupttext, das Menü usw. gleich bleiben.

# 6) Wenn die Größe des Browsers zum Testen geändert wird, sollte jeder Klickbereich (wie Schaltflächen, Menüs, Unterlinks usw.) der RW zum Klicken geeignet sein.

# 7) Durch Ändern der Größe des Browsers und Testen der reaktionsfähigen Website können nur einige wichtige Probleme festgestellt werden, während auf mobilen Geräten möglicherweise einige andere Probleme im Zusammenhang mit Fingerabdrücken, Tippen usw. auftreten. Das Testen dieser besonderen Merkmale an den tatsächlichen Geräten kann zu einer besseren Fehlersuche und -beseitigung führen.

Fazit

Wenn wir Responsive Design testen, wird es viele Herausforderungen geben. Sie sollten effizient denken, um die Herausforderungen zu meistern.

Das Testen einer Responsive-Website ist für eine erfolgreiche Zukunft vieler sehr wichtig mobile Anwendungen. Mobile Benutzer werden nur noch zunehmen und ihre Erwartungen unterscheiden sich stark von denen von Desktop-Benutzern. Die Implementierung und gründliche Prüfung von RWD ist eine hervorragende Möglichkeit, Ihre Site so einzurichten, dass sie den Erwartungen entspricht.

Die Implementierung und gründliche Prüfung von RWD ist eine hervorragende Möglichkeit, Ihre Site so einzurichten, dass sie den Erwartungen entspricht.

Wir hoffen, dass die in diesem Artikel beschriebenen Informationen, Tipps und Testszenarien Ihren Anforderungen an reaktionsschnelle Website-Tests sicherlich helfen.

Über den Autor: Dies ist ein Gastbeitrag von Laxmi. Sie verfügt über mehr als 7 Jahre Erfahrung im Bereich Softwaretests und arbeitet derzeit als Senior Software Test Engineer.

Probieren Sie alle Beispiele in diesem Artikel aus und teilen Sie uns mit, wenn Sie Fragen oder Kommentare dazu haben.

Literatur-Empfehlungen

^