Το 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).
Βήμα 2# Εγκατάσταση NodeJS: Μετά την ολοκλήρωση της λήψης, πρέπει να εγκαταστήσουμε NodeJs κάνοντας διπλό κλικ στο αρχείο του προγράμματος εγκατάστασης (.msi). Κατά την εγκατάσταση, πρέπει να προχωρήσουμε σύμφωνα με τις οδηγίες.
Βήμα 3# Επαλήθευση NodeJS: Μετά την ολοκλήρωση της εγκατάστασης, πρέπει να ανοίξουμε τη γραμμή εντολών και να εισαγάγουμε την εντολή ως «κόμβος». Εάν εμφανίζονται οι παρακάτω λεπτομέρειες, η εγκατάσταση είναι σωστή. Σε περίπτωση που εμφανιστεί κάποιο σφάλμα, αυτό σημαίνει ότι η εγκατάσταση δεν είναι σωστή.
Εγκατάσταση προγράμματος επεξεργασίας για Puppeteer:
Ο επεξεργαστής δεν είναι παρά ένα εργαλείο που μας βοηθά να γράφουμε, να μεταγλωττίζουμε και να τρέχουμε τους κώδικες Puppeteer. Υπάρχουν πολλά διαθέσιμα εργαλεία που μπορούν να χρησιμοποιηθούν ως πρόγραμμα επεξεργασίας κώδικα java που περιλαμβάνει Visual Studio Code, Note Pad ++, Edit Plus, κ.λπ. Ακόμη και μπορούμε να γράψουμε κώδικα κουκλοθέατρου στην προεπιλεγμένη εφαρμογή "Note Pad". Σε αυτό το "Install Puppeteer" φροντιστήριο, θα χρησιμοποιήσουμε το VSCode καθώς είναι δωρεάν και είναι εύκολα συμβατό με την εφαρμογή NodeJS. Το VSCode δεν είναι παρά ένα στοιχείο του visual studio, το οποίο διατίθεται δωρεάν. Τα βήματα για την εγκατάσταση του VSCode είναι -
Βήμα 1 # Downloadd VSCode: Πατήστε εδώ για να ανοίξετε τον σύνδεσμο λήψης και να κατεβάσετε την επιθυμητή έκδοση του VSCode Installer σύμφωνα με το λειτουργικό σύστημα.
Βήμα 2 # Εγκατάσταση VSCode: Εγκαταστήστε τον κωδικό VSCode από το αρχείο εγκατάστασης στο σύστημα όπως και οποιοδήποτε άλλο λογισμικό. Κατά την εγκατάσταση, προχωρήστε μόνο με τη συνιστώμενη ρύθμιση.
Βήμα 2 # Επαλήθευση κωδικού VS: Μετά την ολοκλήρωση της εγκατάστασης, ανοίξτε την εφαρμογή για να ελέγξετε αν έχει εγκατασταθεί σωστά.
Εγκατάσταση πακέτων 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.
Βήμα 3 # Δημιουργία δείγματος Puppeteer Script: Τώρα, θα γράψουμε ένα δείγμα κουκλοθέατρου που επικαλείται τα LambdaGeeks ιστότοπος, εμφανίζει μηνύματα κονσόλας μετά από κάθε βήμα και καταγράφει το στιγμιότυπο οθόνης. Σε αυτό το παράδειγμα, θα γίνει επίκληση στο πρόγραμμα περιήγησης χωρίς κεφαλή χρωμίου. Το δείγμα Script Puppeteer θα είναι -
const puppeteer = απαιτώ('κουκλοπαίκτης'); //include Puppeteer Library puppeteer.launch({headless:true}).then(async browser => {const pageNew = await browser.newPage(); // Εκκίνηση του προγράμματος περιήγησης console.log('Step1 - Open Browser'); / /Εμφάνιση μηνύματος await pageNew .setViewport({ πλάτος: 1280, ύψος: 800 }) await pageNew .goto('https://lambdageeks.com/'); //Άνοιγμα LambdaGeeks //Λήψη στιγμιότυπου οθόνης σε αναμονή σελίδαΝέα .screenshot({ path : 'screenshot_lambda.png' }); console.log('Step2 - Πλοηγηθείτε στο LambdaGeeks και τραβήξτε στιγμιότυπο οθόνης'); 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 κόμβος sample_script.js
Μετά την εκτέλεση, το στιγμιότυπο οθόνης θα καταγραφεί και θα αποθηκευτεί στον ριζικό κατάλογο ως "'screenshot_lambda.png".
Τώρα θα δείξουμε ένα άλλο δείγμα σεναρίου Puppeteer σε εφαρμογή web amazon. Αυτό το σενάριο θα εκτελέσει τα παρακάτω βήματα μαζί με επαληθεύσεις σε κάθε βήμα -
- Επικαλέστε την εφαρμογή Amazon.
- Αναζήτηση σε ένα προκαθορισμένο βιβλίο.
- Προσθέστε το βιβλίο που αναζητήσατε στο καλάθι.
- Ανοίξτε το καλάθι και ελέγξτε αν το βιβλίο είναι διαθέσιμο στο καλάθι.
- Λήψη οθόνης και κλείσιμο του προγράμματος περιήγησης.
Θα ακολουθήσουμε μόνο το παρακάτω σενάριο. Θα μάθουμε λεπτομερώς σχετικά με τα διάφορα βήματα που πρέπει να εκτελέσουμε στο επόμενο άρθρο. Το δείγμα σεναρίου εμφανίζεται παρακάτω -
/** * @name Αναζήτηση στο Amazon */ const puppeteer = require('puppeteer'); const reportPathDir = 'C:\\LambdaGeeks\\puppteer_proj_sample\\output\\'; const screenshotFile = 'screen1.png'; δοκιμάστε { (async () => { //Δημιουργήστε παράδειγμα αντικειμένου προγράμματος περιήγησης και σελίδας και πλοηγηθείτε στη διεύθυνση URL const browserWeb = await puppeteer.launch({ headless: false }); const pageWeb = await browserWeb.newPage() await pageWeb.setViewport ({ πλάτος: 1280, ύψος: 800 }); await pageWeb.goto('https://www.amazon.in/'); //Εισαγάγετε τα κριτήρια αναζήτησης amazon αφήστε το searchBoxAmazon = αναμονή σελίδαWeb.waitForXPath("//* /input[@id='twotabsearchtextbox']",{ ορατό: true }); if (searchBoxAmazon === null) { console.log('Η οθόνη του Amazon δεν εμφανίζεται'); } else{ await searchBoxAmazon.type(" Βιβλίο δοκιμών"); console.log('Έχουν εισαχθεί τα κριτήρια αναζήτησης'); } //Κάναμε κλικ στο κουμπί αναζήτησης let btnSearchAmazon = await pageWeb.waitForXPath("//*/input[@id='nav-search-submit- button']",{ ορατό: true }); if (btnSearchAmazon === null) { console.log('Το κουμπί αναζήτησης δεν εμφανίζεται'); } else{ await btnSearchAmazon.click(); console.log('Έγινε κλικ στο κουμπί αναζήτησης'); } //Κάντε κλικ σε συγκεκριμένο αποτέλεσμα αναζήτησης let myBookAmazon = await pageWeb.waitForXPath ("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ ορατό: true }) if (myBookAmazon === null) { console.log('Το βιβλίο δεν είναι διαθέσιμο') ; } else{ await myBookAmazon.click(); console.log('Κάντε κλικ σε συγκεκριμένο βιβλίο για παραγγελία'); } // Προσδιορίστε εάν η νέα καρτέλα έχει ανοίξει const pageTarget = pageWeb.target(); const newTarget = αναμονή browserWeb.waitForTarget(target => target.opener() === pageTarget); //λήψη του αντικειμένου νέας σελίδας: const page2 = await newTarget.page(); await page2.setViewport({ πλάτος: 1280, ύψος: 800 }); //Προσθήκη στο καλάθι ας addToCartAmazon = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ ορατό: true }); if (addToCartAmazon === null) { console.log('Το κουμπί Προσθήκη στο καλάθι δεν είναι διαθέσιμο'); } else{ console.log('Κάντε κλικ στο κουμπί προσθήκη στο καλάθι'); αναμονή addToCartAmazon.click(); } //Επαλήθευση της διαδικασίας προσθήκης στο καλάθι let successMessageAmazon = await page2.waitForXPath("//*[contains(text(),'Added to Cart')]",{ ορατό: true }); if (successMessageAmazon === null) { console.log('Το στοιχείο δεν προστέθηκε στο καλάθι'); } else{ console.log('Το στοιχείο προστέθηκε με επιτυχία στο καλάθι'); } // Αριθμός λήψης καλαθιού let cartCountAmazon = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ ορατό: 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(); αναμονή pageWeb.close(); αναμονή browserWeb.close(); })() } catch (e) { console.log(e) }
Σημείωση: Θα εξηγήσουμε τα λεπτομερή βήματα για τη σύνταξη σεναρίων σε επόμενα άρθρα.
Συμπέρασμα:
Σε αυτό το εισαγωγικό άρθρο σχετικά με το "Install Puppeteer" από το "Puppeteer Tutorial", έχουμε εξηγήσει σχετικά με τα λεπτομερή βήματα για την εγκατάσταση διαφορετικών πακέτων Puppeteer από το μηδέν. Η ρύθμιση puppeteer περιλαμβάνει διάφορες εγκαταστάσεις στοιχείων όπως, εγκατάσταση NodeJs, εγκατάσταση VSCode, εγκατάσταση Puppeteer, δημιουργία και εκτέλεση δείγματος έργου Puppeteer. Στο επόμενο σεμινάριο Puppeteer, θα εξηγήσουμε λεπτομερή βήματα για να χρησιμοποιήσετε το Puppeteer ως εργαλείο απόξεσης ιστού. Παρακαλώ πατήστε εδώ για ανάγνωση από την πύλη αναφοράς.
