Ten materiał powstawał na dwa razy. Przygotowałam notatki i gdy myślałam, że już mam wszystko rozpisane, podrzuciliście mi jeszcze dwa pomysły na to jak łapać „znikające” elementy. Znikające czyli takie, które pojawiają się na chwilę i zaraz znikają.
Spis treści
Jakie elementy znikają?
Pierwszy przykład to wszystkie elementy, które mają się wyświetlać jakąś określoną ilość czasu. Mogą to być komunikaty na stronie, np. „Produkt dodany do koszyka”, które po kilku sekundach znikają z ekranu. Może to również być „kręcioła”, czyli element, który informuje nas o tym, że jakiś proces się „mieli” i musimy poczekać przed wykonaniem kolejnej akcji.
Inny typ „znikających” elementów to taki, który pojawia się i jest widoczny tylko wtedy, gdy fokus myszy jest na jakimś elemencie.
Po co w ogóle namierzać takie elementy?
Czasami będziemy potrzebowali złapać te elementy w konsoli deweloperskiej, by zbudować do nich lokator do testów, np. w Selenium. Możemy potrzebować tego lokatora do sprawdzenia czy element na stronie się pojawił (gdy testujemy właśnie tę funkcjonalność) albo do poczekania aż element zniknie, bo uniemożliwia nam dalszą interakcję z aplikacją webową. Selenium jest szybsze od człowieka i nawet gdy nam się wydaje, że jakiś element zniknął niemal od razu, to skubane Selenium i tak zdąży się wstrzelić w moment kiedy „kręcioła” jeszcze jest na stronie i gdy pola z tego powodu są jeszcze nieklikalne.
Dlaczego ciężko zbudować lokator do takich elementów?
W przypadku „kręcioł” i innych elementów, które na stronie mają być widoczne przez kilka sekund, nie zdążymy ich złapać w narzędziach deweloperskich zanim znikną. A nawet jak zdążymy, to już na pewno nie zdążymy ogarnąć jakie mają klasy, czy cokolwiek, co pozwoliłoby nam te elementy namierzyć. Powinniśmy się też zorientować czy to jedyny element pasujący do danego lokatora. No jak nie jesteśmy szybcy i wściekli, to nie ma szans, żeby to wyszło.
W drugim przypadku, czyli gdy musimy mieć fokus myszy na jakimś elemencie, żeby drugi element był widoczny, problem jest taki, że gdy wchodzimy do narzędzi deweloperskich to właśnie gubimy fokus na elemencie i drugi element znika.
Jak budować lokatory do znikających elementów?
Możemy się wspomóc kilkoma bajerami z narzędzi deweloperskich.
Symulacja wolnego internetu
Czasami to nam wystarczy. Najpierw otwórzmy konsolę deweloperską w Chrome (klawisz F12 lub przyciski Option + ⌘ + C dla MacOS). Przejdźmy do zakładki Network i ustawmy tam sobie symulację zamulającego internetu (Slow 3G).
W sytuacji, gdy używamy Firefoxa, to zobaczymy tam nieco inne opcje niż w Chrome – jest ich trochę więcej, jednak wciąż pozwalają kontrolować prędkość przeglądarki.
Teraz jak odświeżymy stronę albo wykonamy jakąś akcję, która coś będzie przeładowywała, zobaczymy, że wszystko działa dużo wolniej, więc i element na stronie będzie wyświetlał się dłużej. To jednak rzadko wystarcza i jest mało komfortowe. Nadal musimy się ścigać z czasem, ale mamy go trochę więcej.
Dodatkowo, jeśli używamy przeglądarki Safari, to żeby w ogóle zobaczyć konsolę deweloperską, musimy najpierw wejść w ustawienia przeglądarki, wybrać „Preferences” -> „Advanced”, a tam zaznaczyć pole „Show Develop menu in menu bar”. Niestety nie ma tu możliwości symulacji wolnego internetu – w tym celu należy zainstalować osobne narzędzia, które na taką symulację w Safari pozwolą.
Zatrzymanie działania aplikacji
Wróćmy do konsoli deweloperskiej w Chrome. Przejdźmy do zakładki Sources (zakładka Debugger w Firefox) i wykonajmy akcję w aplikacji, która wywoła znikający element. Następnie przenieśmy focus myszki na konsolę deweloperską (czyli w nią kliknijmy) i wciśnijmy F8 na klawiaturze (lub ⌘ + \ na MacOS). To zatrzyma działanie aplikacji i tym samym zatrzyma element, który zostanie na widoku tak długo, aż ponownie nie wciśniemy F8 w zakładce Sources.
Możemy więc przejść do zakładki Elements i tak długo sobie rozkminiać jak zbudować lokator do tego elementu, jak nam się podoba.
Jeszcze lepiej: breakpoint
To jest chyba najfajniejsza metoda: po prostu ustawiamy breakpoint na zmiany w poddrzewie danego elementu (robimy to w zakładce Elements). Może to być nawet element <body> jeżeli nie wiemy gdzie dokładnie te zmiany wystąpią.
Obok elementu w zakładce Elements pojawi się wtedy niebieska kulka sugerująca, że tam właśnie jest breakpoint. Teraz wykonajmy akcję, która wywoła znikający element. Ponieważ teraz wszystkie zmiany w poddrzewie zatrzymują aplikację, prawdopodobnie trzeba będzie kliknąć w niebieską ikonkę play (Resume script execution) albo użyć F8 żeby kontynuować działanie aplikacji, aż zobaczymy nasz znikający element.
Sposób na elementy, na których musi być focus
Przykład takiego elementu znajdziemy tutaj. Chodzi o szukajkę. Gdy zaczniemy czegoś wyszukiwać, np. wpiszemy tam “body”, to od razu pojawią się wyniki. Ale gdy klikniemy w jakimś miejscu na stronie poza tymi wynikami, lista wyników zniknie. I to samo się stanie, gdy zaczniemy klikać w narzędziach deweloperskich, żeby ten element namierzyć.
Na szczęście nie wszystko stracone. Będąc w konsoli deweloperskiej możemy wcisnąć Ctrl + Shift + P (albo ⌘ + Shift + P na macu) i zacząć wpisywać „Emulate a focused page”.
Kliknijmy tę opcję. Teraz, gdy wyświetlimy wyniki wyszukiwania (te, które znikały po kliknięciu gdzieś obok) i przejdziemy do konsoli deweloperskiej je namierzyć, to już nam nie znikną. Niestety tej opcji nie ma w przeglądarkach Firefox i Safari.
Chrome – przeglądarka przyjazna testerom
Tym zdaniem można krótko podsumować temat polowania na znikające elementy w przeglądarkach. Konsola deweloperska Chrome daje najwięcej możliwości łatwego poradzenia sobie z elementami, które pojawiają się tylko na krótką chwilę.
Mieliście już okazję budować lokatory do znikających elementów? Z którego sposobu najczęściej korzystacie? A może macie swój własny? Koniecznie dajcie znać jaki jest wasz patent!