Zainstaluj Puppeteer - doskonały przewodnik po samouczku lalkarza 4 i 5

Puppeteer to biblioteka node js typu open source, której można używać do narzędzi do skrobania stron internetowych. Może być również używany do automatyzacji testów w aplikacjach internetowych. Obecnie wykorzystanie Puppeteera szybko rośnie w zautomatyzowanej przestrzeni testowej oprogramowania. Podstawowa znajomość linii poleceń, Javascript i struktury HTML DOM jest wymagana do zrozumienia samouczka lalkarza. Cały samouczek jest podzielony na poniższe artykuły. 

Samouczek lalkarza

Samouczek Tosca nr 1: Przegląd lalkarza

Tosca Poradnik # 2: Zmienne środowiskowe lalkarza

Tosca Poradnik # 3: Przeszukiwanie sieci lalkarza i automatyzacja testów lalkarza - przegląd

Tosca Poradnik # 4: Zainstaluj Puppeteer

Tosca Poradnik # 5: Przykładowy projekt lalkarza

W tym samouczku Puppeteer dowiemy się, jak zainstalować Puppeteer wraz z jego zależnościami, takimi jak instalacja NodeJs, instalacja edytora Puppeteer itp. Ponadto po instalacji utworzymy i wykonamy jeden przykładowy projekt Puppeteer.

Zainstaluj Puppeteer

Aby rozpocząć tworzenie skryptów Puppeteer, musimy zainstalować i skonfigurować poniższe komponenty - 

1. Zainstaluj NodeJS

2. Zainstaluj edytor

3. Zainstaluj Puppeteer

Zainstaluj NodeJS:

NodeJs to bezpłatne środowisko serwerowe typu open source, które można uruchomić na różnych platformach. Używa javascript po stronie serwera. Puppeteer to jeden z rodzajów aplikacji NodeJS. Tak więc pierwszym krokiem konfiguracji Puppeteer jest instalacja frameworka NodeJS. Framework NodeJS jest dostępny na wiele platform, w tym Windows, Ubuntu, macOS itp. W tym kontekście będziemy pracować nad wersją dla 64-bitowego systemu operacyjnego Windows. Kroki instalacji NodeJS to -

Step1 # Pobierz NodeJS: Kliknij tutaj aby przejść do łącza pobierania NodeJS. Tutaj pobierzemy instalator 64-bitowego systemu Windows (.mts). 

Samouczek lalkarza - Zainstaluj NodeJs
Samouczek lalkarza - Zainstaluj NodeJs

Krok 2# Zainstaluj NodeJS: Po zakończeniu pobierania musimy zainstalować NodeJ, klikając dwukrotnie plik instalatora (.msi). Podczas instalacji musimy postępować zgodnie z instrukcją.

Krok 3# Zweryfikuj NodeJS: Po zakończeniu instalacji musimy otworzyć wiersz poleceń i wpisać polecenie jako „węzeł”. Jeśli pojawiają się poniższe szczegóły, instalacja jest prawidłowa. Jeśli pojawi się jakikolwiek błąd, oznacza to, że instalacja nie jest poprawna.

Samouczek lalkarza - zweryfikuj NodeJs
Samouczek lalkarza - zweryfikuj NodeJs

Zainstaluj edytor dla Puppeteer:

Edytor to nic innego jak narzędzie, które pomaga nam pisać, kompilować i uruchamiać nasze kody Puppeteer. Dostępnych jest wiele narzędzi, które można wykorzystać jako edytor kodu java, w tym Visual Studio Code, Note Pad ++, Edit Plus itp. Nawet możemy napisać kod lalkarza również w domyślnej aplikacji „Note Pad”. W tym „Zainstaluj Lalkarza” Tutorial, użyjemy VSCode, ponieważ jest darmowy i łatwo kompatybilny z aplikacją NodeJS. VSCode to nic innego jak jeden z komponentów Visual Studio, który jest dostępny za darmo. Kroki instalacji VSCode to – 

Step1 # Downloadd VSCode: Kliknij tutaj aby otworzyć łącze pobierania i pobrać żądaną wersję VSCode Installer zgodnie z systemem operacyjnym.

Krok 2 # Zainstaluj VSCode: Zainstaluj VSCode z pliku instalatora w systemie, tak jak każde inne oprogramowanie. Podczas instalacji postępuj tylko z zalecanymi ustawieniami.

Krok 2 # Zweryfikuj VSCode: Po zakończeniu instalacji otwórz aplikację, aby sprawdzić, czy została poprawnie zainstalowana.

Poradnik lalkarza - edytor dla lalkarza
Poradnik lalkarza - edytor dla lalkarza

Zainstaluj pakiety Puppeteer:

Począwszy od wersji 1.7.0 lalkarza, każde wydanie zawiera poniżej dwa pakiety -

  • pakiet rdzenia lalecznika
  • pakiet lalkarza

Obie wersje Puppeteer można zainstalować za pomocą poleceń konsoli. Polecenia do zainstalowania Puppeteera to - 

Zainstaluj pakiet rdzenia Puppeteer: Jest to zbiór biblioteki Node JS, który został opracowany w Javie. Posiada możliwość pracy na protokole devtools. Przeglądarka Chromium nie jest pobierana podczas instalacji pakietu puppeteer-core. Programowy interfejs Puppeteer całkowicie napędza bibliotekę rdzenia lalecznika. Innym ważnym ograniczeniem jest to, że funkcje rdzenia lalecznika nie mogą być zmieniane przez zmianę żadnej ze zmiennych środowiskowych PUPPETEER_ *. 

Polecenie instalacji: npm zainstaluj puppeteer-core

Uwaga: Narzędzie Node JS należy zainstalować przed zainstalowaniem pakietu puppeteer-core.

Zainstaluj pakiet produktów Puppeteer: Puppeteer to kompletny produkt opracowany przez Google do kontrolowania przeglądarek Chrome. Ponieważ jest to kompletny pakiet produktów Puppeteer, najnowsze wersje przeglądarki Chromium są pobierane podczas instalacji. Następnie instalacja jest napędzana przez rdzeń lalkarza. Możliwe jest dostosowanie funkcji Puppeteer poprzez zmianę zmiennych środowiskowych PUPPETEER_*. 

Polecenie instalacji: npm zainstaluj lalkarza

W tym samouczku „Install Puppeteer” będziemy pracować nad instalacją pakietu Puppeteer, ponieważ nie ma wielu różnic między tymi dwiema wersjami.

Przykładowy projekt lalkarza

Puppeteer jest kompatybilny zarówno z przeglądarkami Chrome z głową (bez głowy), jak i bez głowy. W przypadku bezgłowego działania przeglądarki są wykonywane w tle, tzn. Interfejs przeglądarki nie jest dla nas widoczny. To sprawia, że ​​rzecz (sterowanie przeglądarką) jest prostsza i łatwiejsza w jednym kroku. Oznacza to, że to samo (sterowanie przeglądarkami) można wykonać wieloma złożonymi krokami.

Kroki związane z konfiguracją przykładowego projektu Puppeteer pokazano poniżej - 

Krok 1 # Utwórz strukturę folderów dla przykładowego projektu Puppeteer: Utwórz przykładowy katalog główny o nazwie „SampleProject” we wstępnie zdefiniowanej ścieżce. Ten katalog główny będzie działał jako przykładowy projekt lalkarza. Następnie po otwarciu wiersza poleceń musimy przejść do tego katalogu głównego.

Krok 2 # Zainstaluj Puppeteer: Za pomocą poniższego polecenia możemy zainstalować pełny pakiet Puppeteer w katalogu głównym. To polecenie zasadniczo pobiera wszystkie biblioteki NodeJS typu open source w formacie przykładowy projekt teczka. Procedura instalacji zajmuje trochę czasu w zależności od szybkości sieci. Pobierze około 350 MB danych. Po instalacji folder node_modules, który zawiera różne komponenty puppeteer i plik package-lock.json, zostanie utworzony w przykładowym folderze głównym projektu Pupeteer.

Samouczek lalkarza - Dziennik instalacji
Samouczek lalkarza - Dziennik instalacji

Krok 3 # Utwórz przykładowy skrypt lalkarza: Teraz napiszemy przykładowy skrypt lalkarza, który wywołuje LambdaGeeks witryna, wyświetla komunikaty konsoli po każdym kroku i przechwytuje zrzut ekranu. W tym przykładzie w tle zostanie wywołana bezgłowa przeglądarka chromu. Przykładowy skrypt lalkarza będzie wyglądał następująco: 

const lalkarz = wymagaj('lalkarz'); //dołącz bibliotekę lalkarza puppeteer.launch({headless:true}).then(async przeglądarka => { const pageNew = czekaj na przeglądarkę.newPage(); // Uruchom przeglądarkę console.log('Krok 1 - Otwórz przeglądarkę'); / /Wyświetl wiadomość oczekującą na stronęNowy .setViewport({ szerokość: 1280, wysokość: 800 }) oczekująca na stronęNowa .goto('https://techiescience.com/'); //Open LambdaGeeks //Przechwyć zrzut ekranu oczekującego na stronęNowy .screenshot({ ścieżka : 'screenshot_lambda.png' }); console.log('Krok 2 - Przejdź do LambdaGeeks i zrób zrzut ekranu'); oczekuj na przeglądarkę.close(); console.log('Krok 3 - Zamknięto przeglądarkę'); });

Ten kod musi być przechowywany w katalogu głównym projektu przykładowego lalkarza z nazwą pliku przykładowy_skrypt.js. Jeśli chodzi o rdzeń lalkarza, na samym początku scenariusza musimy uwzględnić „rdzeń lalecznika” zamiast „lalkarza”. Aby przeglądarka działała z głową, musimy zastąpić kod „{headless:true}” with “{headless:false}”.

Krok 4 # Wykonaj przykładowy skrypt lalkarza: Przykładowy skrypt można wykonać z wiersza polecenia za pomocą poniższego polecenia -

węzeł npm sample_script.js

Po wykonaniu zrzut ekranu zostanie przechwycony i zapisany w katalogu głównym jako „'screenshot_lambda.png”.

Samouczek lalkarza - przykładowy projekt lalkarza
Samouczek lalkarza - przykładowy projekt lalkarza

Teraz pokażemy kolejny przykładowy skrypt Puppeteer w aplikacji internetowej Amazon. Ten skrypt wykona poniższe kroki wraz z weryfikacjami na każdym etapie -

  • Wywołaj aplikację Amazon.
  • Wyszukaj predefiniowaną książkę.
  • Dodaj wyszukaną książkę do koszyka.
  • Otwórz koszyk i sprawdź, czy książka jest dostępna w koszyku.
  • Przechwyć ekran i zamknij przeglądarkę.

Przejdziemy tylko przez poniższy skrypt. Dowiemy się szczegółowo o różnych krokach do wykonania w następnym artykule. Przykładowy skrypt pokazano poniżej -

/**
 * @name Szukaj w Amazon
*/
const lalkarz = wymagaj('lalkarz');
const reportPathDir = 'C:\\\\LambdaGeeks\\\\puppteer_proj_sample\\\\output\\\\';
const zrzut ekranu = 'screen1.png';
próbować {
  (asynchroniczne () => {
    
\t//Utwórz instancję obiektu przeglądarki i strony i przejdź do adresu URL
    const przeglądarkiWeb = czekaj na lalkarza.launch({headless: false });
    const pageWeb = czekaj na przeglądarkęWeb.newPage()
    czekaj na pageWeb.setViewport({szerokość: 1280, wysokość: 800 });
    czekaj na pageWeb.goto('https://www.amazon.in/');
\T
\t//Wprowadź kryteria wyszukiwania w Amazon
\tlet searchBoxAmazon = oczekuj pageWeb.waitForXPath("//*/input[@id='twotabsearchtextbox']",{ widoczne: prawda });
\tif (searchBoxAmazon === null)
\T{
\t\tconsole.log('Ekran Amazon nie jest wyświetlany');
\T}
\telse{\t\t
\t\tawait searchBoxAmazon.type("Książka testowa");
\t\tconsole.log('Wprowadzono kryteria wyszukiwania');
\t} \t\t
\T
\t//Kliknięto przycisk wyszukiwania
\tlet btnSearchAmazon = oczekuj pageWeb.waitForXPath("//*/input[@id='przycisk-nav-search-submit']",{ widoczne: prawda });
\tif (btnSearchAmazon === null)
\T{
\t\tconsole.log('Przycisk Szukaj nie jest wyświetlany');
\T}
\telse{
\t\tawait btnSearchAmazon.click();
\t\tconsole.log('Kliknięto przycisk wyszukiwania');
\t}\t
\T
\t//Kliknij konkretny wynik wyszukiwania
\tlet myBookAmazon = oczekuj pageWeb.waitForXPath("//*[contains(text(),'Książka kucharska narzędzi do testowania Selenium, wydanie drugie')]",{ widoczne: prawda })
\tif (myBookAmazon === null)
\T{
\t\tconsole.log('Książka nie jest dostępna');
\T}
\telse{
\t\tawait myBookAmazon.click();
\t\tconsole.log('Kliknij konkretną książkę, aby zamówić');
\t} \t
\T
\t// Sprawdź, czy nowa karta została otwarta
\tconst stronaTarget = stronaWeb.target();
\tconst newTarget = czekaj na przeglądarkęWeb.waitForTarget(target => target.opener() === pageTarget);
\t//pobierz nowy obiekt strony:
\tconst page2 = czekaj na nowy cel.page();\t
\tawait page2.setViewport({szerokość: 1280, wysokość: 800 });
\T
\t//Dodaj do koszyka
\tlet addToCartAmazon = czekaj na stronę2.waitForXPath("//*/input[@id='przycisk-dodaj-do-koszyka']",{ widoczne: prawda });
\tif (addToCartAmazon === null)
\T{
\t\tconsole.log('Przycisk Dodaj do koszyka jest niedostępny');
\T}
\telse{
\t\tconsole.log('Kliknij przycisk Dodaj do koszyka');
\t\tawait addToCartAmazon.click();\t\t
\t} \t\t
\t//Sprawdź proces dodawania do koszyka\t
\tlet SuccessMessageAmazon = czekaj na stronę2.waitForXPath("//*[contains(text(),'Dodano do koszyka')]",{ widoczne: prawda });
\tif (successMessageAmazon === null)
\T{
\t\tconsole.log('Produkt nie został dodany do koszyka');
\T}
\telse{
\t\tconsole.log('Pomyślnie dodano przedmiot do koszyka');\t\t
\t} \t
\T
\t// Liczba przechwyceń koszyka
\tlet cartCountAmazon = czekaj na stronę2.waitForXPath("//*/span[@id='liczba-koszyka nawigacyjnego']",{ widoczne: prawda});
\tlet wartośćCount = czekaj na stronę2.ocena(el => el.textContent, CartCountAmazon)
\tconsole.log('Liczba koszyków: ' + wartośćLiczba);
\tcartCountAmazon.focus();
\tawait page2.screenshot({ ścieżka: plik zrzutu ekranu });
\T
\tawait pageWeb.waitForTimeout(3000);
\tawait strona2.zamknij();
\tawait pageWeb.close();
    czekaj na przeglądarkęWeb.close();
  })()
} złapać (e) {
  konsola.log(e)
}

Uwaga: W kolejnych artykułach wyjaśnimy szczegóły dotyczące pisania skryptów.

Wnioski:

W tym artykule wprowadzającym o „Install Puppeteer” z „Puppeteer Tutorial”, wyjaśniliśmy szczegółowe kroki instalacji różnych pakietów Puppeteer od zera. Konfiguracja lalecznika obejmuje różne instalacje komponentów, takie jak instalacja NodeJs, instalacja VSCode, instalacja Puppeteer, tworzenie i uruchamianie przykładowego projektu Puppeteer. W następnym samouczku Puppeteer wyjaśnimy szczegółowe kroki, aby użyć Puppeteer jako narzędzia do skrobania sieci. Proszę kliknąć  tutaj czytać z portalu referencyjnego.

Zostaw komentarz