Εγκατάσταση Puppeteer - Ένας εξαιρετικός οδηγός εκμάθησης του Puppeteer Tutorial 4 & 5

Tutorial puppeteer - Εικόνα χαρακτηριστικών

Το Puppeteer είναι μια βιβλιοθήκη ανοιχτού κώδικα κόμβου js που μπορεί να χρησιμοποιηθεί για εργαλεία ξύρωσης ιστού. Μπορεί επίσης να χρησιμοποιηθεί για την εκτέλεση αυτοματοποιημένων δοκιμών σε διαδικτυακές εφαρμογές. Τώρα-μια-ημέρα, η χρήση του Puppeteer αυξάνεται ραγδαία στον αυτοματοποιημένο χώρο δοκιμών λογισμικού. Απαιτείται βασική γνώση της γραμμής εντολών, του Javascript και της δομής HTML DOM για την κατανόηση του μαθήματος κουκλοπαίδων. Ολόκληρο το σεμινάριο διαχωρίζεται στα παρακάτω άρθρα. 

Εκπαιδευτικό κουκλοθέατρο

Εκμάθηση Tosca # 1: Επισκόπηση Puppeteer

Τόσκα φροντιστήριο # 2: Μεταβλητές Περιβάλλοντος Puppeteer

Τόσκα φροντιστήριο # 3: Επισκόπηση αυτοματισμού Puppeteer Web Scraping και Puppeteer Test

Τόσκα φροντιστήριο # 4: Εγκαταστήστε το Puppeteer

Τόσκα φροντιστήριο # 5: Δείγμα έργου Puppeteer

Σε αυτό το Tutorial Puppeteer, θα μάθουμε για τα βήματα για την εγκατάσταση του Puppeteer με τις εξαρτήσεις του, όπως εγκατάσταση NodeJs, εγκατάσταση προγράμματος επεξεργασίας για Puppeteer, κ.λπ. Επίσης, μετά την εγκατάσταση, θα δημιουργήσουμε και θα εκτελέσουμε ένα δείγμα έργου Puppeteer.

Εγκαταστήστε το Puppeteer

Για να ξεκινήσουμε την ανάπτυξη σεναρίων Puppeteer, πρέπει να εγκαταστήσουμε και να διαμορφώσουμε τα παρακάτω στοιχεία - 

1. Εγκαταστήστε το NodeJS

2. Εγκαταστήστε το πρόγραμμα επεξεργασίας

3. Εγκαταστήστε το Puppeteer

Εγκατάσταση NodeJS:

Το NodeJs είναι ένα ελεύθερο περιβάλλον διακομιστή ανοιχτού κώδικα που μπορεί να εκτελεστεί σε διαφορετικές πλατφόρμες. Χρησιμοποιεί javascript από την πλευρά του διακομιστή. Το Puppeteer είναι ένα είδος εφαρμογής NodeJS. Έτσι, το πρώτο βήμα της ρύθμισης Puppeteer είναι να εγκαταστήσετε το πλαίσιο NodeJS. Το πλαίσιο NodeJS είναι διαθέσιμο για πολλές πλατφόρμες, συμπεριλαμβανομένων των Windows, Ubuntu, macOS, κ.λπ. Σε αυτό το πλαίσιο, θα εργαστούμε για την έκδοση για λειτουργικό σύστημα Windows 64 bit. Τα βήματα για την εγκατάσταση του NodeJS είναι -

Βήμα 1 # Λήψη NodeJS: Κλίκ εδώ για πλοήγηση στον σύνδεσμο λήψης NodeJS. Εδώ, θα κατεβάσουμε το πρόγραμμα εγκατάστασης παραθύρων 64 bit (.mts). 

Tutorial puppeteer - Εγκαταστήστε NodeJs
Tutorial puppeteer - Εγκαταστήστε NodeJs

Βήμα 2# Εγκατάσταση NodeJS: Μετά την ολοκλήρωση της λήψης, πρέπει να εγκαταστήσουμε NodeJs κάνοντας διπλό κλικ στο αρχείο του προγράμματος εγκατάστασης (.msi). Κατά την εγκατάσταση, πρέπει να προχωρήσουμε σύμφωνα με τις οδηγίες.

Βήμα 3# Επαλήθευση NodeJS: Μετά την ολοκλήρωση της εγκατάστασης, πρέπει να ανοίξουμε τη γραμμή εντολών και να εισαγάγουμε την εντολή ως «κόμβος». Εάν εμφανίζονται οι παρακάτω λεπτομέρειες, η εγκατάσταση είναι σωστή. Σε περίπτωση που εμφανιστεί κάποιο σφάλμα, αυτό σημαίνει ότι η εγκατάσταση δεν είναι σωστή.

Tutorial puppeteer - Επαλήθευση NodeJs
Tutorial puppeteer - Επαλήθευση NodeJs

Εγκατάσταση προγράμματος επεξεργασίας για Puppeteer:

Ένας συντάκτης δεν είναι τίποτα άλλο από ένα εργαλείο που μας βοηθά να γράψουμε, να συντάξουμε και να εκτελέσουμε τους κωδικούς Puppeteer. Υπάρχουν πολλά εργαλεία διαθέσιμα τα οποία μπορούν να χρησιμοποιηθούν ως επεξεργαστής κώδικα java που περιλαμβάνει Visual Studio Code, Note Pad ++, Edit Plus, κ.λπ. Ακόμα και μπορούμε να γράψουμε κουκλοπαίκι στην προεπιλεγμένη εφαρμογή "Note Pad" επίσης. Σε αυτό το σεμινάριο "Εγκατάσταση Puppeteer", θα χρησιμοποιήσουμε τον VSCode καθώς είναι δωρεάν και εύκολα συμβατό με την εφαρμογή NodeJS. Το VSCode δεν είναι παρά ένα συστατικό του visual studio, το οποίο διατίθεται δωρεάν. Τα βήματα για την εγκατάσταση του VSCode είναι - 

Βήμα 1 # Downloadd VSCode: Κλίκ εδώ για να ανοίξετε τον σύνδεσμο λήψης και να κατεβάσετε την επιθυμητή έκδοση του VSCode Installer σύμφωνα με το λειτουργικό σύστημα.

Βήμα 2 # Εγκατάσταση VSCode: Εγκαταστήστε τον κωδικό VSCode από το αρχείο εγκατάστασης στο σύστημα όπως και οποιοδήποτε άλλο λογισμικό. Κατά την εγκατάσταση, προχωρήστε μόνο με τη συνιστώμενη ρύθμιση.

Βήμα 2 # Επαλήθευση κωδικού VS: Μετά την ολοκλήρωση της εγκατάστασης, ανοίξτε την εφαρμογή για να ελέγξετε αν έχει εγκατασταθεί σωστά.

Tutorial puppeteer - Πρόγραμμα επεξεργασίας για Puppeteer
Tutorial puppeteer - Πρόγραμμα επεξεργασίας για Puppeteer

Εγκατάσταση πακέτων Puppeteer:

Από την έκδοση v1.7.0 του puppeteer, κάθε έκδοση περιέχει κάτω από δύο πακέτα -

  • πακέτο puppeteer-core
  • πακέτο κουκλοθέατρου

Και οι δύο εκδόσεις του Puppeteer μπορούν να εγκατασταθούν χρησιμοποιώντας τις εντολές της κονσόλας. Οι εντολές για την εγκατάσταση του Puppeteer είναι - 

Εγκατάσταση πακέτου Puppeteer-core: Είναι μια συλλογή της βιβλιοθήκης Node JS που έχει αναπτυχθεί στην Java. Έχει τη δυνατότητα να εργαστεί σε πρωτόκολλο devtools. Δεν γίνεται λήψη του προγράμματος περιήγησης Chromium κατά την εγκατάσταση του πακέτου puppeteer-core. Η προγραμματική διεπαφή του Puppeteer οδηγεί πλήρως τη βιβλιοθήκη του puppeteer-core. Ένας άλλος σημαντικός περιορισμός είναι ότι οι βασικές δυνατότητες του puppeteer δεν μπορούν να τροποποιηθούν αλλάζοντας οποιαδήποτε από τις μεταβλητές περιβάλλοντος PUPPETEER_ *. 

Εντολή εγκατάστασης: npm εγκατάσταση puppeteer-core

Σημείωση: Το εργαλείο Node JS πρέπει να εγκατασταθεί πριν από την εγκατάσταση του πακέτου puppeteer-core.

Εγκατάσταση πακέτου προϊόντος Puppeteer: Το Puppeteer είναι το πλήρες προϊόν που αναπτύχθηκε από την Google για τον έλεγχο των προγραμμάτων περιήγησης Chrome. Ως το πλήρες πακέτο προϊόντων Puppeteer, γίνεται λήψη των τελευταίων εκδόσεων του προγράμματος περιήγησης χρωμίου κατά την εγκατάσταση. Μετά από αυτό η εγκατάσταση καθοδηγείται από τον κουκλοπαίκτη-πυρήνα. Είναι δυνατό να προσαρμόσετε τις δυνατότητες του Puppeteer αλλάζοντας τις μεταβλητές περιβάλλοντος PUPPETEER_ *. 

Εντολή εγκατάστασης: npm εγκατάσταση puppeteer

Σε αυτό το σεμινάριο "Εγκατάσταση Puppeteer", θα εργαστούμε για την εγκατάσταση του πακέτου Puppeteer, καθώς δεν υπάρχουν πολλές διαφορές μεταξύ αυτών των δύο εκδόσεων.

Δείγμα έργου Puppeteer

Το Puppeteer είναι συμβατό με προγράμματα περιήγησης headful (χωρίς headless) και headless chrome. Σε περίπτωση ακέφαλου, οι δραστηριότητες του προγράμματος περιήγησης εκτελούνται στο παρασκήνιο, δηλαδή το περιβάλλον χρήστη του προγράμματος περιήγησης δεν είναι ορατό σε εμάς. Κάνει το πράγμα (έλεγχο του προγράμματος περιήγησης) απλούστερο και πιο εύκολο σε ένα βήμα. Αυτό σημαίνει ότι το ίδιο πράγμα (έλεγχος των προγραμμάτων περιήγησης) μπορεί να γίνει με πολλαπλά σύνθετα βήματα.

Τα βήματα που περιλαμβάνονται στο δείγμα του προγράμματος Puppeteer παρουσιάζονται παρακάτω - 

Βήμα 1 # Δημιουργία δομής φακέλου για το δείγμα Puppeteer Project: Δημιουργήστε ένα δείγμα ριζικού καταλόγου με το όνομα "SampleProject" σε μια προκαθορισμένη διαδρομή. Αυτός ο ριζικός κατάλογος θα λειτουργεί ως δείγμα Puppeteer Project. Στη συνέχεια, μετά το άνοιγμα της γραμμής εντολών, πρέπει να μεταβούμε σε αυτόν τον ριζικό κατάλογο.

Βήμα 2 # Εγκατάσταση Puppeteer: Χρησιμοποιώντας την παρακάτω εντολή, μπορούμε να εγκαταστήσουμε το πλήρες πακέτο του Puppeteer στον ριζικό κατάλογο. Αυτή η εντολή κατεβάζει βασικά όλες τις βιβλιοθήκες ανοιχτού κώδικα NodeJS στο δείγμα έργου ντοσιέ. Η διαδικασία εγκατάστασης διαρκεί λίγο με βάση την ταχύτητα του δικτύου. Θα κατεβάσει περίπου 350MB δεδομένων. Μετά την εγκατάσταση, ο φάκελος node_modules, ο οποίος περιέχει διαφορετικά στοιχεία puppeteer και το αρχείο package-lock.json, θα δημιουργηθεί στο δείγμα root root του έργου Pupeteer.

Tutorial puppeteer - Αρχείο καταγραφής εγκατάστασης
Tutorial puppeteer - Αρχείο καταγραφής εγκατάστασης

Βήμα 3 # Δημιουργία δείγματος Puppeteer Script: Τώρα, θα γράψουμε ένα δείγμα κουκλοθέατρου που επικαλείται τα LambdaGeeks ιστότοπος, εμφανίζει μηνύματα κονσόλας μετά από κάθε βήμα και καταγράφει το στιγμιότυπο οθόνης. Σε αυτό το παράδειγμα, θα γίνει επίκληση στο πρόγραμμα περιήγησης χωρίς κεφαλή χρωμίου. Το δείγμα Script Puppeteer θα είναι - 

const puppeteer = require('puppeteer'); //include Puppeteer Library
 
puppeteer.launch({headless:true}).then(async browser => {
     const pageNew = await browser.newPage(); // Launch browser
     console.log('Step1 - Open Browser'); //Display message
     await pageNew .setViewport({ width: 1280, height: 800 })
     await pageNew .goto('https://lambdageeks.com/'); //Open LambdaGeeks
     //Capture Screenshot
     await pageNew .screenshot({ path: 'screenshot_lambda.png' });
     console.log('Step2 - Navigate LambdaGeeks and take screenshot');
     await browser.close();
     console.log('Step3 - Browser Closed');
 });

Αυτός ο κωδικός πρέπει να αποθηκευτεί στον ριζικό κατάλογο του έργου Δείγμα κουκλοπαίδων με το όνομα του αρχείου sample_script.js. Στην περίπτωση του Puppeteer-core, πρέπει να συμπεριλάβουμε το «puppeteer-core» αντί του «puppeteer» στην αρχή του σεναρίου. Για το headful browser, πρέπει να αντικαταστήσουμε τον κωδικό "{headless:true}” with “{headless:false}”.

Βήμα 4 # Εκτέλεση δείγματος Puppeteer Script: Το δείγμα σεναρίου μπορεί να εκτελεστεί από τη γραμμή εντολών χρησιμοποιώντας την παρακάτω εντολή -

npm node sample_script.js

Μετά την εκτέλεση, το στιγμιότυπο οθόνης θα καταγραφεί και θα αποθηκευτεί στον ριζικό κατάλογο ως "'screenshot_lambda.png".

Tutorial puppeteer - Δείγμα έργου Puppeteer
Tutorial puppeteer - Δείγμα έργου Puppeteer

Τώρα θα δείξουμε ένα άλλο δείγμα σεναρίου Puppeteer σε εφαρμογή web amazon. Αυτό το σενάριο θα εκτελέσει τα παρακάτω βήματα μαζί με επαληθεύσεις σε κάθε βήμα -

  • Επικαλέστε την εφαρμογή Amazon.
  • Αναζήτηση σε ένα προκαθορισμένο βιβλίο.
  • Προσθέστε το βιβλίο που αναζητήσατε στο καλάθι.
  • Ανοίξτε το καλάθι και ελέγξτε αν το βιβλίο είναι διαθέσιμο στο καλάθι.
  • Λήψη οθόνης και κλείσιμο του προγράμματος περιήγησης.

Θα ακολουθήσουμε μόνο το παρακάτω σενάριο. Θα μάθουμε λεπτομερώς σχετικά με τα διάφορα βήματα που πρέπει να εκτελέσουμε στο επόμενο άρθρο. Το δείγμα σεναρίου εμφανίζεται παρακάτω -

/**
 * @name Search in Amazon
*/
const puppeteer = require('puppeteer');
const reportPathDir = 'C:\\LambdaGeeks\\puppteer_proj_sample\\output\\';
const screenshotFile = 'screen1.png';

try {
  (async () => {
    
	//Create browser and page object instance and navigate to the URL
    const browserWeb = await puppeteer.launch({ headless: false });
    const pageWeb = await browserWeb.newPage()
    await pageWeb.setViewport({ width: 1280, height: 800 });
    await pageWeb.goto('https://www.amazon.in/');
	
	//Enter the amazon Search criteria
	let searchBoxAmazon = await pageWeb.waitForXPath("//*/input[@id='twotabsearchtextbox']",{ visible: true });
	if (searchBoxAmazon === null)
	{
		console.log('Amazon screen is not displayed');
	}
	else{		
		await searchBoxAmazon.type("Testing Book");
		console.log('Search criteria has been entered');
	} 		
	
	//Clicked on search button
	let btnSearchAmazon = await pageWeb.waitForXPath("//*/input[@id='nav-search-submit-button']",{ visible: true });
	if (btnSearchAmazon === null)
	{
		console.log('Search button is not showing');
	}
	else{
		await btnSearchAmazon.click();
		console.log('Clicked on search button');
	}	
	
	//Click on specific search result
	let myBookAmazon = await pageWeb.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ visible: true })
	if (myBookAmazon === null)
	{
		console.log('Book is not available');
	}
	else{
		await myBookAmazon.click();
		console.log('Click on specific book to order');
	} 	
	
	// Identify if the new tab has opened
	const pageTarget = pageWeb.target();
	const newTarget = await browserWeb.waitForTarget(target => target.opener() === pageTarget);
	//get the new page object:
	const page2 = await newTarget.page();	
	await page2.setViewport({ width: 1280, height: 800 });
	
	//Add to cart
	let addToCartAmazon = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible: true });
	if (addToCartAmazon === null)
	{
		console.log('Add to cart button is not available');
	}
	else{
		console.log('Click on add to Cart button');
		await addToCartAmazon.click();		
	} 		
	//Verify add to cart process	
	let successMessageAmazon = await page2.waitForXPath("//*[contains(text(),'Added to Cart')]",{ visible: true });
	if (successMessageAmazon === null)
	{
		console.log('Item is not added to cart');
	}
	else{
		console.log('Item is added to cart successfully');		
	} 	
	
	// Capture no of cart
	let cartCountAmazon = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visible: true});
	let valueCount = await page2.evaluate(el => el.textContent, cartCountAmazon)
	console.log('Cart count: ' + valueCount);
	cartCountAmazon.focus();
	await page2.screenshot({ path: screenshotFile });
	
	await pageWeb.waitForTimeout(3000);    
	await page2.close();
	await pageWeb.close();
    await browserWeb.close();
  })()
} catch (e) {
  console.log(e)
}

Σημείωση: Θα εξηγήσουμε τα λεπτομερή βήματα για τη σύνταξη σεναρίων σε επόμενα άρθρα.

Συμπέρασμα:

Σε αυτό το εισαγωγικό άρθρο σχετικά με το "Install Puppeteer" από το "Puppeteer Tutorial", έχουμε εξηγήσει σχετικά με τα λεπτομερή βήματα για την εγκατάσταση διαφορετικών πακέτων Puppeteer από το μηδέν. Η ρύθμιση puppeteer περιλαμβάνει διάφορες εγκαταστάσεις στοιχείων όπως, εγκατάσταση NodeJs, εγκατάσταση VSCode, εγκατάσταση Puppeteer, δημιουργία και εκτέλεση δείγματος έργου Puppeteer. Στο επόμενο σεμινάριο Puppeteer, θα εξηγήσουμε λεπτομερή βήματα για να χρησιμοποιήσετε το Puppeteer ως εργαλείο απόξεσης ιστού. Παρακαλώ πατήστε  εδώ για ανάγνωση από την πύλη αναφοράς.

Σχετικά με το K Mondal

Γεια, είμαι ο K. Mondal, συνδέομαι με έναν κορυφαίο οργανισμό. Έχω 12+ χρόνια εργασιακής εμπειρίας σε διάφορους τομείς, π.χ. ανάπτυξη εφαρμογών, δοκιμές αυτοματισμού, σύμβουλος πληροφορικής. Με ενδιαφέρει πολύ να μάθω διαφορετικές τεχνολογίες. Είμαι εδώ για να εκπληρώσω τη φιλοδοξία μου και αυτήν τη στιγμή συνεισφέρω ως Συγγραφέας και Προγραμματιστής Ιστοσελίδων και στο LambdaGeeks.
Συνδεθείτε στο LinkedIn- https://www.linkedin.com/in/kumaresh-mondal/

Αφήστε ένα σχόλιο

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται *

Lambda Geeks