responsive web design testing
W dzisiejszych czasach korzystanie z urządzeń mobilnych w celu uzyskania dostępu do internetu wzrosło i stało się dość popularne. Niemal każdy internauta marzy o mobilnej wersji serwisu.
Jednak większość witryn nie jest tak zoptymalizowana, jak powinna być pod kątem urządzeń mobilnych. Testerzy powinni przeprowadzić test responsywności mobilnej na responsywnych projektach.
Tradycyjne oprogramowanie generuje zasadniczo to samo na każdym urządzeniu.
Microsoft Office, na przykład wygląda tak samo na każdym komputerze osobistym. Wyobraź sobie, że bierzesz Microsoft Word dokładnie tak, jak działa na Twoim komputerze i przeglądasz go na iPhonie4. Albo menu i przyciski będą wyglądać na małe, albo zobaczysz tylko róg ekranu i będziesz musiał używać rozbudowanych pasków przewijania. Tak czy inaczej, aplikacja staje się zasadniczo bezużyteczna.
To frustrujące doświadczenie jest właśnie tym, przez co przechodzi każdy projektant, próbując projektować w sieci.
Rozwiązaniem tego problemu jest coś, co nazywa się „projektowaniem responsywnym”, technika polegająca na tym, że strony internetowe pytają przeglądarkę o rozdzielczość, a następnie wdzięcznie przeprojektowują środowisko użytkownika w oparciu o dostępne miejsce na ekranie. Nagle nie można dokładnie wiedzieć, jak będzie wyglądać Twoje oprogramowanie na produkcji.
Oznacza to strategię testowania (i strategię automatyzacji), która musi mieć możliwość eksperymentowania i uczenia się, co „wygląda dobrze”, a co nie, w różnych rozdzielczościach.
Czego się nauczysz:
- Przewodnik dla początkujących dotyczący testowania elastycznych projektów witryn internetowych
- Co to jest elastyczne projektowanie witryn internetowych?
- Zalety responsywnego projektowania:
- Główne elementy projektowania responsywnych witryn internetowych:
- Przykłady elastycznego projektowania witryn internetowych
- Jak przetestować responsywną stronę internetową
- Przykładowe scenariusze testowe do testowania responsywnych stron internetowych:
- Narzędzia do testowania responsywnej strony internetowej
- Wyzwania związane z testowaniem responsywnego projektu i możliwe rozwiązania
- Wskazówki dotyczące elastycznego testowania witryn internetowych
- Wniosek
Przewodnik dla początkujących dotyczący testowania elastycznych projektów witryn internetowych
Kiedy próbujemy otworzyć stronę internetową, serwer odczytuje „ m.sub-domeny ”, Aby zidentyfikować rodzaj urządzenia mobilnego, z którego pochodzi żądanie. Na tej podstawie przekierowuje użytkownika do odpowiedniej wersji mobilnej.
Aby było to w 100% skuteczne, każde urządzenie powinno mieć własny projekt strony internetowej specjalnie dla niego zbudowanej; falub na przykładinny specyficzny projekt dla Blackberry, iPhone, iPad itp., biorąc pod uwagę ich rozmiar ekranu i rozdzielczości.
Jednak inna wersja internetowa dla każdej rozdzielczości i urządzenia nie jest praktyczna. Plik Ethan Marcotte wymyślił nowe podejście - Responsive Web Design ( RWD ) - to rozwiązuje ten problem.
Nasza rekomendacja
# 1) Przeglądarka LT
Przeglądarka LT pomaga użytkownikom testować i debugować witrynę w ponad 45 rzutniach urządzeń. Przetestuj swoją witrynę internetową na różnych wstępnie zainstalowanych portach wyświetlania urządzeń mobilnych i stacjonarnych za pomocą przeglądarki LT Browser, przyjaznej dla programistów przeglądarki do debugowania widoku mobilnego.
Po prostu wprowadź adres URL swojej witryny i wybierz urządzenie, na którym chcesz przetestować swoją witrynę. Możesz jednocześnie wybrać dwa urządzenia do porównania widoku obok siebie.
Nie tylko testowanie, ale użytkownicy mogą również debugować swoją witrynę w podróży za pomocą wbudowanych narzędzi DevTools oferowanych przez przeglądarkę LT.
Najlepsze jest to, że użytkownicy mogą tworzyć niestandardowe urządzenie na podstawie swoich wymagań, co czyni przeglądarkę LT Browser naszym pierwszym wyborem do testów responsywnych.
=> Odwiedź przeglądarkę LTCo to jest elastyczne projektowanie witryn internetowych?
RWDcele stron internetowych, aby reagowały na ich urządzenie, rozdzielczość oraz były w stanie prawidłowo renderować i dostosowywać. Na przykład, jeśli użytkownik przełączy się z komputera stacjonarnego / laptopa na iPada, witryna powinna automatycznie dostosować zmiany rozdzielczości, takie jak rozmiar obrazu itp., zgodnie z możliwościami odpowiedniego urządzenia.
W skrócie,Elastyczny projektjest „Jedna witryna na każdy ekran” .
Poniższy ekran to plikprzykładRWD:
Uwaga: Czas rzeczywistyprzykładresponsywnej witryny jest www.fpl.com
W RWD witryna internetowa jest zaprojektowana tak, aby zapewniać najwyższy komfort użytkowania dzięki łatwej nawigacji, przejrzystemu i prostemu interfejsowi użytkownika itp. Responsywne strony internetowe łatwo się dostosowują i działają we wszystkich rozdzielczościach, przeglądarkach, rozmiarach ekranu, sprzęcie i systemach operacyjnych.
- Responsywne strony internetowe są kodowane w PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) i wielu nowych frameworkach, które są bardzo przydatne do tworzenia responsywnych projektów.
- Funkcje CSS i HTML są wykorzystywane do automatycznej zmiany rozdzielczości ekranu i rozmiaru obrazów.
- Projekt RW używa punktów przerwania do identyfikacji układu witryny. Każdy projekt jest używany w różnych punktach przerwania. Jeden projekt jest stosowany nad punktem przerwania, podczas gdy inny projekt jest używany poniżej punktu przerwania. Te punkty przerwania są zwykle oparte na szerokości przeglądarek.
- Projektując responsywną witrynę internetową, programiści biorą pod uwagę zawartość, projekt i wydajność witryny na wszystkich urządzeniach zapewnić użyteczność .
Diagram jest dokładnym porównaniem do tego, jak treść dostosowuje się do środowiska i zachowania urządzenia.
Uwaga : Oprócz RWD istnieje jeszcze inne podejście zwane Adaptacyjne projektowanie witryn internetowych ( AWD ) . W podejściu AWD dla każdego urządzenia będzie określony projekt. Jednak AWD może nie być odpowiedni przez cały czas. Poza tym projektowanie witryn AWD zajmuje więcej czasu i pieniędzy w porównaniu do witryn RWD.
Zalety responsywnego projektowania:
# 1) Doświadczenie użytkownika: Oparty na urządzeniu, z którego uzyskujemy dostęp do RW, ukrywa nietypowe elementy i pomaga użytkownikom szybciej osiągać cele.Na przykład:jeśli otworzymy RW z telefonu komórkowego, ukryje on nieistotne elementy i przyspieszy ładowanie stron internetowych.
#dwa) Udostępnianie lub łączenie: W przypadku RW tylko jeden adres URL jest używany dla różnych urządzeń. Ponieważ tylko jeden adres URL gromadzi wszystkie dane i informacje z różnych urządzeń, zapewnia użytkownikom lepszy UX.
# 3) Niewielka lub minimalna konserwacja wymagana dla RW.
# 4) Układy RW są płynne.
Różnice między elastycznym projektowaniem witryn internetowych a adaptacyjnym projektowaniem witryn internetowych:
RWD i AWD są ze sobą ściśle powiązane.
- RWD reaguje szybko i pozytywnie na zmiany, podczas gdy AWD można łatwo zmodyfikować do nowego celu.
- RWD ma wiele układów płynnej siatki, a AWD ma wiele układów o stałej szerokości.
- Obrazy w RWD są nazywane jako kontekstowe.
Główne elementy projektowania responsywnych witryn internetowych:
Responsive Web Design składa się z trzech głównych komponentów:
# 1) Elastyczne układy: Tworzenie strony internetowej z elastyczną siatką, którą można łatwo i dynamicznie zmieniać do dowolnej szerokości.
#dwa) Zapytania o media: Zapewnij różne style dla przeglądarek i urządzeń w zależności od kontekstu, takiego jak orientacja urządzenia, obszar roboczy itp.
# 3)Elastyczne medium: Wraz ze zmianą rozmiaru widocznych obszarów media (obrazy, filmy itp.) Również muszą zmieniać swój rozmiar lub rozdzielczość zgodnie z wymaganiami.
Uwaga : „Widok” to obszar przeglądarki, w którym wyświetlana jest rzeczywista zawartość witryny. Viewport nie zawiera pasków narzędzi, zakładek itp.
Przykłady elastycznego projektowania witryn internetowych
Przykład 1)
Otwórz łącze www.fpl.com z różnych urządzeń i obserwuj adres URL. Adres URL responsywnej witryny pozostaje taki sam na wszystkich urządzeniach.
do) Widok RW z komputera stacjonarnego lub laptopa (duży rozmiar ekranu)
b) Widok RW z tabletu (średni rozmiar ekranu)
do) Widok RW z telefonu komórkowego (mały rozmiar ekranu)
Przykład 2)
Otwórz witrynę www.yepme.com z laptopa, a także z telefonu komórkowego i porównaj adresy URL. To yepme.com link nie jest elastycznym łączem.
do) Widok nie responsywnej witryny z komputera stacjonarnego lub laptopa
pytania i odpowiedzi do wywiadów ios dla doświadczonych plików PDF
b) Widok nie responsywnej strony z telefonu komórkowego
Jak przetestować responsywną stronę internetową
Test projektowania responsywnego oznacza testowanie strony internetowej lub adres URL z różnych urządzeń. Praktycznie nie jest możliwe całkowite przetestowanie responsywnej strony internetowej, ponieważ w tym celu musimy skonfigurować różne systemy dla różnych rozmiarów ekranu.
Możliwym sposobem przeprowadzenia testu responsywnego jest zmiana rozmiaru okna przeglądarki zgodnie ze scenariuszem testu.
Niektóre przeglądarki, takie jak IE i Safari, zapewniają wtyczki lub rozszerzenia przeglądarki, które pomagają wyświetlać obszar widoku w pikselach. Ułatwia to testowanie, uzyskując pożądany rozmiar ekranu poprzez modyfikację pikseli.
Inne przeglądarki, takie jak Chrome, zapewniają oprogramowanie lub program o nazwie „Emulator” co pomoże zmienić funkcje ekranu i środowisko zgodnie z żądanym urządzeniem potrzebnym do testowania.
Uwaga: „Emulator” to oprogramowanie lub program udostępniany w przeglądarce, który sprawia, że system hosta (bieżąca przeglądarka) zachowuje się jak system gościa (przeglądarka żądanego urządzenia, które ma być przetestowane pod kątem żądanego rozmiaru ekranu).
Mimo że emulatory nie mogą zapewnić dokładnego środowiska potrzebnego do testowania, są one ekonomicznym rozwiązaniem do testowania RW na wysokim poziomie.
Przykładowe scenariusze testowe do testowania responsywnych stron internetowych:
Tester responsywnych stron internetowych powinien upewnić się, że responsywny projekt spełnia wszystkie wymienione poniżej scenariusze testowe aby upewnić się, że jest to responsywny projekt wolny od błędów.
# 1) Elastyczny link do strony internetowej lub adres URL powinien być taki sam dla wszystkich przeglądarek na każdym urządzeniu, niezależnie od rozdzielczości ekranu.
Przypuszczać www.abc.com to responsywna strona internetowa. Jeśli otworzymy go na laptopie i telefonie komórkowym, adres URL powinien być taki sam na obu urządzeniach. Strona internetowa otwierana w przeglądarce mobilnej nie powinna zaczynać się od www.m.abc.com lub www.mobile.abc.com
Przykład: Otwórz witrynę www.kotak.com z laptopa, a także otwórz to samo z telefonu komórkowego i obserwuj adres URL na obu urządzeniach. Adres URL nie jest taki sam dla obu urządzeń.
Poniżej migawka pokazuje, jak zmienia się adres URL dla nie responsywna witryna na różnych urządzeniach takie jak laptop i telefon komórkowy.
Otwórz witrynę www.w3schools.com z laptopa i telefonu komórkowego i sprawdź adresy URL. Powinien być taki sam dla obu urządzeń.
Poniższy zrzut ekranu pokazuje, że adres URL pozostaje taki sam dla responsywnej witryny na różnych urządzeniach:
#dwa) Lokalizacja wyświetlania treści (obrazów, linków podrzędnych, menu itp.) Responsywnej strony internetowej powinna zmieniać się dynamicznie wraz ze zmianą rozdzielczości ekranu. Oznacza to, że jeśli zmienimy rozdzielczość ekranu z rozmiaru laptopa na telefon komórkowy, to wyświetlanie opcji menu powinno zmieniać się dynamicznie.
Przykład: Otwórz łącze www.fpl.com z laptopa i kliknij menu w prawym górnym rogu okna. Opcje menu są wyświetlane, jak pokazano poniżej:
różne rodzaje testów w Qa
otwarty www.fpl.com z telefonu komórkowego i kliknij menu w prawym górnym rogu okna. Opcje menu są następujące:
Uwaga: Ten scenariusz można również przetestować za pomocą emulatorów przeglądarki (Były:chrom).
Otwórz witrynę www.fpl.com na pulpicie i obserwuj, jak są wyświetlane opcje menu. Zobacz migawkę poniżej:
Teraz zmień rozmiar okna przeglądarki do rozmiaru ekranu telefonu komórkowego, a następnie sprawdź wyświetlanie opcji menu. Zobacz migawkę poniżej:
# 3) Adresy URL responsywnej witryny również powinny być specyficzne dla rozdzielczości.
Wymagania wstępne do przetestowania tego scenariusza: Poproś programistę o wstawienie dowolnego linku podrzędnego do strony testowania responsywnego, w której link podrzędny nie jest responsywny.
Na przykład, programista może wstawić link www.snapdeal.com na naszej stronie testowej.
Teraz otwórz responsywną witrynę testową z telefonu komórkowego i kliknij łącze podrzędne wymienione w wymaganiu wstępnym. Następnie adres URL linku podrzędnego powinien zmienić się na https://m.snapdeal.com .
# 4) Ten sam scenariusz można również przetestować na laptopie. Otwórz RW na komputerze stacjonarnym lub laptopie i kliknij łącze podrzędne (wymienione w wymaganiach wstępnych trzeciego scenariusza testowego), które nie odpowiada. Adres URL linku podrzędnego nie powinien się zmieniać (ponieważ testujemy ten scenariusz na laptopie, adres URL powinien pozostać taki sam).
# 5) Wymagania wstępne do przetestowania tego scenariusza: Poproś programistę o wstawienie dowolnego linku podrzędnego,na przykład, www.paytm.com do witryny testowej. Urządzenie mobilne, na którym zamierzasz realizować ten scenariusz, powinno mieć zainstalowaną odpowiednią aplikację Paytm w telefonie komórkowym.
Teraz otwórz naszą responsywną witrynę testową z telefonu komórkowego i kliknij łącze podrzędne „paytm”. Następnie należy otworzyć aplikację Paytm, która jest zainstalowana w telefonie komórkowym. (Użytkownik nie powinien być przekierowywany na stronę internetową w przeglądarce lub innym oknie; powinna być otwarta tylko aplikacja).
# 6) Obrazy w responsywnej witrynie internetowej są specyficzne dla rozdzielczości. Oznacza to, że rozdzielczość obrazu wstawionego w kodzie responsywnej strony zaprojektowanej z myślą o kompatybilności mobilnej jest inna niż rozdzielczości komputera stacjonarnego czy tabletu. Każdy rozmiar ekranu powinien mieć określony obraz w projekcie.
Wymagania wstępne do przetestowania tego scenariusza: Testowanie i sprawdzanie rozdzielczości obrazów może być trudnym zadaniem. Poproś programistę o wstawienie trzech różnych obrazów w responsywnej witrynie osobno na telefon komórkowy, tablet i komputer.
Otwórz testową responsywną stronę internetową z komputera stacjonarnego, tabletu i telefonu komórkowego. Obrazy na responsywnej stronie internetowej powinny być różne dla wszystkich trzech urządzeń.
(LUB)
Otwórz testowy RW z pulpitu i sprawdź obraz na stronie internetowej. Teraz zmień rozmiar okna na tablet i sprawdź obraz. Powinien różnić się od obrazu pokazanego na ekranie komputera stacjonarnego. Teraz możesz zmienić rozmiar okna do rozmiaru ekranu telefonu komórkowego i sprawdzić obraz. Ten obraz powinien również różnić się od dwóch powyższych obrazów.
Przykład: Otwórz responsywną witrynę www.fpl.com z pulpitu; kliknij prawym przyciskiem myszy obraz na strona główna -> wybierz „Sprawdź” z menu. Sprawdź rozdzielczość obrazu (sprawdź rozszerzenie nazwy pliku obrazu .jpg) z kodu. Zobacz poniższy zrzut ekranu:
Teraz zmień rozmiar tego samego okna na rozmiar ekranu tabletu i sprawdź rozdzielczość obrazu. (Rozszerzenie nazwy obrazu to medium.jpg)
Na koniec zmień rozmiar okna na rozmiar ekranu telefonu komórkowego i sprawdź obraz. (Rozszerzenie nazwy obrazu to small.jpg)
# 7) Kliknij losowo w dowolnym miejscu na stronie internetowej i sprawdź, czy jakiekolwiek dane lub tekst, do których nie ma hiperłączy, są inicjowane i przekierowywane na inną stronę lub treść. To sprawdza, czy jakiekolwiek słowo lub tekst jest oznaczony jako hiperłącze w pliku zaplecze .
Uwaga : W kilku projektach wymagania mówią o wielkości piksela i rozdzielczości ekranu dla poszczególnych urządzeń. (Na przykład, widok tabletu dla ich RW powinien mieć piksel 15:15, a dla telefonu komórkowego - 10:10 itd.)
Głównym scenariuszem jest testowanie dynamicznych zmian, które powinny wystąpić na wyświetlaczu RW, gdy zmienimy rozmiar piksela.
# 8) Otwórz nasz testowy RW w przeglądarce i przeglądaj zawartość i wyświetlanie głównych obrazów. Teraz zmień rozmiar okna do punktu przerwania rozmiaru tabletu i sprawdź zmiany, które powinny nastąpić w rozdzielczości obrazu i każdej innej zawartości. W punktach przerwania zmiany powinny następować dynamicznie (czasami zmiany nie pojawią się w punktach przerwania i mogą ulec zmianie przy innym rozmiarze piksela, co jest defektem).
Narzędzia do testowania responsywnej strony internetowej
Istnieje kilka narzędzi (stron internetowych), które pozwolą Ci podejrzeć strony naszej responsywnej strony internetowej.
Na przykład,możemy przetestować naszą responsywną witrynę w różnych predefiniowanych rozdzielczościach ekranu (smartfony, tablety itp.), a także dostosować ją do dowolnej pożądanej rozdzielczości. Te narzędzia sprawiają, że czynności testowe są łatwiejsze i szybsze. Takie narzędzia przeglądarki można nazwać Responsinator .
Niektóre narzędzia oferują również ważną funkcję przechwytywania responsywnego zrzutu ekranu, która może pomóc nam przetestować projekty witryn, HTML, układy, CSS itp. Responsywnej witryny.
Te narzędzia są świetną alternatywą, gdy rzeczywiste urządzenia nie są dostępne lub gotowe.
Oto krótka lista narzędzi:
# 1) Responsywne narzędzie do sprawdzania projektu
W powyższym polu „Wpisz tutaj swój adres URL” wprowadź adres URL responsywnej witryny internetowej, która ma zostać przetestowana, i kliknij przycisk „Idź”. Możesz nawet wybrać urządzenie i rozdzielczość, w których chcesz wyświetlać responsywną witrynę.
Teraz wejdź www.fpl.com w polu wybierz układ „Nexus 7 PORTRAIT” i kliknij GO. Witryna zostanie wyświetlona w rozdzielczości wybranego formatu.
#dwa) Screenfly
Wejdź na stronę testową www.fpl.com i kliknij GO.
Zmień układ na komputer, tablet, telefon komórkowy itp. I przetestuj witrynę. Za pomocą tego narzędzia możesz nawet dostosować rozdzielczość.
Na przykład, ustaw rozdzielczość ekranu na 512 x 256 i przetestuj witrynę.
Uwaga : Za pomocą tego narzędzia możesz nawet przetestować scenariusz 6 łatwo zmieniając rozdzielczości i weryfikując nazewnictwo obrazu.
# 3) Designmodo
Wpisz dowolny adres URL, www.makemytrip.com i kliknij Enter.
dodaj do tablicy w java
W prawym górnym rogu przeglądarki masz możliwość zmiany układu strony internetowej na dowolny model lub urządzenie mobilne itp.
Uwaga : To narzędzie ma inną funkcję, taką jak przeciąganie ekranu i modyfikowanie rozdzielczości do żądanej rozdzielczości.
# 4) isResponsive
Wprowadź testowy adres URL, www.fpl.com w polu i kliknij przycisk „Test”.
Uwaga: To narzędzie ma tylko kilka opcji stałego układu, na których można przetestować naszą witrynę.
# 5) Mattkersley
Jeśli chcesz mieć podgląd swojego RW na wielu rozmiarach ekranu naraz, to to narzędzie mattkersley jest tym, czego potrzebujesz.
Teraz wprowadź testowy adres URL w pasku adresu i kliknij Enter. Możesz oglądać RW jednocześnie na wielu rozmiarach ekranu.
# 6) Domyślnie, chrome ma kilka narzędzi deweloperskich dzięki którym możemy zasymulować tryb urządzenia i jego możliwości.
Aby skorzystać z tej funkcji Chrome, otwórz dowolną stronę testującą responsywny projekt, taką jak www.fpl.com w chrome i kliknij prawym przyciskiem myszy na stronie i wybierz z menu opcję „Sprawdź” lub naciśnij Ctrl + Shift + I. Poniższe okno zostanie otwarte u dołu strony internetowej.
Teraz kliknij ikonę, jak pokazano na poniższym zrzucie ekranu.
Otwiera się tryb mobilny strony internetowej. Z tego miejsca możesz zmienić rozdzielczość na dowolny konkretny piksel, a także na dowolny predefiniowany model mobilny, który jest wyświetlany w menu rozwijanym. Zobacz poniższą migawkę, aby uzyskać jasny pomysł:
Uwaga: Możemy również zmienić stronę internetową na widok pionowy lub poziomy.
Inne dobre narzędzia do testowania responsywnego projektowania:
7) Elastyczny projekt
8) BrowserStack
9) Troy
10) AmIResponsiveDesign
jedenaście) Responsinator
12) Studiatka
13) ResponsiveTest
14) Dla maszyn MAC mamy osobną aplikację o nazwie „ DOPASOWANIE ”Aby przetestować RW. Ta aplikacja umożliwia konfigurowanie różnych punktów przerwania na różnych urządzeniach do testowania. APTUS nie jest darmową aplikacją i musimy ją kupić w Mac App Store.
Wyzwania związane z testowaniem responsywnego projektu i możliwe rozwiązania
Dynamiczna strategia testowa
Przejście od 320 × 480 (rozdzielczość iPhone 4) do 2048 × 2048 (duży monitor) pozostawia ponad 4 miliony możliwych rozmiarów przeglądarek. Większość grup testowych zawęzi listę urządzeń testowych do kilku. Nawet wtedy problem z testowaniem ręcznym jest trudny lub niemożliwy do rozwiązania.
Deweloperzy nie mogą przewidzieć wszystkich problemów platformy, a testerzy nie mogą ich złapać przed wydaniem. Z tego powodu w produkcji okazjonalnie występują problemy z interfejsem użytkownika.
Może ktoś zmniejszył rozmiar swojej przeglądarki, powodując zakrycie ważnych pól tekstowych etykietą strony. Być może jakiś kod zaprojektowany do obsługi dynamicznej zmiany rozmiaru strony łamie modalne selektory dat i nigdy nie zostanie zauważony przez normalny test oparty na WebDriver. Jest zbyt wiele opcji wyświetlania, aby tworzyć testy, a za mało czasu.
Rzućmy okiem na plikrealistyczny przykładaby zilustrować problem.
Strony dynamiczne, takie jak suwaki reklamowe i treści przesyłane strumieniowo od użytkowników o różnych rozmiarach stron, są podstawą wielu programów. Dodaj do tego fakt, że nie możemy przewidzieć, jak strona będzie wyświetlana, a wiele działań związanych z automatyzacją zaczyna się od niepowodzenia.
Widzę dwa popularne rozwiązania tego problemu - używając znormalizowanego lub bazowego zestawu danych i odświeżając go za każdym razem, gdy jest uruchamiany zestaw testów, i biorąc rzeczy z jednego środowiska lub platformy na raz.
Standardowe dane zapewniają, że zawartość strony będzie wyglądać tak samo za każdym razem, gdy ładujemy środowisko testowe. Ta strategia w połączeniu z czymś w rodzaju Sauce Labs, która daje ludziom dostęp do wielu platform, a Ty zajdziesz całkiem daleko.
Takie podejście wymaga czasu i zasobów. Będziesz potrzebować czasu od osoby z dostępem do bazy danych, zazwyczaj administratora bazy danych, na tworzenie i aktualizowanie eksportu bazy danych. I ktoś musi stworzyć skrypty konfigurujące i usuwające skrypty, aby utrzymać środowisko testowe. Po tych wszystkich wysiłkach możesz skończyć z typem odkażonego środowiska, w którym owady uwielbiają się ukrywać.
Alternatywnie możesz użyć technologii testów wizualnych, aby pomóc zautomatyzować testy na stronach internetowych, które różnią się układem i zawartością. Korzystając z tego narzędzia, możesz tworzyć testy bez żadnych zmian w środowisku testowym i bez konieczności posiadania zestawów umiejętności od osób spoza grupy testowej.
Spójrzmy na przykład.
Rozważ aplikację mobilną Twitter.
Ten produkt to połączenie stale zmieniających się treści użytkownika i reklam. W nagłówku znajduje się również kilka podstawowych części interfejsu użytkownika, takich jak źródło wiadomości i powiadomienia.
Korzystając z narzędzia do testowania wizualnego, można zacząć od wykonania zrzutu ekranu całej przewijanej strony, a nie tylko widocznego obszaru. Możesz wybrać opcję porównania, która ignoruje zawartość tekstową, ale koncentruje się na elementach na stronie.
Na przykład, można było zobaczyć, że pola dla tweetów istnieją, że każdy tweet ma element nazwy i element daty / czasu, bez martwienia się o to, co jest w elementach.
Wyszukiwanie elementów na całych stronach zmniejsza również obciążenie związane z konserwacją i złożonością, które widzimy w wielu automatycznych testach. Zamiast manipulować danymi na stronie, zapisywać, przewijać, a następnie weryfikować, otrzymujesz wszystko za jednym zamachem. Oznacza to mniej kodu do napisania, mniej kodu do utrzymania i mniej fałszywych alarmów w nocnych testach.
Testowanie responsywne dla projektowania responsywnego:
Projekt responsywny dodał problem kombinatoryczny do każdej dostępnej platformy. Pytanie brzmi; spośród wszystkich możliwych platform i rozmiarów ekranu, które wybieramy w celu uzyskania najlepszego pokrycia testowego.
Zmniejszenie liczby środowisk, które obsługujemy, tylko do najpopularniejszych, ułatwia zadanie techniczne, jednocześnie ignorując problem zasięgu.
Zwiększenie liczby środowisk za pomocą samej struktury automatyzacji stwarza koszmar konserwacji i potencjalnie dodaje nierozwiązywalny problem z testowaniem.
Połączenie dobrych narzędzi do testowania wizualnego z elastyczną strukturą automatyzacji interfejsu użytkownika, taką jak sterownik sieciowy, może sprawić, że techniczne aspekty tego problemu będą nie tylko łatwiejsze do rozwiązania, ale także do rozwiązania.
Celem jest dobre pokrycie interfejsu użytkownika przy rozsądnym obciążeniu konserwacyjnym. Testy wizualne to jedyna solidna i skalowalna opcja.
Wskazówki dotyczące elastycznego testowania witryn internetowych
# 1) Podczas testowania RW należy wziąć pod uwagę spójność projektu, taką jak wyrównanie obrazów, tekstów, dopełnienie krawędzi itp. We wszystkich przeglądarkach i systemach operacyjnych.
#dwa) Podczas testowania RW tester powinien wiedzieć, co testować i jak testować na wielu urządzeniach w różnych punktach przerwania. W przeciwnym razie może to być dość wyczerpujące i dezorientujące.
# 3) Aby dokładnie przetestować responsywną stronę internetową, niezbędna jest koordynacja testera i programisty. Programista powinien pomóc testerom w tworzeniu warunków wymienionych w wymaganiach wstępnych przypadków testowych.
# 4) Sprawdź, czy strony internetowe są czytelne we wszystkich rozdzielczościach, czyli treść powinna być czytelna nawet jeśli zmienimy rozmiar przeglądarki do rozmiaru ekranu mobilnego.
# 5) Ważna zawartość RW powinna być widoczna dla wszystkich punktów przerwania, tj. Jeśli zmienimy rozmiar przeglądarki z ekranu stacjonarnego na mobilny, to główne obrazy, główny tekst, menu itp. Powinny pozostać takie same.
# 6) Jeśli rozmiar przeglądarki zostanie zmieniony w celu przetestowania, każdy obszar kliknięcia (taki jak przyciski, menu, łącza podrzędne itp.) RW powinien nadawać się do kliknięcia.
# 7) Zmiana rozmiaru przeglądarki i testowanie responsywnej witryny internetowej może zidentyfikować tylko kilka głównych problemów, podczas gdy może wystąpić kilka innych problemów związanych z przesuwaniem palca, stukaniem itp. Na urządzeniach mobilnych. Testowanie tych konkretnych funkcji na rzeczywistych urządzeniach może prowadzić do lepszego wyszukiwania i usuwania defektów.
Wniosek
Kiedy testujemy, projektowanie responsywne będzie miało wiele wyzwań. Powinieneś myśleć w skuteczny sposób, aby sprostać wyzwaniom.
Testowanie responsywnej strony internetowej jest bardzo ważne dla pomyślnej przyszłości wielu osób aplikacje mobilne. Użytkownicy mobilni będą się tylko zwiększać, a ich oczekiwania są bardzo zróżnicowane niż użytkowników komputerów stacjonarnych. Wdrożenie i dokładne testowanie RWD to świetny sposób na dostosowanie witryny do oczekiwań.
Wdrożenie i dokładne testowanie RWD to świetny sposób na dostosowanie witryny do oczekiwań.
Mamy nadzieję, że informacje, wskazówki i scenariusze testowe omówione w tym artykule z pewnością pomogą Ci w testowaniu responsywnych witryn internetowych.
O autorze: To jest post gościnny autorstwa Laxmi. Ma ponad 7 lat doświadczenia w testowaniu oprogramowania, a obecnie pracuje jako starszy inżynier testów oprogramowania.
Wypróbuj wszystkie przykłady podane w tym artykule i daj nam znać, jeśli masz jakieś pytania / komentarze na ten temat.
rekomendowane lektury
- Testy alfa i testy beta (kompletny przewodnik)
- Kompletny przewodnik po testach weryfikacyjnych kompilacji (testy BVT)
- Testy funkcjonalne a testy niefunkcjonalne
- Rodzaje testowania oprogramowania: różne typy testów ze szczegółami
- Najlepsze narzędzia do testowania oprogramowania 2021 (Narzędzia do automatyzacji testów QA)
- Samouczek dotyczący testowania hurtowni danych ETL (kompletny przewodnik)
- Podręcznik testowania zabezpieczeń aplikacji internetowych
- Najlepsze usługi testowania oprogramowania QA od SoftwareTestingHelp