Menu

Jak zlokalizować elementy w przeglądarkach Chrome i IE do tworzenia skryptów selenium - Samouczek Selenium # 7

how locate elements chrome

To jest samouczek nr 7 z naszej serii szkoleń Selenium Online. Jeśli chcesz sprawdzić wszystkie samouczki Selenium z tej serii, sprawdź ta strona .

W poprzednim samouczku staraliśmy się rzucić światło na różne typy lokalizatorów w Selenium i ich mechanizmy lokalizacyjne do tworzenia skryptów testowych. Samouczek polegał głównie na krótkim wprowadzeniu różnych typów lokalizatorów, takich jak ID, klasy, ścieżki X, teksty linków , Selektory CSS itp. oraz ich identyfikację.

Kontynuując nasz następny samouczek, skorzystamy z okazji, aby przedstawić Wam rozszerzenie strategii lokalizowania. Tak więc w następny tutorial, zbadalibyśmy mechanizm lokalizowania elementów internetowych w Google Chrome i Internet Explorer.

Znajdź elementy w przeglądarkach Chrome i IE

Wszyscy doskonale zdajemy sobie sprawę z szybkiego wzrostu liczby użytkowników Internetu, dlatego interesariusze i programiści tworzą aplikacje internetowe, które prawdopodobnie będą działać na większości przeglądarek.

Dlatego wyobraź sobie sytuację, w której Twoja aplikacja internetowa nie obsługuje przeglądarki Firefox, ale działa dobrze w przeglądarce Chrome i Internet Explorer.

Skrypty do rozmów kwalifikacyjnych i odpowiedzi dla doświadczonych

Jak zamierzasz zautomatyzować taką aplikację za pomocą Selenium? Albo mówiąc konkretnie, jak zamierzasz zlokalizować elementy internetowe w Chrome i Internet Explorer. Dlatego odpowiedź znajduje się w tym samouczku.

Czego się nauczysz:

Lokalizowanie elementów internetowych w przeglądarce Google Chrome

Zacznijmy od zrozumienia strategii lokalizowania w Google Chrome.

Podobnie jak Firebug w Firefoksie, Google Chrome ma swoje własne narzędzie programistyczne które mogą służyć do identyfikowania i lokalizowania elementów internetowych na stronie internetowej. W przeciwieństwie do firebuga, użytkownik nie musi pobierać ani instalować żadnej oddzielnej wtyczki; narzędzie programistyczne jest dostarczane w pakiecie z Google Chrome.

Wykonaj poniższe czynności, aby zlokalizować elementy internetowe za pomocą narzędzia programisty Chrome:

Krok 1: Podstawowym krokiem jest uruchomienie narzędzia programisty Google Chrome. Naciśnij klawisz F12, aby uruchomić narzędzie. Użytkownik mógłby zobaczyć coś takiego jak poniższy ekran.

Pismo selenowe 1

Zwróć uwagę, że zakładka „Element” jest podświetlona na powyższym zrzucie ekranu. Zatem karta elementu jest tą, która wyświetla wszystkie właściwości HTML należące do bieżącej strony internetowej. Przejdź do zakładki „Element”, jeśli nie jest otwierana domyślnie podczas uruchamiania.

Możesz także uruchomić narzędzie programistyczne, klikając prawym przyciskiem myszy w dowolnym miejscu na stronie internetowej i wybierając opcję „Sprawdź element”, która jest bardzo podobna do inspekcji firebuga.

Krok 2: Następnym krokiem jest zlokalizowanie żądanego obiektu na stronie internetowej. Jednym ze sposobów, aby zrobić to samo, jest kliknięcie prawym przyciskiem myszy żądanego elementu sieci i sprawdzenie. Właściwość HTML należąca do tego elementu WWW byłaby podświetlona w narzędziu deweloperskim. Innym sposobem jest najechanie kursorem na właściwości HTML, a pasujący element sieciowy zostanie podświetlony. W ten sposób użytkownik może zlokalizować identyfikatory, klasy, linki itp.

Pismo selenowe 2

Tworzenie ścieżki XP w narzędziu deweloperskim

Omówiliśmy już Xpaths w ostatnim samouczku. Omówiliśmy też strategię jego tworzenia. Tutaj oparlibyśmy naszą dyskusję, aby sprawdzić poprawność utworzonej ścieżki XPath w narzędziu Chrome Developer.

Krok 1: Aby utworzyć XPath w narzędziu deweloperskim, otwórz kartę konsoli.

Krok 2: Wpisz utworzoną ścieżkę Xpath i umieść ją w $ x („// input [@ id =’ Email ’]”)

Pismo selenowe 3

Krok 3: Naciśnij klawisz Enter, aby wyświetlić wszystkie pasujące elementy HTML o określonej ścieżce Xpath. W naszym przypadku jest tylko jeden pasujący element HTML. Najedź kursorem na ten element HTML, a odpowiadający mu element sieciowy zostanie podświetlony na stronie internetowej.

Pismo selenowe 4

W ten sposób można utworzyć wszystkie ścieżki Xpath i sprawdzić ich poprawność w konsoli.

Informacje związane z kodem CSS odpowiadającym elementowi internetowemu można znaleźć w narzędziu Chrome dla programistów. Zobacz poniższy zrzut ekranu:

Pismo selenowe 5

Lokalizowanie elementów sieci Web w programie Internet Explorer

Podobnie jak Google Chrome, Internet Explorer ma również własne narzędzie programistyczne które mogą służyć do identyfikowania elementów internetowych na podstawie ich właściwości na stronie internetowej. Użytkownik nie musi pobierać ani instalować żadnej oddzielnej wtyczki, narzędzie programistyczne jest dostarczane w pakiecie z programem Internet Explorer.

Wykonaj poniższe czynności, aby zlokalizować elementy internetowe za pomocą narzędzia deweloperskiego IE:

Krok 1: Podstawowym krokiem jest uruchomienie narzędzia IE Developer. Naciśnij klawisz F12, aby uruchomić narzędzie. Użytkownik mógłby zobaczyć coś takiego jak poniższy ekran.

Pismo selenowe 6

Zwróć uwagę, że zakładka „HTML” jest podświetlona na powyższym zrzucie ekranu. Zatem zakładka HTML to ta, która wyświetla wszystkie właściwości HTML należące do bieżącej strony internetowej. Rozwiń zakładkę HTML, aby wyświetlić właściwości wszystkich elementów WWW należących do bieżącej strony internetowej.

Krok 2: Następnym krokiem jest zlokalizowanie żądanego obiektu na stronie internetowej. Jednym ze sposobów jest wybranie elementu HTML, a pasujący element sieciowy zostanie podświetlony. W ten sposób użytkownik może zlokalizować identyfikatory, klasy, linki itp. Sprawdź na poniższym zrzucie ekranu, w którym pole tekstowe wiadomości e-mail zostanie podświetlone, gdy tylko wybierzemy odpowiednią właściwość HTML.

Pismo selenowe 7

Innym sposobem na zlokalizowanie elementu internetowego jest kliknięcie przycisku „Znajdź” znajdującego się w górnym menu i kliknięcie żądanego elementu internetowego na stronie internetowej. W rezultacie odpowiednie właściwości HTML zostaną podświetlone.

Pismo selenowe 8

W ten sposób, korzystając z narzędzia programisty, użytkownik może znaleźć identyfikatory, klasy, nazwy tagów i może tworzyć ścieżki Xpath do lokalizowania elementów sieci.

Podobnie jak narzędzie programistyczne Chrome, narzędzie programistyczne IE ma oddzielną sekcję, która wyświetla informacje związane z CSS. Sprawdź poniższy zrzut ekranu.

Pismo selenowe 9

Wniosek

W tym samouczku rzuciliśmy światło na podstawowe strategie lokalizowania elementów za pomocą narzędzia programisty dla Google Chrome i Internet Explorera.

Następny samouczek nr 8 : Kontynuując nasz następny samouczek, z przyjemnością przedstawimy bardziej zaawansowane narzędzie o nazwie WebDriver. WebDriver to jedno z najbardziej atrakcyjnych narzędzi do testowania automatyzacji. Tak więc w naszym następnym samouczku będziemy kierować i oprzeć nasze dyskusje wokół WebDriver i wszystkich jego drobiazgów.

rekomendowane lektury

^