Headless Chrome


59 wersja przeglądarki Chrome przyniosła tryb headless. Zobaczmy co to takiego i przyjrzyjmy się kilku przykładom zastosowań, praktycznych nie tylko z perspektywy SEO.

Co to jest Headless Chrome?

Headless Chrome to tryb korzystania z przeglądarki Chrome bez chrome, czyli graficznego interfejsu użytkownika (GUI). Tryb ten oddaje do dyspozycji wszystko, co potrafi nowoczesna przeglądarka internetowa, umożliwiając jednocześnie wykorzystywanie w sposób mniej lub bardziej zautomatyzowany.

Wiadomość o pojawieniu się trybu headless ucieszyła chyba wszystkich. Wcześniej mogliśmy korzystać jedynie z projektów opensource, takich jak phantomjs. Do phantoma mam wielki sentyment, opierałem na nim swoje skrypty testujące. Niestety projekt ten, z racji prowadzenia jako hobby, nie rozwijał się szczególnie szybko (co oczywiście zrozumiałe). Pojawienie się takiej możliwości w Chrome, za którym stoi Google wraz ze swoim opasłym portfelem i rzeszą inżynierów, oznacza nowe rozdanie. Nie tylko w formie szybszego rozwoju w samym Chrome, ale też jako presja na konkurencyjnych dostawców przeglądarek (Mozilla także pracuje nad headless dla Firefoksa.)

Jak zacząć z Headless Chrome?

Do rozpoczęcia przygody z Headless Chrome potrzebna będzie wzmiankowana wersja 59 w przypadku systemów Linux i MacOS lub wersja 60 w przypadku Windows. Najprostsza komenda wygląda tak:

$ chrome --headless --disable-gpu --remote-debugging-port=9222 https://www.example.com

W rozbiciu na parametry:

$ chrome \
  --headless \                   # uruchamia try headless
  --disable-gpu \                # tymczasowo potrzebne
  --remote-debugging-port=9222 \ # ustawia port dla devtools
  https://www.example.com        # adres do odwiedzenia, domyślnie będzie to about:blank

Parametr --disable-gpu póki co jest potrzebny jako tymczasowe obejście kilku bugów - zainteresowani mogą śledzić progres tu i tu.

Oczywiście sama komenda chrome nie zadziała z uwagi na fakt, że co system, to obyczaj :). Z tego względu najlepiej zrobić alias w .bashrc:

alias chrome='/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome'

Po wpisaniu powyższej komendy w terminal istnieje możliwość otworzenia adresu http://localhost:9222, co pozwoli na interakcje z DevTools i sterowanie headlessową sesją.

Przykłady zastosowania w linii komend

Zrzuty ekranu

Do robienia zrzutów ekranu można posłużyć się argumentem --window-size=x,y, który definiuje szerokość i wysokość viewportu. Dzięki temu możliwe jest łatwe sprawdzenie jak wygląda dana strona na różnych urządzeniach. Polecam tą listę jako źródło inspiracji.

Parametr --screenshot sprawi, że zrzut ekranu zostanie zapisany do pliku screenshot.png. To domyślne zachowanie da się zmienić poprzez ustawienie wartości parametru, np. --screenshot=plik.png.

Niestety póki co nie da się zrzucić całej strony (tj. łącznie z tym, co po przełamaniu ekranu) przy użyciu jednego polecenia - takie coś wymaga oskryptowania.

Samsung Galaxy S4 I9500

$ chrome --headless --disable-gpu --screenshot --window-size=360,640 --hide-scrollbars https://www.example.com

iPhone 6 Plus

$ chrome --headless --disable-gpu --screenshot --window-size=414,736 --hide-scrollbars https://www.example.com

Zrzut dokumentu do pliku PDF

$ chrome --headless --disable-gpu --print-to-pdf=plik.pdf https://www.example.com

Zawartość DOM

$ chrome --headless --disable-gpu --dump-dom https://www.example.com

Powyższe zrzuci na stdout zupę tagów HTML w zakresie <body>...</body>.

Zastosowanie w formie skryptów

Skrypty są niewątpliwie tym miejscem, w którym tryb headless błyszczy najbardziej. Sprawowanie podstawowej kontroli nad przeglądarką w sesji headlessowej umożliwia wzmiankowany już powyżej adres http://localhost:9222. Istnieją jednakże inne, znacznie bardziej efektywne metody, dostępne w kilku językach programowania.

SeleniumHQ - Selenium is a set of different software tools each with a different approach to supporting test automation - dokumentacja, Selenium można implementować w językach Java, C#, Python, Ruby, PHP, Perl, JavaScript.

chrome-remote-interface - Chrome Debugging Protocol interface for Node.js - repozytorium.

Lighthouse - Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices - repozytorium.

chromeless - 🖥 Chrome automation made simple. Runs locally or headless on AWS Lambda - repozytorium - JavaScript (NodeJS).

Każdy z powyższych zasobów dysponuje szeregiem przykładów automatyzacji, takimi jak:

  • scrappowanie Google
  • wykonywanie zrzutów ekranu
  • wykonywanie automatycznych interakcji przy użyciu wskaźnika myszki
  • wprowadzanie tekstu do pól formularzy

Nietrudno się zatem domyślić w jakim kierunku można z tym iść:

  • testowanie poprawności działania formularzy leadowych na stronach docelowych PPC/mailingów
  • testowanie bardziej złożonych formularzy, rozciągniętych na kilka kroków (wraz z dokumentowaniem w formie obrazkowej i badaniem szybkości ładowania się kolejnych kroków)
  • testowanie poprawności procesu zakupowego, w tym także bramek płatniczych (wskazany sandbox :)

Oczywiście nic nie stoi na przeszkodzie aby takie testy rozpisać osobno dla viewportu urządzenia dektopowego i osobno dla komórkowych, a każdy wynik logować do pliku lub wysyłać emailem do zainteresowanych osób.

Boty, boty wszędzie

W miarę pojawiania się coraz nowych zestawów narzędzi, które wykorzystują moc drzemiącą w headlessowych przeglądarkach, naturalną rzeczą jest obniżanie się progu wejścia do wykorzystania takich zabawek w niekoniecznie pozytywnych celach.

Punkt widzenia zależy jak zwykle od punktu siedzenia - dla biznesu scrappującego ofertę konkurencji jest to normalny sposób pozyskiwania publicznie dostępnej informacji, dla źródła tej informacji już niekoniecznie ;) - więc nie ma sensu farbować tu kapeluszy na czarno czy biało. Fakty są jakie są, dlatego na koniec odsyłam zainteresowanych do szalenie interesującego wątku na StackOverflow, w którym podjęto temat identyfikacji botów opartych na silniku headlessowych przeglądarek. Takich botów będzie tylko więcej.

Warto zważyć jeszcze jeden aspekt - jeżeli na chwilę obecną rozdawana za darmo przeglądarka oferuje takie możliwości, to co tak naprawdę może potrafić ten jeden najważniejszy bot? 🙈 🙉 🙊