Witajcie moi drodzy, tym razem wpis o ciekawym narzędziu i według wielu jeśli chodzi o szybkość nie ma sobie równych. Puppeteer to kolejne narzędzie do kolekcji, w typie ‘zero-config’.
Jedyną znaczącą wadą jest fakt obsługi jednego typu drivera.
Program to Node Library z API wysokiego poziomu komunikujące się z przeglądarkami opartymi o Chromium. No właśnie a gdzie Firefox ? 🙁
Dobra zaczynamy, przede wszystkim potrzebujemy npm czyli managera pakietów od Node.js.
https://nodejs.org/en/ przechodzimy na tą stronę i pobieramy noda.
Pobieranie node.js
Moim wyborem padła edycje LTS, gdyż jest rekomendowana, dla większości śmiertelników. Instalujemy pewnie standardowo.
Jak zwykle zamieszam informację o rozmiarze instalator jest to 18,6 mb dla tej wersji.
Pobieranie dodatkowych pakietów
Zaznaczyłem wtedy opcję z instalacją chocolatey, jest to manager, który może się kiedyś przydać 🙂
Narzędzi jest całkiem sporo, więc u mnie całość trwa, dłuższą chwilę.
Możecie zminimalizować, jeśli zdecydowaliście się na te narzędzia, otwieramy konsolę i wpisujemy npm, w celu weryfikacji poprawności instalacji.
Weryfikacja poprawności npm oraz instalacja puppeteer
Jak widać, posiadamy wszystko czego potrzebujemy do instalacji Puppeteer.
Instalacje przeprowadzamy, za pomocą polecenia : npm i puppeteer
Jak widzimy, sam pobiera sobie pakiet przeglądarki Chromium.
Instalacja została zakończona, jednak potrzebujemy czegoś jeszcze.
wpisujemy w konsole : npm i puppeteer-core
Doinstalowanie wymaganego puppeteer-core
No i co ? Co tyle ? Tak wystarczyło nam node.js, dwa polecenia i mamy gotowe narzędzie 🙂
W celu ułatwienia tworzenia plików z rozszerzeniem, zaznaczamy odpowiednią opcję przechodząc do dowolnego folderu.
Tworzymy nowy plik tekstowy i zmieniamy nazwę na : pierwszytest.js
Otwieramy ulubionym edytorem tekstu, następnie wklejamy taki kod :
Przykładowy pierwszy test
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://bing.com');
await page.screenshot({path: 'zrzutekranu.png'});
await browser.close();
})();Zapisujemy i wracamy do konsoli. Tam przechodzimy do folderu z testem lokalizacja to :
Jeśli jesteśmy, już w odpowiednim folderze, odpalamy test za pomocą polecenia : node nazwatestu.js
Jest to błąd, że w danej lokalizacji w tym samym folderze nie ma node_modules, folderu ze wszystkimi modułami node.js
Ja preferuje zrobić to na dysku C:\
Przechodzimy za pomocą cd c:\ do dysku C.
Odpalamy nasz test pierwszytest.js no i wszystko działa.
Jednak test z jakiś powodów nie chce się zamknąć.
Aby rozwiązywać problemy, notatnik się nie sprawdzi, potrzebujemy jakiegoś IDE.
A tak nawiasem suchar na szybko : Żona wysyła męża-programistę do sklepu i mówi:
- Kup chleb, a jak będą mieli jajka, to kup dziesięć.
A mąż programista odpowiada:
- No to IDE
Dobrym pomysłem, będzie skorzystanie z Visual Studio Code.
Doinstalowanie Visual Studio Code + wtyczka
https://code.visualstudio.com/
Przyda nam się rozszerzenie ułatwiające kodowanie.
Dobra oto znaleziony i zmodyfikowany przeze mnie sampel.
Na początek jak nasz test wygląda :
Bardziej rozbudowany test
Elegancki screen się zapisał.
Kod naszych testów :
/**@name Booking.com search
*@desc Finds accommodations in Berlin on Booking.com, takes a screenshot and logs the top 10.
*/
const puppeteer = require('puppeteer')
const screenshot = 'booking_results.png'
try {
(async () => {
const browser = await puppeteer.launch({slowMo: 250, headless: false, args: ['--start-fullscreen', '--window-size=1920,1040'] });
const page = await browser.newPage();
await page.setViewport({ width: 1920, height: 1040 });
await page.goto('https://booking.com');
await page.type('#ss', 'Berlin');
await page.click('.sb-searchbox__button');
await page.waitForSelector('#hotellist_inner');
await page.screenshot({ path: screenshot });
const hotels = await page.$$eval('span.sr-hotel__name', anchors => {
return anchors.map(anchor => anchor.textContent.trim()).slice(0, 10)
})
console.log(hotels)
// await browser.close()
console.log('See screenshot: ' + screenshot)
})()
} catch (err) {
console.error(err)
}
Skrótowy opis co robi nasz test
W skrócie co my tu mamy ?
Deklaracja zmiennej puppeteer która dziedziczy właściwości po pakiecie puppeteer, który już wcześniej instalowaliśmy.
Druga zmienna to screenshot i tam przypisujemy nazwę pliku screenshota.
Całość wykonania opakowujemy w funkcję asynchroniczną, zwracającą asychroniczny obiekt mapy. Więcej o funkcji tutaj https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Polecenia/funkcja_async
W środku co mamy deklaracje zmiennej browser o awaitach, promisach, może nie tym razem 🙂
Zmienna puppeteer maniupuluje zmienną browser, z metodą launch z parametrami : slowMo czyli spowolnienie wszystkiego o mili sekudy, headless na false (domyślnie jest true) abym mógł te screeny dla Was zrobić. Zaś argumenty to dwa fullscreen oraz druga wykluczona przez pierwszą czyli rozmiar okna.
Następnie deklaracja zmiennej page, tam przypisujemy zmienną browser z metodą nowa strona.
Tutaj viewport ustawienie rozdzielczości ale na F11 nie zdziała.
Dalej przechodzimy metodą goto do jakiegoś adresu.
Następnie używamy metody type do wprowadzenia tekstu, mamy dwa argumenty jeden to lokalizator czyli id, name,xpath itp. drugi to string czyli tekst który ma zostać tam wpisany. Argument #ss z bookingu to id pola to wpisywania tekstu. Więc jak widzimy nasz framwork sam rozpoznaje sobie typ atrybutu. Dalej metoda click argument także lokalizator czyli co ma kliknąć. Następnie metoda wyczekiwania na dostępność selektora. Też argument lokalizator. Kolejna metoda z obiektu page czyli metoda screnshot i opcja to tutaj opcja path nakierowująca na zmienną screenshot.
W tym pliku zapisze to co zrobi metoda screenshot.
Obiekt mapy
Ostatnia deklaracja to obiekt hoteli z obiektu page robimy array, czyli obiekt do tablic i taką tablice funkcją strzałkową przekazujemy do mapy to zwracamy async i wyświetlamy w konsoli. O tym, bo dobrze tego nie opisałem będzie później, bo jednak coś z JavaScriptu muszę wam tutaj napisać, na razie możecie poczekać na wyjaśnienie lub samemu zgłębiać temat. Na końcu w konsoli komunikat żebyś zobaczył screenshota i nazwa.
Poza środkiem jest też catch czyli w przypadku wywalenia się programu.
Akurat w tym przypadku w konsoli dostaniemy ten błąd.
Podsumowanie
Puppeteer to ciekawe rozwiązanie typu minimal configuration / zero configuration, które pozwala w bardzo prosty i przyjemny sposób tworzyć szybkie i zgrabne testy automatyczne aplikacji webowych.
Myślę, że dla samych siebie lub też w firmie warto zapoznać się z ów frameworkiem.
Dostępna jest także strona typu live, z przykładowymi kodami, wraz z możliwością uruchomienia online – > https://try-puppeteer.appspot.com/
W następnym wpisie dotyczącym Puppeteer porowijamy trochę testów, napiszę pare rzeczy związanych z JavaScript i zobaczymy co jeszcze.
Tymczasem dzięki za przeczytanie, udostępnij, skomentuj i do następnego !