Selektor elementu

Czym jest selektor elementu?

Wiele funkcjonalności iPresso wymaga wprowadzenia do systemu odpowiedniego selektora elementu, z którym interakcja ma wywołać daną aktywność. Jest to jego swoisty identyfikator.

Przykładowe funkcjonalności iPresso wykorzystujące selektor elementu są związane z różnymi akcjami wywoływanymi na monitorowanych stronach: np. pop-upy wywoływane zdarzeniami lub automatyczne zbieranie danych.

Najpewniejszym, najbardziej specyficznym selektorem jest unikalny id elementu. Jeżeli podczas konstrukcji strony internetowej przewiduje się, że dany element (przycisk, pole wyboru itp.) będzie znaczący dla działania systemu, warto zdefiniować jego id.

Jeżeli strona została już uruchomiona i nie ma możliwości wprowadzenia zmian przez zespół web developerów, można posługiwać się selektorem opartym o unikalną kombinację klas, nazw i typu elementów. Jest to jednak rozwiązanie mało stabilne - po zmianach na stronie dana kombinacja może nie odnosić się już do tego samego elementu.

Mniejsza selektywność tego rozwiązania może jednak być również użyteczna: pozwala na wykorzystanie selektora odnosząc się do wielu elementów, tak aby dana akcja była wywoływana przez interakcję z każdym z nich. Efektywne wykorzystanie tej funkcjonalności wymaga jednak świadomej implementacji na etapie tworzenia strony, jest więc poza zakresem tego artykułu.

W jaki sposób odnaleźć selektor elementu w opublikowanej stronie?

Najprostszym i najpewniejszym sposobem na pobranie selektora elementu jest uruchomienie monitorowanej strony w przeglądarce internetowej i wykorzystanie funkcji zbadaj. Poniżej przedstawiony jest sposób dla dwóch najpopularniejszych przeglądarek: Google Chrome oraz Mozilla Firefox. Korzystając z poniższej metody uzyskasz unikalny selektor - odnoszący się do jednego, konkretnego elementu.

1. Google Chrome:

Wskaż kursorem interesujący cię element, po czym kliknij prawym przyciskiem myszy. Z rozwijanego menu wybierz opcję zbadaj.

W otwartym panelu bocznym, domyślnie zaznaczona linijka będzie odnosić się do wybranego elementu. Wskaż go kursorem myszy i po kliknięciu prawym przyciskiem myszy wybierz “Copy” -> “Copy selector”.

2. Mozilla Firefox

Wskaż kursorem interesujący cię element, po czym kliknij prawym przyciskiem myszy. Z rozwijanego menu wybierz opcję zbadaj.

W otwartym pasku dolnym, domyślnie zaznaczona linijka będzie odnosić się do wybranego elementu. Wskaż ją kursorem myszy i po kliknięciu prawym przyciskiem myszy wybierz “Kopiuj” -> “Selektor CSS”.

3. Skopiowany selektor możesz umieścić w odpowiednim polu w panelu iPresso. Powinien on mieć następującą strukturę:

• w przypadku braku unikalnego id: 

body > div > div > main > footer > div.mdl-mini-footer__right-section > ul > li:nth-child(1)

• w przypadku unikalnego id:

   #fname