I-install ang Puppeteer - Isang Mahusay na Gabay sa Pag-aaral ng Puppeteer Tutorial 4 & 5

Tutorial ng puppeteer - Larawan ng Tampok

Ang Puppeteer ay isang open-source node js library na maaaring magamit para sa mga tool sa pag-scrap ng web. Maaari din itong magamit upang maisagawa ang pagsubok na awtomatiko sa mga aplikasyon sa web. Ngayon-isang-araw, ang paggamit ng Puppeteer ay mabilis na nadagdagan sa awtomatikong puwang ng pagsubok ng software. Pangunahing kaalaman sa linya ng utos, Javascript, at istraktura ng HTML DOM ay kinakailangan upang maunawaan ang puppeteer tutorial. Ang buong tutorial ay pinaghiwalay sa mga artikulo sa ibaba. 

Tutorial ng Puppeteer

Tosca Tutorial # 1: Pangkalahatang-ideya ng Puppeteer

Tosca Sangguni # 2: Mga variable ng Kapaligiran ng Puppeteer

Tosca Sangguni # 3: Puppeteer Web Scraping at Pangkalahatang-ideya ng Puppeteer Test Pangkalahatang-ideya

Tosca Sangguni # 4: I-install ang Puppeteer

Tosca Sangguni # 5: Sample na Puppeteer Project

Sa Tutorial ng Puppeteer na ito, malalaman namin ang tungkol sa mga hakbang upang mai-install ang Puppeteer kasama ang mga dependency nito tulad ng pag-install ng NodeJs, pag-install ng editor para sa Puppeteer, atbp. Gayundin, pagkatapos ng pag-install, lilikha at isasagawa namin ang isang sample na proyekto ng Puppeteer.

I-install ang Puppeteer

Upang simulan ang pagbuo ng mga script ng Puppeteer, kailangan naming i-install at i-configure ang mga bahagi sa ibaba - 

1. I-install ang NodeJS

2. I-install ang Editor

3. I-install ang Puppeteer

I-install ang NodeJS:

Ang NodeJs ay isang libreng bukas na mapagkukunan ng server na kapaligiran na maaaring patakbuhin sa iba't ibang mga platform. Gumagamit ito ng javascript sa panig ng server. Ang Puppeteer ay isang uri ng aplikasyon ng NodeJS. Kaya ang unang hakbang ng pag-setup ng Puppeteer ay i-install ang balangkas ng NodeJS. Ang balangkas ng NodeJS ay magagamit para sa maraming mga platform, kabilang ang Windows, Ubuntu, macOS, atbp. Sa kontekstong ito, gagana kami sa bersyon para sa 64 bit Windows operating system. Ang mga hakbang upang mai-install ang NodeJS ay -

Hakbang1 # I-download ang NodeJS: I-click ang dito upang mag-navigate sa link ng pag-download ng NodeJS. Dito, mai-download namin ang 64 bit windows installer (.mts). 

Tutorial ng puppeteer - I-install ang NodeJs
Tutorial ng puppeteer - I-install ang NodeJs

Hakbang2 # I-install ang NodeJS: Matapos makumpleto ang pag-download, kailangan naming i-install ang NodeJs sa pamamagitan ng pag-double click sa file ng installer (.msi). Sa panahon ng pag-install, kailangan naming magpatuloy alinsunod sa mga tagubilin.

Hakbang3 # I-verify ang NodeJS: Matapos ang pagkumpleto ng pag-install, kailangan naming buksan ang prompt ng utos at ipasok ang utos bilang "node". Kung ang mga detalye sa ibaba ay lilitaw, ang pag-install ay tama. Kung sakali, kung mayroong anumang lilitaw na error, nangangahulugan iyon na ang pag-install ay hindi tama.

Tutorial ng puppeteer - I-verify ang NodeJs
Tutorial ng puppeteer - I-verify ang NodeJs

I-install ang Editor para sa Puppeteer:

Ang isang editor ay walang iba kundi isang tool na makakatulong sa amin na magsulat, sumulat at magpatakbo ng aming mga Puppeteer code. Maraming mga tool ang magagamit na maaaring magamit bilang isang editor ng java code na may kasamang Visual Studio Code, Note Pad ++, Edit Plus, atbp Kahit na maaari naming isulat ang puppeteer code sa default na application na "Note Pad" din. Sa tutorial na "I-install ang Puppeteer", gagamitin namin ang VSCode dahil libre ito at madaling katugma sa NodeJS Application. Ang VSCode ay walang iba kundi isang bahagi ng visual studio, na magagamit nang libre. Ang mga hakbang upang mai-install ang VSCode ay - 

Step1 # Downloadd VSCode: I-click ang dito upang buksan ang link sa pag-download at i-download ang nais na bersyon ng VSCode Installer ayon sa operating system.

Hakbang2 # I-install ang VSCode: I-install ang VSCode mula sa installer file sa system tulad ng anumang iba pang software. Sa panahon ng pag-install, magpatuloy lamang sa inirekumendang setting.

Hakbang2 # I-verify ang VSCode: Matapos ang pagkumpleto ng pag-install, buksan ang application upang suriin kung na-install nang tama.

Tutorial ng Puppeteer - Editor para sa Puppeteer
Tutorial ng Puppeteer - Editor para sa Puppeteer

I-install ang Mga Puppeteer Packages:

Mula sa bersyon v1.7.0 ng puppeteer, ang bawat paglabas ay naglalaman ng mas mababa sa dalawang mga pakete -

  • puppeteer-core na pakete
  • pakete ng puppeteer

Ang parehong mga bersyon ng Puppeteer ay maaaring mai-install gamit ang mga command ng console. Ang mga utos na i-install ang Puppeteer ay - 

I-install ang Puppeteer-core Package: Ito ay isang koleksyon ng Node JS library na binuo sa Java. Ito ay may kakayahang magtrabaho sa devtools protocol. Ang browser ng Chromium ay hindi nakakakuha ng pag-download habang ini-install ang puppeteer-core na pakete. Ang programmatic interface ng Puppeteer ay ganap na nag-mamaneho ng puppeteer-core library. Ang isa pang mahalagang limitasyon ay ang mga tampok na puppeteer-core na hindi mababago ng pagbabago ng alinman sa mga variable ng kapaligiran na PUPPETEER_ *. 

Utos ng Pag-install: nag-install ng puppeteer-core

tandaan: Ang tool na Node JS ay kailangang mai-install bago i-install ang puppeteer-core na pakete.

I-install ang Puppeteer Product Package: Ang Puppeteer ay ang kumpletong produkto na binuo ng Google upang makontrol ang mga browser ng Chrome. Ang pagiging kumpletong pakete ng produkto ng Puppeteer, ang mga pinakabagong bersyon ng chromium browser ay nai-download sa panahon ng pag-install. Pagkatapos nito ang pag-install ay hinihimok ng puppeteer-core. Posibleng ipasadya ang mga tampok ng Puppeteer sa pamamagitan ng pagbabago ng mga variable ng kapaligiran ng PUPPETEER_ *. 

Utos ng Pag-install: mag-install ng puppeteer

Sa tutorial na "I-install ang Puppeteer", gagana kami sa pag-install ng package ng Puppeteer dahil walang maraming pagkakaiba sa pagitan ng dalawang bersyon na ito.

Sample na Puppeteer Project

Ang Puppeteer ay katugma sa parehong headful (non-headless) at mga headless chrome browser. Sa kaso ng walang ulo, ang mga aktibidad ng browser ay ginaganap sa background ibig sabihin, ang browser UI ay hindi nakikita sa amin. Ginagawa nitong mas simple at madali ang bagay (pagkontrol sa browser) sa iisang hakbang. Nangangahulugan ito, ang parehong bagay (pagkontrol sa mga browser) ay maaaring gawin sa maraming mga kumplikadong hakbang.

Ang mga hakbang na kasangkot sa pag-setup ng sample na proyekto ng Puppeteer ay ipinapakita sa ibaba - 

Step1 # Lumikha ng isang istraktura ng folder para sa Sample na Puppeteer Project: Lumikha ng isang sample ng direktoryo ng ugat na may pangalang "SampleProject" sa isang paunang natukoy na landas. Ang direktoryo ng ugat na ito ay kikilos bilang isang Halimbawang Puppeteer Project. Susunod, pagkatapos buksan ang prompt ng utos, kailangan naming mag-navigate sa root direktoryo na ito.

Hakbang2 # I-install ang Puppeteer: Gamit ang utos sa ibaba, maaari naming mai-install ang buong pakete ng Puppeteer sa direktoryo ng ugat. Karaniwang nai-download ng utos na ito ang lahat ng mga open-source na aklatan ng NodeJS sa halimbawang proyekto folder. Ang pamamaraan ng pag-install ay tumatagal ng ilang oras batay sa bilis ng network. Magda-download ito ng humigit-kumulang na 350MB ng data. Matapos ang pag-install, ang folder ng node_modules, na naglalaman ng iba't ibang mga sangkap ng puppeteer at package-lock.json file, ay malilikha sa halimbawang folder ng root ng proyekto ng Pupeteer.

Tutorial ng puppeteer - Pag-install ng Log
Tutorial ng puppeteer - Pag-install ng Log

Step3 # Lumikha ng Sample na Script ng Puppeteer: Ngayon, magsusulat kami ng isang sample na script ng puppeteer na nag-aanyaya ang LambdaGeeks website, ipinapakita ang mga mensahe ng console pagkatapos ng bawat hakbang, at makuha ang screenshot. Sa halimbawang ito, ang isang walang ulo na chromium-browser ay tatawagin sa background. Ang halimbawang Puppeteer Script ay magiging - 

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');
 });

Ang code na ito ay kailangang maiimbak sa direktoryo ng ugat ng Sample na proyekto ng puppeteer na may pangalan ng file sample_script.js. Isama ang Puppeteer-core, kailangan nating isama ang 'puppeteer-core' sa halip na 'puppeteer' sa simula pa lamang ng script. Para sa headful browser, kailangan naming palitan ang code na "{headless:true}” with “{headless:false}”.

Step4 # Ipatupad ang Sample na Script ng Puppeteer: Ang sample script ay maaaring maipatupad mula sa prompt ng utos gamit ang ibaba na utos -

npm node sample_script.js

Matapos ang pagpapatupad, ang screenshot ay makukuha at maiimbak sa direktoryo ng ugat bilang "'screenshot_lambda.png".

Tutorial ng puppeteer - Sample na Puppeteer Project
Tutorial ng puppeteer - Sample na Puppeteer Project

Ipapakita namin ngayon ang isa pang sample na script ng Puppeteer sa amazon web application. Gaganap ang script na ito sa ibaba ng mga hakbang kasama ang mga pag-verify sa bawat hakbang -

  • Patawag sa aplikasyon ng Amazon.
  • Maghanap ng isang paunang natukoy na libro.
  • Idagdag ang hinahanap na libro sa cart.
  • Buksan ang cart at suriin kung ang libro ay magagamit sa cart.
  • Kunan ang screen at isara ang browser.

Dadaan lang kami sa script sa ibaba. Malalaman natin sa mga detalye tungkol sa iba't ibang mga hakbang upang maisagawa sa susunod na artikulo. Ang sample na iskrip ay ipinapakita sa ibaba -

/**
 * @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)
}

tandaan: Ipapaliwanag namin ang mga hakbang sa detalye upang sumulat ng mga script sa mga susunod na artikulo.

Paghihinuha:

Sa panimulang artikulong ito tungkol sa "I-install ang Puppeteer" mula sa "Puppeteer Tutorial", ipinaliwanag namin ang tungkol sa detalyadong mga hakbang upang mai-install ang iba't ibang mga pakete ng Puppeteer mula sa simula. Kasama sa pag-setup ng puppeteer ang iba't ibang mga pag-install ng sangkap tulad ng, pag-install ng NodeJs, pag-install ng VSCode, pag-install ng Puppeteer, paglikha at pagpapatupad ng proyekto ng sample na Puppeteer. Sa susunod na tutorial ng Puppeteer, ipaliwanag namin ang detalyadong mga hakbang upang magamit ang Puppeteer bilang isang tool sa pag-scrap ng web. Paki-klik  dito upang basahin mula sa sanggunian portal.

Tungkol kay K Mondal

I-install ang Puppeteer - Isang Mahusay na Gabay sa Pag-aaral ng Puppeteer Tutorial 4 & 5Kumusta, ako si K. Mondal, naiugnay ako sa isang nangungunang samahan. Mayroon akong 12+ taon na karanasan sa pagtatrabaho sa mga domain hal, pag-unlad ng application, pagsubok sa automation, IT Consultant. Lubhang interesado akong matuto ng iba't ibang mga teknolohiya. Narito ako upang matupad ang aking hangarin at kasalukuyang nagbibigay ng kontribusyon bilang isang May-akda at Developer ng Website kapwa sa LambdaGeeks.
Kumonekta sa LinkedIn- https://www.linkedin.com/in/kumaresh-mondal/

Mag-iwan ng komento

Ang iyong email address ay hindi ilalathala. Ang mga kailangang field ay may markang *

en English
X