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ú csomóponti 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 gyorsan 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 oktatóanyag – NodeJs telepítése
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 – NodeJs 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 # Ellenőrizze a VSC-kódot: 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ínész-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 mind a fejes (nem fej nélküli), mind a fej nélküli króm böngészőkkel kompatibilis. Headless 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 projekt minta beállításának 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 Puppeteer programot: 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 a 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üzeneteket, é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árja meg a browser.close(); console.log('3. lépés – a 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. 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ép rögzítésre kerül, és a gyökérkönyvtárban „'screenshot_lambda.png” néven tárolódik.

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 () => { //Hozzon létre böngésző- és oldalobjektum-példányt, és keresse meg az URL-t 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/'); //Adja meg az amazon keresési feltételeit, hagyja, hogy searchBoxAmazon = várja az oldaltWeb.waitForXPath("//* /input[@id='twotabsearchtextbox']",{ látható: igaz }); if (searchBoxAmazon === null) { console.log('Az Amazon képernyője nem jelenik meg'); } else{ várja a searchBoxAmazon.type(" Tesztkönyv"); console.log('A keresési feltételek megadva'); } //A keresés gombra kattintva hagyja, hogy btnSearchAmazon = várja az oldaltWeb.waitForXPath("//*/input[@id='nav-search-submit- button']",{ látható: igaz }); if (btnSearchAmazon === null) { console.log('A keresőgomb nem jelenik meg'); } else{ await btnSearchAmazon.click(); console.log('Kattintott a keresés gombon'); } //Kattintson egy adott keresési eredményre, hagyja, hogy myBookAmazon = várja az oldaltWeb.waitForXPath ("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ látható: true }) if (myBookAmazon === null) { console.log('A könyv nem elérhető') ; } else{ várja a myBookAmazon.click(); console.log('Kattintson az adott könyvre a megrendeléshez'); } // Annak megállapítása, hogy az új lap megnyílt-e const pageTarget = pageWeb.target(); const newTarget = várakozás böngészőWeb.waitForTarget(target => target.opener() === pageTarget); //az új oldal objektum lekérése: const page2 = await newTarget.page(); await page2.setViewport({ szélesség: 1280, magasság: 800 }); //Kosárba helyezés let addToCartAmazon = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ látható: igaz }); if (addToCartAmazon === null) { console.log('Kosárba helyezés gomb nem érhető el'); } else{ console.log('Kattintson a Kosárba tétel gombra'); várjon addToCartAmazon.click(); } //A kosárba tétel folyamatának ellenőrzése let successMessageAmazon = await page2.waitForXPath("//*[contains(text(),'Hozzáadva a kosárhoz')]",{ látható: igaz }); if (successMessageAmazon === null) { console.log('Az áru nincs hozzáadva a kosárhoz'); } else{ console.log('Az áru sikeresen bekerült a kosárba'); } // Kosár számának rögzítése let cartCountAmazon = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ látható: igaz}); let valueCount = várjon page2.evaluate(el => el.textContent, cartCountAmazon) console.log('Kosárszám: ' + valueCount); cartCountAmazon.focus(); await page2.screenshot({ elérési út: screenshotFile }); await pageWeb.waitForTimeout(3000); várj oldalra2.close(); wait 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 részleteit.

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

E-mail címed nem kerül nyilvánosságra. Kötelező kitölteni *

Lapozzon a lap tetejére