Telepítse a Puppeteer alkalmazást – A Puppeteer oktatóprogram 4 és 5 kiváló tanulási útmutatója

A Puppeteer egy nyílt forráskódú node js könyvtár, amely webkaparó eszközökhöz használható. Használható tesztautomatizálásra is webes alkalmazásokban. Napjainkban a Puppeteer használata rohamosan növekszik az automatizált szoftvertesztelési területen. A bábos oktatóanyag megértéséhez alapvető ismeretekre van szükség a parancssorról, a Javascriptről és a HTML DOM-struktúráról. A teljes oktatóanyag az alábbi cikkekre van felosztva. 

Bábos bemutató

1. Tosca oktatóanyag: Bábos áttekintése

Tosca oktatói # 2: Bábos környezeti változók

Tosca oktatói # 3: A Puppeteer Web Scraping és Puppeteer Test Automation áttekintése

Tosca oktatói # 4: Telepítse a Puppeteer programot

Tosca oktatói # 5: Minta bábos projekt

Ebben a Puppeteer oktatóanyagban megismerjük a Puppeteer és annak függőségei telepítésének lépéseit, mint például a NodeJs telepítése, a Puppeteer szerkesztőjének telepítése stb. Ezenkívül a telepítés után létrehozunk és végrehajtunk egy minta Puppeteer projektet.

Telepítse a Puppeteer programot

A Puppeteer szkriptek fejlesztésének megkezdéséhez telepítenünk és konfigurálnunk kell az alábbi összetevőket: 

1. Telepítse a NodeJS-t

2. Telepítse a Szerkesztőt

3. Telepítse a Puppeteer programot

NodeJS telepítése:

A NodeJs egy ingyenes nyílt forráskódú szerverkörnyezet, amely különböző platformokon futtatható. Javascriptet használ a szerver oldalon. A Puppeteer egyfajta NodeJS alkalmazás. Tehát a Puppeteer beállításának első lépése a NodeJS keretrendszer telepítése. A NodeJS keretrendszer több platformon is elérhető, beleértve a Windowst, az Ubuntut, a macOS-t stb. Ebben az összefüggésben a 64 bites Windows operációs rendszer verzióján fogunk dolgozni. A NodeJS telepítésének lépései:

1. lépés # NodeJS letöltése: Kattints itt a NodeJS letöltési hivatkozáson való navigáláshoz. Itt letöltjük a 64 bites Windows telepítőt (.mts). 

Puppeteer bemutató – Telepítse a NodeJs-t
Puppeteer bemutató – NodeJs telepítése

2. lépés# NodeJS telepítése: A letöltés befejezése után a telepítő(.msi) fájlra duplán kattintva telepítenünk kell a NodeJ-ket. A telepítés során az utasítások szerint kell eljárnunk.

3. lépés# NodeJS ellenőrzése: A telepítés befejezése után meg kell nyitnunk a parancssort, és a parancsot „node”-ként kell megadnunk. Ha az alábbi részletek jelennek meg, a telepítés helyes. Ha bármilyen hiba jelenik meg, az azt jelenti, hogy a telepítés nem megfelelő.

Puppeteer oktatóanyag – NodeJs ellenőrzése
Puppeteer oktatóanyag – NodeJ-k ellenőrzése

Szerkesztő telepítése a Puppeteerhez:

A szerkesztő nem más, mint egy eszköz, amely segít a Puppeteer kódok megírásában, összeállításában és futtatásában. Számos eszköz áll rendelkezésre, amelyek java kódszerkesztőként használhatók, beleértve a Visual Studio Code-ot, a Note Pad ++-t, az Edit Plus-t stb. Még az alapértelmezett „Note Pad” alkalmazásban is írhatunk bábjátékos kódot. Ebben az „Install Puppeteer” oktatói, a VSCode-ot fogjuk használni, mivel ingyenes és könnyen kompatibilis a NodeJS alkalmazással. A VSCode nem más, mint a Visual Studio egyik összetevője, amely ingyenesen elérhető. A VSCode telepítésének lépései: 

Step1# Letöltött VSCode: Kattints itt a letöltési hivatkozás megnyitásához és a VSCode Installer kívánt verziójának letöltéséhez az operációs rendszernek megfelelően.

2. lépés # VSCode telepítése: Telepítse a VSCode-ot a rendszer telepítőfájljából, mint bármely más szoftvert. A telepítés során csak az ajánlott beállítással folytassa.

2. lépés # VSC-kód ellenőrzése: A telepítés befejezése után nyissa meg az alkalmazást, és ellenőrizze, hogy megfelelően van-e telepítve.

Puppeteer bemutató - A Puppeteer szerkesztője
Puppeteer oktatóanyag – A Puppeteer szerkesztője

Puppeteer csomagok telepítése:

A puppeteer v1.7.0 verziójától kezdve minden kiadás két csomagot tartalmaz alább:

  • bábjátékos-mag csomag
  • bábjátékos csomag

A Puppeteer mindkét verziója telepíthető a konzolparancsokkal. A Puppeteer telepítéséhez szükséges parancsok: 

Telepítse a Puppeteer-core csomagot: Ez a Node JS könyvtár gyűjteménye, amelyet Java nyelven fejlesztettek ki. Képes a devtools protokollon dolgozni. A Chromium böngésző nem töltődik le a puppeteer-core csomag telepítése közben. A Puppeteer programozott interfésze teljesen meghajtja a bábjátékos-mag könyvtárat. Egy másik fontos korlátozás, hogy a puppeteer-core jellemzők nem módosíthatók a PUPPETEER_* környezeti változók egyikének megváltoztatásával sem. 

Telepítési parancs: npm install puppeteer-core

Jegyzet: A Puppeteer-core csomag telepítése előtt telepíteni kell a Node JS eszközt.

A Puppeteer termékcsomag telepítése: A Puppeteer a Google által a Chrome böngészők vezérlésére kifejlesztett teljes termék. Mivel a Puppeteer teljes termékcsomagja, a telepítés során a Chrome böngésző legújabb verziói töltődnek le. Ezt követően az installációt a bábszínházi mag hajtja. Lehetőség van a Puppeteer funkciók testreszabására a PUPPETEER_* környezeti változók módosításával. 

Telepítési parancs: npm install puppeteer

Ebben az „Install Puppeteer” oktatóanyagban a Puppeteer csomag telepítésén fogunk dolgozni, mivel nincs sok különbség a két verzió között.

Minta bábos projekt

A Puppeteer a fejes (nem fej nélküli) és a fej nélküli króm böngészőkkel egyaránt kompatibilis. Fej nélküliség esetén a böngésző tevékenységei a háttérben zajlanak, azaz a böngésző UI nem látható számunkra. Egyszerűbbé és könnyebbé teszi a dolgot (a böngésző vezérlését) egyetlen lépésben. Ez azt jelenti, hogy ugyanaz (a böngészők vezérlése) több összetett lépéssel is elvégezhető.

A Puppeteer mintaprojekt beállítási lépései az alábbiakban láthatók - 

1. lépés: Hozzon létre egy mappastruktúrát a Sample Puppeteer Project számára: Hozzon létre egy minta gyökérkönyvtárat „SampleProject” néven egy előre meghatározott elérési úton. Ez a gyökérkönyvtár mintabábos projektként fog működni. Ezután a parancssor megnyitása után ebbe a gyökérkönyvtárba kell navigálnunk.

Step2# Telepítse a Puppeteert: Az alábbi paranccsal a Puppeteer teljes csomagját telepíthetjük a gyökérkönyvtárba. Ez a parancs alapvetően letölti az összes nyílt forráskódú NodeJS könyvtárat mintaprojekt mappát. A telepítési folyamat a hálózat sebességétől függően eltart egy ideig. Körülbelül 350 MB adatot fog letölteni. A telepítés után a különböző puppeteer összetevőket és a package-lock.json fájlt tartalmazó node_modules mappa létrejön a minta Pupeteer projekt gyökérmappájában.

Bábos oktatóanyag - Telepítési napló
Bábos oktatóanyag – Telepítési napló

3. lépés: Minta bábos szkript létrehozása: Most írunk egy minta bábos szkriptet, amely meghív a LambdaGeek webhely, minden lépés után megjeleníti a konzol üzeneteit, és rögzíti a képernyőképet. Ebben a példában egy fej nélküli króm-böngésző lesz meghívva a háttérben. A minta Puppeteer forgatókönyv a következő lesz: 

const bábszínész = követelmény('bábos'); //include Puppeteer Library puppeteer.launch({headless:true}).then(async browser => { const pageNew = await browser.newPage(); // Böngésző indítása console.log('Step1 – Open Browser'); / /Az oldalra váró üzenet megjelenítéseNew .setViewport({ szélesség: 1280, magasság: 800 }) vár az oldalraNew .goto('https://lambdageeks.com/'); //LambdaGeeks megnyitása //Képernyőkép rögzítése vár oldalraÚj .screenshot({ elérési út : 'screenshot_lambda.png' }); console.log('2. lépés – Navigáljon a LambdaGeeks programban, és készítsen képernyőképet'); várjon browser.close(); console.log('3. lépés – Böngésző bezárva'); });

Ezt a kódot a Sample Puppeteer projekt gyökérkönyvtárában kell tárolni a fájlnévvel sample_script.js. A Puppeteer-core esetén a forgatókönyv legelején a 'puppeteer' helyett a 'puppeteer-core' szót kell beillesztenünk. A fejes böngészőnél le kell cserélnünk a kódot "{headless:true}” with “{headless:false}”.

4. lépés: Minta Puppeteer Script végrehajtása: A minta szkript végrehajtható a parancssorból az alábbi paranccsal -

npm csomópont sample_script.js

A végrehajtás után a képernyőképet rögzíti és a gyökérkönyvtárban tárolja „screenshot_lambda.png” néven.

Bábos oktatóanyag - Minta bábos projekt
Bábos bemutató – Minta bábos projekt

Most egy másik minta Puppeteer szkriptet mutatunk be az Amazon webalkalmazáson. Ez a szkript az alábbi lépéseket hajtja végre, az egyes lépések ellenőrzésével együtt –

  • Az Amazon alkalmazás meghívása.
  • Keressen egy előre meghatározott könyvben.
  • Tedd kosárba a keresett könyvet.
  • Nyissa ki a kosarat, és ellenőrizze, hogy a könyv elérhető-e a kosárban.
  • Képernyő rögzítése és a böngésző bezárása.

Csak az alábbi forgatókönyvet fogjuk végigjárni. A következő cikkben részletesen megismerjük a különböző végrehajtandó lépéseket. A minta szkript az alábbiakban látható -

/** * @name Keresés az Amazonban */ const puppeteer = request('puppeteer'); const reportPathDir = 'C:\\\\LambdaGeeks\\\\puppteer_proj_sample\\\\output\\\\'; const screenshotFile = 'screen1.png'; try { (async () => { \t//Böngésző- és oldalobjektum-példány létrehozása, és navigálás az URL-címre const browserWeb = await puppeteer.launch({ headless: false }); const pageWeb = await browserWeb.newPage() await pageWeb .setViewport({szélesség: 1280, magasság: 800 }); oldalra várWeb.goto('https://www.amazon.in/'); \t \t//Adja meg az amazon keresési feltételeit \tlet searchBoxAmazon = várja az oldaltWeb .waitForXPath("//*/input[@id='twotabsearchtextbox']",{ látható: igaz }); \tif (searchBoxAmazon === null) \t{ \t\tconsole.log('Az Amazon képernyője nem megjelenítve'); \t} \telse{\t\t \t\tawait searchBoxAmazon.type("Tesztkönyv"); \t\tconsole.log('A keresési feltételek megadva'); \t} \t\ t \t \t//A keresés gombra kattintott \tlet btnSearchAmazon = oldalra várWeb.waitForXPath("//*/input[@id='nav-search-submit-button']",{ látható: igaz }); tif (btnSearchAmazon === null) \t{ \t\tconsole.log('A keresőgomb nem jelenik meg'); \t} \telse{ \t\tawait btnSearchAmazon.click(); \t\tconsole.log( 'A keresés gombra kattintott'); \t}\t \t \t//Kattintson egy adott keresési eredményre \tlet myBookAmazon = await pageWeb.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Kiadás')]",{ látható: igaz }) \tif (myBookAmazon === null) \t{ \t\tconsole.log('A könyv nem elérhető'); \t} \telse{ \t\tawait myBookAmazon.click(); \t\tconsole.log('Kattintson az adott könyvre a megrendeléshez'); \t} \t \t \t// Annak megállapítása, hogy az új lap megnyílt-e \tconst pageTarget = pageWeb.target(); \tconst newTarget = várja a böngészőtWeb.waitForTarget(target => target.opener() === pageTarget); \t//az új oldal objektum lekérése: \tconst page2 = await newTarget.page();\t \tawait page2.setViewport({ szélesség: 1280, magasság: 800 }); \t \t//Kosárba helyezés \tlet addToCartAmazon = várjon page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ látható: igaz }); \tif (addToCartAmazon === null) \t{ \t\tconsole.log('Kosárba helyezés gomb nem érhető el'); \t} \telse{ \t\tconsole.log('Kattintson a Kosárba tétel gombra'); \t\tawait addToCartAmazon.click();\t\t \t} \t\t \t//Kosárba helyezés folyamatának ellenőrzése\t \tlet successMessageAmazon = Várjon page2.waitForXPath("//*[contains(text( ),'Kosárba helyezve')]",{ látható: igaz }); \tif (successMessageAmazon === null) \t{ \t\tconsole.log('Az áru nincs hozzáadva a kosárhoz'); \t} \telse{ \t\tconsole.log('Az elem sikeresen hozzáadva a kosárhoz');\t\t \t} \t \t \t// Kosárszám rögzítése \tlet cartCountAmazon = Várjon page2.waitForXPath ("//*/span[@id='nav-cart-count']",{ látható: igaz}); \tlet valueCount = vár oldal2.evaluate(el => el.textContent, cartCountAmazon) \tconsole.log('Kosárszám: ' + valueCount); \tcartCountAmazon.focus(); \tawait page2.screenshot({ elérési út: screenshotFile }); \t \tawait pageWeb.waitForTimeout(3000); \tawait page2.close(); \tawait pageWeb.close(); várja a böngészőtWeb.close(); })() } catch (e) { console.log(e) }

Jegyzet: A következő cikkekben elmagyarázzuk a szkriptek megírásának lépéseit.

Következtetés:

Ebben a „Puppeteer oktatóanyag” „Install Puppeteer” című bevezető cikkében bemutattuk a különböző Puppeteer csomagok a semmiből történő telepítésének részletes lépéseit. A Puppeteer beállítás különböző összetevő-telepítéseket tartalmaz, például a NodeJs telepítését, a VSCode telepítését, a Puppeteer telepítését, a Puppeteer mintaprojekt létrehozását és végrehajtását. A következő Puppeteer oktatóanyagban részletesen ismertetjük a Puppeteer webkaparó eszközként való használatának lépéseit. kérem kattintson  itt referenciaportálról olvasni.

Írj hozzászólást