Puppeteer Automation Testing - Ένας εξαιρετικός οδηγός Puppeteer Tutorial 6

Δοκιμή Αυτοματισμού Κουκλοθεάτρου - Εικόνα χαρακτηριστικών

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

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

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

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

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

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

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

Εκμάθηση Tosca # 6: Δοκιμή Αυτοματισμού Κουκλοθεάτρου

Σε αυτό το σεμινάριο “Puppeteer Automation Testing”, θα εξηγήσουμε τα λεπτομερή βήματα για την Αυτοματοποίηση Puppeteer από την αρχή. Οι παρακάτω λειτουργίες θα εξηγηθούν για να κατανοήσουν τις δοκιμές Αυτοματισμού Puppeteer από το μηδέν -

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

· Εκκίνηση εφαρμογής Web

· Προσδιορίστε τις ιδιότητες αντικειμένου από το πρόγραμμα περιήγησης Chrome

· Βήματα υποβολής φόρμας - Εισαγάγετε κείμενο, κάντε κλικ στο συμβάν, Επαλήθευση

· Λήψη στιγμιότυπου οθόνης

· Εκτελέστε σενάρια για Αυτοματισμό Puppeteer

Αυτοματισμός κουκλοπαικτών

Απαιτείται δοκιμή για να διασφαλιστεί η ποιότητα των προϊόντων λογισμικού. Υπάρχουν πολλαπλά επίπεδα δοκιμών που ορίζονται στις διαδικασίες ανάπτυξης λογισμικού. Για να ελέγξετε τις λειτουργίες ενός λογισμικού, μπορεί να γίνει χειροκίνητα ή μέσω αυτοματοποιημένης διαδικασίας. Οι κύριοι στόχοι των αυτοματοποιημένων δοκιμών λογισμικού είναι -

  • Γρήγορος κύκλος εκτέλεσης δοκιμών.
  • Αποφύγετε τις πιθανότητες για ανθρώπινα λάθη.
  • Μειώστε το χρονικό διάστημα εκτέλεσης της δοκιμής.
  • Μειώστε τον χρόνο κύκλου απελευθέρωσης.
  • Cove περισσότερη λειτουργικότητα χωρίς συμβιβασμούς με την ποιότητα.
  • Η πολλαπλή εκτέλεση μπορεί να γίνει παράλληλα.

 Το Puppeteer είναι μια βιβλιοθήκη Node που βασίζεται σε javascript και παρέχει μια διεπαφή εφαρμογών υψηλού επιπέδου (API) για τον έλεγχο του προγράμματος περιήγησης ιστού Chrome μέσω του πρωτοκόλλου Chrome DevTools. Οι περισσότερες από τις μη αυτόματες λειτουργίες που εκτελούνται στο πρόγραμμα περιήγησης Chrome μπορούν να αυτοματοποιηθούν χρησιμοποιώντας το Puppeteer. Έτσι, το Puppeteer είναι μια καλή επιλογή για τον έλεγχο μονάδων σε εφαρμογές Ιστού με γρήγορο και ευκολότερο τρόπο. 

Προσέγγιση δοκιμής αυτοματοποίησης κουκλοπαικτών:

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

Βήμα 1 # Προσδιορισμός λειτουργικού σεναρίου δοκιμής:

Θα δείξουμε τη βήμα προς βήμα προσέγγιση για την εκτέλεση αυτοματισμού Puppeteer για το παρακάτω σενάριο - 

· Εκκινήστε το πρόγραμμα περιήγησης στο Web.

· Επικαλέστε την εφαρμογή Amazon Web.

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

Βήμα 2 # Εγκατάσταση Puppeteer και Δημιουργία δοκιμαστικής θήκης:

Δημιουργήστε ένα κενό αρχείο javascript ως "sample_script.js" σε έναν συγκεκριμένο φάκελο. Εδώ, θα θεωρήσουμε τον ριζικό φάκελο ως SampleProject. Για να εγκαταστήσουμε το Puppeteer, θα χρησιμοποιήσουμε την εντολή - "npm install puppeteer". Η διαδικασία εγκατάστασης διαρκεί λίγο με βάση την ταχύτητα του δικτύου. Θα κατεβάσει περίπου 350MB δεδομένων. Μετά την εγκατάσταση, ο φάκελος node_modules, ο οποίος περιέχει διαφορετικά στοιχεία puppeteer και το αρχείο package-lock.json, θα δημιουργηθεί στο δείγμα root root του έργου Puppeteer.

Βήμα 3 # Ιδιότητες αναγνώρισης καταγραφής του αντικειμένου δοκιμής:

Μπορούμε να καταγράψουμε τις ιδιότητες αναγνώρισης χρησιμοποιώντας το Εργαλείο προγραμματιστή του προγράμματος περιήγησης ιστού Chrome Αναλύοντας τις διάφορες ιδιότητες, όπως, id, όνομα, XPath κ.λπ., θα επιλέξουμε το σωστό που μπορεί να χρησιμοποιηθεί στη δέσμη ενεργειών για την εκτέλεση οποιωνδήποτε λειτουργιών. Σε αυτό το σεμινάριο "Puppeteer Automation Testing", θα χρησιμοποιήσουμε το σενάριο XPath. Παρακάτω ακολουθούν βήματα για να λάβετε το XPATH ή άλλες ιδιότητες,

1. Ανοίξτε τα Εργαλεία προγραμματιστών που είναι διαθέσιμα στο "Μενού -> Περισσότερα εργαλεία" και μεταβείτε στην καρτέλα Στοιχεία.

2. Χρησιμοποιώντας το εργαλείο εύρεσης (κάνοντας κλικ στο εικονίδιο με το βέλος που βρίσκεται στην επάνω αριστερή γωνία της καρτέλας Στοιχεία), επισημάνετε το αντικείμενο δοκιμής από την εφαρμογή. Εδώ, θα ελέγξουμε το πλαίσιο αναζήτησης.

Δοκιμή αυτοματισμού Puppeteer - Ανοίξτε το εργαλείο προγραμματιστή Chrome
Δοκιμή αυτοματισμού Puppeteer - Ανοίξτε το εργαλείο προγραμματιστή Chrome

3. Αναλύστε τον επισημασμένο πηγαίο κώδικα για να προσδιορίσετε τις ιδιότητες επιθυμίας. Για να αποκτήσετε την ιδιότητα XPATH του δοκιμαστικού αντικειμένου, κάντε δεξί κλικ στην επισημασμένη ενότητα και κάντε κλικ στο «Αντιγραφή-> Αντιγραφή Xpath» για να αντιγράψετε την ιδιότητα XPATH στο πρόχειρο.

Δοκιμή Αυτοματισμού Puppeteer - Αντιγραφή XPath
Δοκιμή Αυτοματισμού Puppeteer - Αντιγραφή XPath

4. Τώρα, επικολλήστε το Xpath στο πλαίσιο κειμένου εύρεσης και πατήστε enter για να ελέγξετε αν το Xpath αναγνωρίζει το αντικείμενο μοναδικά.

Δοκιμή Αυτοματισμού Puppeteer - Ελέγξτε το XPath
Δοκιμή Αυτοματισμού Puppeteer - Ελέγξτε το XPath

5. Ομοίως, πρέπει να καταγράψουμε τις ιδιότητες αναγνώρισης και για ένα άλλο αντικείμενο δοκιμής.

Step4 # Βήματα ανάπτυξης αυτοματισμού Puppeteer:

Για να ολοκληρώσουμε τη δοκιμαστική θήκη, πρέπει να εκτελέσουμε συγκεκριμένες λειτουργίες σε ιστοσελίδες. Για καθεμία από τις λειτουργίες, υπάρχουν διαφορετικές διαθέσιμες μέθοδοι. Οι μέθοδοι που χρησιμοποιούνται στο σενάριό μας για το "Puppeteer Automation Testing" εξηγούνται εδώ.

Εναρξη εφαρμογής - Αφού συμπεριλάβουμε το puppeteer, πρέπει να ξεκινήσουμε το πρόγραμμα περιήγησης χρησιμοποιώντας τη μέθοδο puppeteer — launch. Μπορείτε να περάσετε μια αναφορά αντικειμένου σε αυτήν τη μέθοδο για να ορίσετε το πρόγραμμα περιήγησης χωρίς headless ή headful. Στη συνέχεια, πρέπει να δημιουργήσουμε την παρουσία του προγράμματος περιήγησης ιστού που απαιτείται για την πλοήγηση στη διεύθυνση URL. Εδώ, η συνάρτηση async χρησιμοποιείται για τη χρήση της λέξης-κλειδιού αναμονής για τον χειρισμό του συγχρονιστή ιστού.

//Include the puppeteer package
const puppeteer = require('puppeteer'); 
 (async () => {
    //launching the headless browser
    const browser = await puppeteer.launch({ headless: true });
   //Create instance of the browser
    const page = await browser.newPage();
   //Navigate to the url
    await page.goto('https://www.amazon.in/');
  })()

Ολόκληρη η δοκιμή θα γίνει σε ένα πρόγραμμα περιήγησης χωρίς κεφάλι. Εάν θέλουμε να ανοίξουμε το headful browser, πρέπει να μεταφέρουμε το αντικείμενο στη μέθοδο εκκίνησης ως "{Headless: false}".

Ελέγξτε την ύπαρξη - Πρέπει να χρησιμοποιήσουμε τη μέθοδο σελίδα.waitForXpath που θα ελέγξει την ύπαρξη του Xpath και θα επιστρέψει την αναφορά του αντικειμένου δοκιμής. Δοκιμάζοντας την αναφορά επιστροφής, μπορούμε να προσθέσουμε ένα σημείο επαλήθευσης στην περίπτωση δοκιμής.

	let searchBox = await page.waitForXPath("//*[@id='twotabsearchtextbox']",{ visible: true });
	if (searchBox === null) //Verification of the test object
	{
		console.log('Amazon screen is not displayed');
	}

Εισαγάγετε δεδομένα - Χρησιμοποιώντας την τύπος μέθοδος αυτής της αναφοράς αντικειμένου, μπορούμε να εισαγάγουμε το κείμενο.

await searchBox.type("Testing Book");

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

let btnSearch = await page.waitForXPath("//*/input[@id='nav-search-submit-button']",{visible:true });
btnSearch.click();

Εκτύπωση μηνύματος στην κονσόλα  - Χρησιμοποιώντας τη μέθοδο console.log, μπορούμε να εκτυπώσουμε οποιοδήποτε μήνυμα στην κονσόλα ως έξοδο.

console.log(‘Console lag has been generated’);

Ανατρέξτε στη νέα καρτέλα - Χρησιμοποιώντας τις μεθόδους page.target και browser.waitforTarget, μπορούμε να ελέγξουμε και να αποθηκεύσουμε την αναφορά σχετικά με τη νέα καρτέλα σε μια μεταβλητή.

	const pageTarget = page.target();
	const newTarget = await browser.waitForTarget(target => target.opener() === pageTarget);
	//get the new page object:
	const page2 = await newTarget.page();

Αποτυπώστε το στιγμιότυπο οθόνης - Χρησιμοποιώντας τη μέθοδο σελίδα. Στιγμιότυπο οθόνης, έχει ληφθεί ένα στιγμιότυπο της συγκεκριμένης σελίδας και αποθηκεύεται σύμφωνα με το όνομα αρχείου που παρέχεται ως όρισμα

await page.screenshot({ path: ‘screenshot1.png’ });

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

	await page.close();
	await browser.close();

Χρόνος αναμονής - Σε ορισμένες περιπτώσεις, υπάρχει απαίτηση να περιμένετε για φόρτωση σελίδας ή ολοκλήρωση οποιασδήποτε εξαρτημένης εργασίας. πρέπει να διακόψουμε την εκτέλεση για μια προκαθορισμένη ώρα. Για να το κάνουμε αυτό, μπορούμε να το χρησιμοποιήσουμε η σελίδα.waitForTimeout μέθοδος που μπορεί να σταματήσει την εκτέλεση με βάση την τιμή (σε χιλιοστά δευτερολέπτων) που πέρασε από το όρισμα.

await page.waitForTimeout(2000);

Τώρα έχουμε μάθει για τα βασικά τεχνικά βήματα για την αυτοματοποίηση του λειτουργικού σεναρίου μας. Με βάση τις γνώσεις, μπορούμε να διαβάσουμε την υπόθεση δοκιμής Αυτοματισμού Puppeteer παρακάτω. Η λεπτομερής επισκόπηση των τάξεων και μεθόδων που χρησιμοποιούνται πιο συχνά θα εξηγηθεί σε επόμενες δημοσιεύσεις.

/**
 * @name Amazon search
 */
const puppeteer = require('puppeteer');
const reportPath = 'C:\\LambdaGeeks\\puppteer_proj_sample\\output\\';
const screenshot = 'screen1.png';
// Used to export the file into a .docx file
try {
  (async () => {
    const browser = await puppeteer.launch({ headless: false });
    const pageNew = await browser.newPage()
    await pageNew.setViewport({ width: 1280, height: 800 });
    await pageNew.goto('https://www.amazon.in/');
	//Enter Search criteria
	let searchBox = await page.waitForXPath("//*[@id='twotabsearchtextbox']",{ visible: true });
	if (searchBox === null)
	{
		console.log('Amazon screen is not displayed');
	}
	else{		
		await searchBox.type("Testing Book");
		console.log('Search criteria has been entered');
	} 		
	//Clicked on search button
	let btnSearch = await pageNew.waitForXPath("//*/input[@id='nav-search-submit-button']",{ visible: true });
	if (btnSearch === null)
	{
		console.log('Search button is not showing');
	}
	else{
		await btnSearch.click();
		console.log('Clicked on search button');
	}	
	//Click on specific search result
	let myBook = await pageNew.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook Second Edition')]",{ visible: true })
	if (myBook === null)
	{
		console.log('Book is not available');
	}
	else{
		await myBook.click();
		console.log('Click on specific book to order');
	} 	
	// Identify if the new tab has opened
	const pageTarget = pageNew.target();
	const newTarget = await browser.waitForTarget(target => target.opener() === pageTarget);
	//get the new page object:
	const page2 = await newTarget.pageNew();	
	await page2.setViewport({ width: 1280, height: 800 });
	
	//Add to cart
	let addToCart = await page2.waitForXPath("//*/input[@id='add-to-cart-button']",{ visible: true });
	if (addToCart === null)
	{
		console.log('Add to cart button is not available');
	}
	else{
		console.log('Click on add to Cart button');
		await addToCart.click();		
	} 		
	//Verify add to cart process	
	let successMessage = await page2.waitForXPath("//*[contains(text(),'Added to Cart')]",{ visible: true });
	if (successMessage === null)
	{
		console.log('Item is not added to cart');
	}
	else{
		console.log('Item is added to cart successfully');		
	} 		
	// Capture no of cart
	let cartCount = await page2.waitForXPath("//*/span[@id='nav-cart-count']",{ visible: true});
	let value = await page2.evaluate(el => el.textContent, cartCount)
	console.log('Cart count: ' + value);
	cartCount.focus();
	await page2.screenshot({ path: screenshot });
	
	await pageNew.waitForTimeout(2000);    
	await page2.close();
	await pageNew.close();
    await browser.close();
  })()
} catch (err) {
  console.error(err)
}

Βήμα 5 # Εκτέλεση δοκιμής αυτοματισμού Puppeteer:

Μπορούμε να ξεκινήσουμε την εκτέλεση χρησιμοποιώντας την εντολή κόμβος sample_script.js μέσω της γραμμής εντολών. Κατά την εκτέλεση, το πρόγραμμα περιήγησης Chromium θα ανοίξει και θα εκτελέσει αυτόματα τα λειτουργικά βήματα και θα αποθηκεύσει το στιγμιότυπο οθόνης της τελικής σελίδας. Το στιγμιότυπο οθόνης και η έξοδος της κονσόλας θα μοιάζουν παρακάτω.

Δοκιμές Αυτοματισμού Puppeteer - Έξοδος Κονσόλας
Δοκιμές Αυτοματισμού Puppeteer - Έξοδος Κονσόλας
Δοκιμή Αυτοματισμού Puppeteer - Λήψη οθόνης
Δοκιμές Αυτοματισμού Puppeteer - Στιγμιότυπη οθόνη

Συμπέρασμα:

Σε όλο αυτό το σεμινάριο δοκιμών αυτοματισμού Puppeteer, μάθαμε για τα λεπτομερή βήματα στο Testing Automation Puppeteer. Στο επόμενο σεμινάριο Puppeteer, θα μάθουμε για τη λεπτομερή επισκόπηση των τάξεων και των μεθόδων που χρησιμοποιούνται πιο συχνά. Παρακαλώ πατήστε εδώ για να επισκεφθείτε την πύλη αναφοράς για αυτό το Puppeteer Tutorial. 

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

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

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

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

Lambda Geeks