Jak rozwiązać typowe problemy z automatyzacją testów interfejsu użytkownika sieci Web przy użyciu darmowego zestawu narzędzi Katalon Studio

„Jeśli użytkownik końcowy zauważy złe działanie Twojej witryny, jej następne kliknięcie prawdopodobnie pojawi się na twojej-competition.com”. - Ian Molyneaux

Postępy w technologiach tworzenia stron internetowych sprawiają, że aplikacje internetowe są bardziej bogate w funkcje, dlatego automatyzacja testów internetowych staje się trudniejsza.

Funkcje technologii stron internetowych, takie jak obsługa wielu platform, przeglądarka, responsywne projektowanie, mogą dodać więcej komplikacji i wysiłku do strategii automatyzacji testów interfejsu użytkownika.

Jeśli więc jesteś początkującym i zaczynasz od automatyzacji testów interfejsu internetowego, oto kilka przykładów radzenia sobie z typowymi problemami i zwiększania wydajności testów automatyzacji.

Czytaj więcej: Pięć najważniejszych wyzwań w automatyzacji testów

Typowe wyzwania związane z automatyzacją testów interfejsu użytkownika (sieci)

  • Problemy z czasem oczekiwania
  • Problemy z ramką iframe
  • Problemy wyskakujące w automatyzacji
  • Problemy z lokalizowaniem głęboko zagnieżdżonych elementów

Nauczmy się, jak rozwiązać te problemy z automatyzacją interfejsu użytkownika za pomocą narzędzia Katalon Studio.

Katalon Studio to darmowy, ale potężny zestaw narzędzi do automatyzacji do testowania aplikacji internetowych i mobilnych. Jest łatwy w instalacji, a testerzy mogą szybko tworzyć, uruchamiać, raportować i utrzymywać zautomatyzowane testy.

To jest projekt demonstracyjny zbudowany przy użyciu Katalon Studio. Celem jest pomoc w radzeniu sobie z wyżej wymienionymi problemami z automatyzacją testów interfejsu WWW. Możesz także pobrać Katalon Studio i projekt demo z linków podanych poniżej w tym artykule.

# 1) Problemy z czasem oczekiwania i podejście do rozwiązania

Co to jest czekanie?

Oczekiwanie to taktyka stosowana w skryptach automatyzacji testów w celu utworzenia przerwy między krokami skryptu podczas oczekiwania na elementy do załadowania lub odpowiedź aplikacji.

Problemy, które inteligentne oczekiwania (wyraźne oczekiwania to inteligentne oczekiwania ograniczone do określonego elementu sieci) pomagają rozwiązać, to „fałszywe alarmy” dotyczące problemów analizowanych przez inżynierów do oceny.

Jako błędy skryptu, a nie błędy aplikacji. Gdy test kończy się niepowodzeniem z powodu samego skryptu, a nie z powodu błędu w aplikacji / stronie internetowej, nazywa się to błędnym błędem.

Oto kilka typowych przykładów tego, co może spowodować fałszywą awarię:

  • False Fail: Jednym z największych błędów, jakie widzimy, jest błąd „false fail” skryptu spowodowany oczekiwaniem na aplikację. Często spowodowane opóźnieniami w sieci, żądaniami do bazy danych lub dowolną liczbą rzeczy związanych z funkcjonalnością aplikacji lub strony internetowej.
  • Element docelowy nieobecny na stronie: Ten rodzaj awarii występuje podczas oczekiwania na elementy do wyświetlenia LUB renderowania w przeglądarce. Aplikacja może być uruchomiona, ale niektóre elementy mogą nie zostać jeszcze załadowane, co powoduje błąd skryptu testowego.

Jak podejść do tych błędów skryptu testowego, które wystąpiły z powodu opisanych powyżej problemów z Oczekiwaniem?

Zamiast dodawać losowe 5–10 sekund czeka na każdy krok, możesz wypróbować jedną z poniższych opcji:

  • Zmienna globalna - zmienna globalna jest zmienną o zasięgu globalnym, co oznacza, że ​​jest widoczna w całym programie. Możesz rozważyć zdefiniowanie 3 rodzajów zmiennych globalnych w skrypcie testowym: krótkie oczekiwanie, średnie oczekiwanie i długie oczekiwanie. Użyj tych zmiennych w skrypcie testowym zgodnie z czasem odpowiedzi aplikacji internetowej.
  • Czekaj na ładowanie strony - ta logika będzie czekać na pełne załadowanie strony przed uruchomieniem kroku w skrypcie.
  • Oczekiwanie na element obecny - czasami zdarza się, że elementy internetowe wyświetlają się na stronie dłużej podczas przeglądania stron, klikania przycisków lub robienia czegoś innego. Polecenie „WaitForElementPresent” spowoduje wstrzymanie selenu, dopóki docelowy element nie będzie obecny na stronie. Gdy element pojawi się na stronie, selen przejdzie do wykonania następnego polecenia.

Skrypt testowy Studio Katalon:

import internal.GlobalVariable;
importcom.kms.katalon.core.webui.keyword.WebUiBuiltInKe Keywords jako WebUiBuiltInKe Keywords
import com.kms.katalon.core.model.FailureHandling jako FailureHandling
import com.kms.katalon.core.testcase.TestCaseFactory jako TestCaseFactory
importuj com.kms.katalon.core.testobject.ObjectRepository jako ObjectRepository
import com.kms.katalon.core.testdata.TestDataFactory jako TestDataFactory
zaimportuj com.kms.katalon.core.testcase.TestCase jako TestCase
importuj com.kms.katalon.core.testdata.TestData jako TestData
import com.kms.katalon.core.testobject.TestObject jako TestObject
importcom.kms.katalon.core.webui.keyword.WebUiBuiltInKe words as WebUI
importcom.kms.katalon.core.mobile.keyword.MobileBuiltInKe words as Mobile
importcom.kms.katalon.core.webservice.keyword.WSBuiltInKe words as WS
import staticcom.kms.katalon.core.testobject.ObjectRepository.findTestObject
import staticcom.kms.katalon.core.testdata.TestDataFactory.findTestData
import staticcom.kms.katalon.core.testcase.TestCaseFactory.findTestCase
„Otwórz przeglądarkę i przejdź do strony Katalon”
WebUI.openBrowser („https://katalon.com/”)
„Poczekaj na załadowanie strony Studio Katalon z czasem oczekiwania używanym jako zmienna globalna”
WebUI.waitForPageLoad (GlobalVariable.G_Timeout_Small)
Kliknij przycisk „Zaloguj się”, aby przejść do strony logowania ”
WebUI.click (findTestObject ('Page_KatalonHomepage / btn_Login'))
„Wprowadź nazwę użytkownika”
WebUI.setText (findTestObject („Page_KatalonLogin / txt_Username”), nazwa użytkownika)
'Wprowadź hasło'
WebUI.setText (findTestObject („Page_KatalonLogin / txt_Password”), hasło)
Kliknij przycisk „Zaloguj się”, aby się zalogować ”
WebUI.click (findTestObject ('Page_KatalonLogin / btn_Submit'))
„Poczekaj, aż pojawi się komunikat o nieudanym logowaniu”
WebUI.waitForElementPresent (findTestObject („Page_KatalonLogin / div_LoginMessage”), GlobalVariable.G_Timeout_Small

Wygenerowany powyżej skrypt testowy pokazujący użycie zmiennej globalnej i wbudowanych słów kluczowych Katalon Studio.

# 2) Problemy z ramką iframe i podejście do rozwiązania

Co to jest iframe?

Jest to wbudowana ramka dokumentu HTML osadzonego w innym dokumencie HTML witryny. Element iframe służy do wstawiania treści z innych źródeł na stronie internetowej.

Dlaczego tak ważna jest wiedza na temat testowania ramek iframe?

Weryfikacja tekstu i obiektów w ramkach iframe może być wyzwaniem. Nawet jeśli ty (jako człowiek testujący) widzisz tekst, narzędzia do automatyzacji nie będą go zbierać, identyfikując tylko obiekt. Musisz powiedzieć skryptowi, jak przechodzić przez ramki iframe i wybrać poprawną ramkę iframe, w której znajduje się tekst i obiekt.

Przykłady elementów iframe:

# 1) Katalon Studio forum iframe

Ryc. 1: Wyświetlanie wykrytych i przechwyconych elementów iframe

Możesz zobaczyć, że Szpieg obiektowy Katalon Studio wybiera ramkę iframe w podświetlonym na czerwono obszarze.

Ryc. 2: Szpiegowanie obiektów Katalon Studio

Obiekt szpiegujący obiekt Katalon Studio wykrył i przechwycił iframe komentarza (rysunek 1) zgodnie z wymaganiami weryfikacji obiektów w tym iframe.

# 2) Przykład przeciągania i upuszczania JQueryUI:

Rysunek 3: Pokazanie wyboru obszaru iframe JQueryUI przeciągnij i upuść

Możesz przeciągnąć obiekt „Przeciągnij mnie” do innych obszarów w ramce iframe.

Rysunek 4: Szpiegowanie obiektów Katalon Studio

Katalon Studio Object Spy wykrył i przechwycił ramkę iframe, jak pokazano powyżej na rysunku 3.

Typowe rozwiązanie pomoże ci w identyfikacji elementów źródłowych i docelowych oraz w kontekście prawidłowej sesji przeglądarki. Narzędzia takie jak Selenium oferują funkcję przeciągnij i upuść, aby w pewnym stopniu rozwiązać ten problem.

Rozwiązanie do testowania iframe za pomocą Katalon Studio:

Poniżej znajduje się kilka wskazówek dotyczących interakcji z przeciąganiem i upuszczaniem obiektów w ramce iframe za pomocą Katalon Studio.

importuj com.kms.katalon.core.testobject.ObjectRepository jako ObjectRepository
zaimportuj com.kms.katalon.core.mobile.keyword.MobileBuiltInKe words jako Mobile
importuj com.kms.katalon.core.webservice.keyword.WSBuiltInKe Keywords jako WS
importuj statyczny com.kms.katalon.core.testobject.ObjectRepository.findTestObject
importuj statyczny com.kms.katalon.core.testdata.TestDataFactory.findTestData
importuj statyczny com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
zaimportuj com.kms.katalon.core.testcase.TestCase jako TestCase
importuj com.kms.katalon.core.testdata.TestData jako TestData
import com.kms.katalon.core.testobject.TestObject jako TestObject
importuj com.kms.katalon.core.webui.keyword.WebUiBuiltInKe Keywords jako WebUiBuiltInKe Keywords
importuj com.kms.katalon.core.webui.keyword.WebUiBuiltInKe Keywords jako WebUI
import Internal.GlobalVariable jako GlobalVariable
„Otwórz przeglądarkę i przejdź do strony interfejsu użytkownika jQuery”
WebUI.openBrowser („http://jqueryui.com/”)
„Maksymalizuj bieżące okno przeglądarki”
WebUI.maximizeWindow ()
„Kliknij link \” Draggle \ ”link”
WebUI.click (findTestObject ('Page_jQuery_Homepage / lnk_Draggable'))
„Przełącz do panelu iframe z wersji demonstracyjnej”
WebUI.switchToFrame (findTestObject („Page_jQuery_Drag and Drop Example / ifr_Demo Frame”), GlobalVariable.G_Timeout_Small
„Przeciągnij i upuść element iframe w inne miejsce”
WebUI.dragAndDropByOffset (findTestObject („Page_jQuery_Drag and Drop Example / div_Frame_Draggable”), 200, 38)
WebUI.closeBrowser ()

Skrypt testowy wygenerowany powyżej służy do funkcji przeciągania i upuszczania. Katalon Studio umożliwia edycję kroków weryfikacji między skryptem w celu weryfikacji określonego obiektu w ramce iframe.

# 3) Problemy wyskakujące i podejście do rozwiązania

Co to jest wyskakujące okienko?

Wyskakujące okienko to obszar wyświetlania graficznego interfejsu użytkownika (GUI), zwykle małe okno, które pojawia się („wyskakujące okienko”) na pierwszym planie interfejsu wizualnego.

Masz problemy z wyskakującym okienkiem?

Jako człowiek masz możliwość reagowania na działania występujące podczas testowania, takie jak nieoczekiwanie pojawiające się okienko wyskakujące. Ale jako kod napisany przez programistę możesz robić tylko to, co programista ci nakazał, a to ogranicza twoją zdolność reagowania na nieoczekiwane zachowania, takie jak wyskakujące okienko.

Poniżej znajduje się kilka często używanych wyskakujących przykładów, które mogą stanowić przeszkodę w automatyzacji sieci:

1) Nowe okno przeglądarki

2) Alert: Często używane jest okno ostrzeżenia, aby upewnić się, że informacje docierają do użytkownika

3) Niestandardowe modalne okno dialogowe: Modalne okno dialogowe to okno dialogowe / wyskakujące okno wyświetlane na górze bieżącej strony

4) Native pop-up

Rozwiązanie do obsługi Pop-up z Katalon Studio:

Poniżej znajduje się kilka wskazówek dotyczących interakcji z wyskakującymi oknami za pomocą Katalon Studio.

import com.kms.katalon.core.annotation.SetUp jako SetUp
import com.kms.katalon.core.annotation.TearDown jako TearDown
import com.kms.katalon.core.model.FailureHandling jako FailureHandling
importuj com.kms.katalon.core.testobject.ObjectRepository jako ObjectRepository
importuj com.kms.katalon.core.webui.keyword.WebUiBuiltInKe Keywords jako WebUiBuiltInKe Keywords
importuj com.kms.katalon.core.webui.keyword.WebUiBuiltInKe Keywords jako WebUI
zaimportuj com.kms.katalon.core.mobile.keyword.MobileBuiltInKe words jako Mobile
importuj com.kms.katalon.core.webservice.keyword.WSBuiltInKe Keywords jako WS
importuj statyczny com.kms.katalon.core.testobject.ObjectRepository.findTestObject
importuj statyczny com.kms.katalon.core.testdata.TestDataFactory.findTestData
importuj statyczny com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
zaimportuj com.kms.katalon.core.testcase.TestCase jako TestCase
importuj com.kms.katalon.core.testdata.TestData jako TestData
import com.kms.katalon.core.testobject.TestObject jako TestObject
zaimportuj java.util.Formatter.DateTime jako DateTime
import Internal.GlobalVariable jako GlobalVariable
„Otwórz przeglądarkę i przejdź do podekscytowanej witryny”
WebUI.openBrowser („http://www.elated.com/articles/javascript-tabs/”)
„Maksymalizuj bieżące okno przeglądarki”
WebUI.maximizeWindow ()
Kliknij przycisk „Tweetuj” w ramce iframe
WebUI.click (findTestObject ('Page_Elated / lnk_Tweet'))
„Przejdź do okna o tytule \” Udostępnij link na Twitterze \ ”
WebUI.switchToWindowTitle („Udostępnij link na Twitterze”)
'Wpisz nazwę użytkownika'
WebUI.setText (findTestObject („Page_Share link na Twitterze / txt_Twitter_Login_Username”), e-mail)
'Wprowadź hasło'
WebUI.setText (findTestObject („Page_Share link na Twitterze / txt_Twitter_Login_Password”), hasło)

Wygenerowany powyżej skrypt testowy pokazujący użycie wbudowanych słów kluczowych Katalon Studio.

Np .: wbudowane słowo kluczowe switchToWindowTitle pomaga rozwiązać problem wyskakującego okienka.

Zagnieżdżanie problemów XPath i podejście do rozwiązania

Co to jest XPATH?

Wyrażenie XPath jest mechanizmem do nawigacji i wybierania węzłów z dokumentu XML lub może być użyte do zlokalizowania elementów HTML.

Oto przykład zagnieżdżonego elementu:

1 
2 10

# 4) Problemy z identyfikacją głęboko zagnieżdżonych elementów

Trudno jest zidentyfikować element, do którego chcesz uzyskać dostęp, zwłaszcza gdy są one głęboko zagnieżdżone, jak pokazano powyżej w skrypcie jako element „a”.

Ręczne pisanie XPath może być trudne, jeśli nie masz solidnej wiedzy na temat XPath, aby uzyskać dostęp do tego konkretnego elementu „a” za pomocą narzędzia do testowania automatyzacji.

Jak łatwo zidentyfikować zagnieżdżone elementy?

  • Użyj XPath: XPath to skuteczny sposób na znalezienie elementów, jeśli nie można ich zidentyfikować za pomocą identyfikatora, nazwy lub innego atrybutu ORAZ, gdy są głęboko zagnieżdżone. Jednak ręczne zidentyfikowanie ścieżki jest trudne bez odpowiedniego narzędzia LUB wkładu ze strony inżynierów, którzy zbudowali funkcje.
  • Użyj Katalon Studio: Katalon Studio może wygenerować inteligentny i zoptymalizowany XPath. Identyfikuje element na podstawie najbliższego jednoznacznie zidentyfikowanego węzła nadrzędnego, więc nie musisz przeszukiwać drzewa DOM.
Ryc. 7: Szpieg obiektowy Katalon Studio

Katalon Studio automatycznie wygenerował zoptymalizowaną XPath, gdy szpiegujesz obiekt „Zarejestruj się teraz”.

To projekt demonstracyjny zbudowany przy użyciu Katalon Studio. Jego celem jest pomoc w radzeniu sobie z wyżej wymienionymi problemami z automatyzacją testów interfejsu WWW. Możesz pobrać Katalon Studio i projekt demo z linku poniżej.

  • Bezpłatny link do pobrania - Katalon Studio
  • Również pobierz - Projekt demonstracyjny

Wniosek:

Chociaż automatyzacja testowania w Internecie może być trudna, mamy nadzieję, że rozwiązania zaproponowane w tym artykule mogą pomóc w rozwiązaniu typowych problemów z automatyzacją testów w sieci i wnieść wartość do automatyzacji testów.

Obejrzyj ten praktyczny film wideo na temat unikania typowych zagrożeń związanych z automatyzacją interfejsu WWW

= >> Kliknij tutaj, aby obejrzeć wideo

O autorze: To jest gościnny artykuł Abhisheka Kumara. Jest kierownikiem produktu w KMS Technology. Łączy wiedzę z zakresu zarządzania strategicznego i taktycznego z silnymi kwalifikacjami w zakresie tworzenia oprogramowania, testowania oprogramowania, automatyzacji testów, zarządzania produktem, inicjowania nowych przedsięwzięć, rozwoju biznesu, zarządzania projektami i ogólnych operacji.

Możesz wypróbować to bezpłatne narzędzie do testowania automatyzacji aplikacji internetowych lub mobilnych i dać nam znać, jeśli masz jakieś problemy / zapytania podczas korzystania z niego.

Czytaj więcej: Pięć najważniejszych wyzwań w automatyzacji testów

Źródło: Jak rozwiązać typowe problemy z automatyzacją testów interfejsu sieciowego przy użyciu darmowego zestawu narzędzi Katalon Studio