Puppeteer: 초보자를 위한 데이터 크롤링

Puppeteer는 DevToolsProtocol을 통해 Chrome에 고급 API를 제공하는 NodeJs 라이브러리입니다.

많이 하는거야

webapps에서 데이터 크롤링

스크린샷 및 PDF 생성

자동화된 최신 테스트 환경을 만듭니다. 최신 JavaScript 및 브라우저 기능을 사용하여 최신 버전의 Chrome에서 직접 테스트를 실행하십시오.

양식 제출, UI 테스트, 키보드 입력 등 자동화

자동화 및 크롤링에 대한 자습서를 살펴보겠습니다.

인형극 설정

lib를 실행하기 위해 구조가 어떻게 보이는지 아는 것이 일반적입니다.
그래서 Puppeter는 약속에 의존합니다.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

puppeteer.launch() 메서드를 호출하여 브라우저를 엽니다.
그런 다음 모든 작업을 수행할 페이지를 열도록 요청합니다.
goto() 웹 사이트로 이동
우리가 사용할 모든 메소드는 페이지 객체에 제공됩니다.

크롤링 데이터

데이터를 크롤링하려면 다음을 알아야 합니다.
그래서 우리는 우리가 DOM을 다루는 ID나 태그 또는 속성을 사용하여 선택한다는 것을 알고 싶습니다.

그래서 환경을 만들자

mkdir book-scraper
cd book-scraper
npm init -y
npm install --save puppeteer

브라우저 인스턴스 설정

브라우저를 열면 클릭 및 입력과 같은 상호 작용을 할 수 있습니다. 헤드리스 크롬은 동일한 작업을 수행하지만 프로그래밍 방식입니다.

우리는 필요할 것입니다

four .js file
browser.js
main.js
pageScraper.js
PageController.js

browser.js부터 시작해 봅시다

const pupt= require('puppeteer');

async function startBrowser(){
    let browser
    try{
        browser = await pupt.launch({
            headless:false, // defualt
            'ignoreHTTPSErrors':true
        })
    }
    catch(err){
        console.error(err)
    }

    return browser;
}

module.exports = {
    startBrowser
};

headless:false를 만드는 것은 스크립트가 프로세스를 보기 위해 실행되는 동안 인터페이스를 볼 수 있음을 의미합니다.
main.js 파일을 실행하여 브라우저 인스턴스를 실행해 보겠습니다.

const browser= require('./bowser')
const scraperController= require('./pageController'); // we will make it later

let browserInstance = browser.startBrowser();

// we want to to controle this browser, so we will do a function to do that
// so we have to pass it there

scraperController(browserInstance);

브라우저와 상호 작용하는 방법을 알아보기 위해 'pageController.js' 파일을 실행해 보겠습니다.

const pageScraper= require('./pageScraper');

async function scrapeAll(browserInstance){
    let browser;

    try{
        browser=await browserInstance;
        await pageScraper.scraper(browser);
    }
    catch(err){
        console.error("There's a problem with browser Instance => ", err)
    }
}

module.exports=(browserInstance) => scrapeAll(browserInstance)

우리는 browserInstance를 인수로 사용하는 메서드를 내보냅니다.
pageScraper.js 파일을 만들어 데이터를 긁어 봅시다

const scrapeObject={
    url:'http://books.toscrape.com',
    async scraper(browser){
        let page= await browser.newPage();
        console.log(`navigating to ${this.url}..`)
        await page.goto(this.url);
    }
}
module.exports=scrapeObject

이것은 웹 크롤러를 구축하기 위한 기본 구조입니다.

github를 통해 복제할 수 있습니다pupt starter.

페이지에서 데이터 스크랩

먼저 브라우저 내부의 개발자 도구를 사용하여 홈페이지의 소스 코드를 검사하면 페이지의 섹션 태그 아래에 각 책의 데이터가 나열되어 있음을 알 수 있습니다. 섹션 태그 내에서 모든 책은 목록(li) 태그 아래에 있으며 여기에서 책의 전용 페이지, 가격 및 재고 가용성에 대한 링크를 찾을 수 있습니다.



파일을 편집하고 파일을 다시 엽니다pageScraper.js.

const scrapeObject={
    url:'http://books.toscrape.com',
    async scraper(browser){
        let page= await browser.newPage();
        console.log(`navigating to ${this.url}..`)
        await page.goto(this.url);

        // wait fot the DOM to render
        await page.waitForSelector('.page_inner')
        //Get the link to all selected books
        let urls= await page.$$eval('section ol > li',links =>{
            // Make sure the book is in stock 
            links=links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
            // Extract the links from the data
            links=links.map(el => el.querySelector('h3 > a').href)
            return links;
        })
        console.log(urls);
    }
}
module.exports=scrapeObject;

// run this command
node main.js

명확하게 작동해야합니다

책에 대한 모든 데이터를 스크랩하자

pageScraper.js 파일 수정

const scraperObject = {
    url: 'http://books.toscrape.com',
    async scraper(browser){
        let page = await browser.newPage();
        console.log(`Navigating to ${this.url}...`);
        // Navigate to the selected page
        await page.goto(this.url);
        // Wait for the required DOM to be rendered
        await page.waitForSelector('.page_inner');
        // Get the link to all the required books
        let urls = await page.$$eval('section ol > li', links => {
            // Make sure the book to be scraped is in stock
            links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
            // Extract the links from the data
            links = links.map(el => el.querySelector('h3 > a').href)
            return links;
        });


        // Loop through each of those links, open a new page instance and get the relevant data from them
        let pagePromise = (link) => new Promise(async(resolve, reject) => {
            let dataObj = {};
            let newPage = await browser.newPage();
            await newPage.goto(link);
            dataObj['bookTitle'] = await newPage.$eval('.product_main > h1', text => text.textContent);
            dataObj['bookPrice'] = await newPage.$eval('.price_color', text => text.textContent);
            dataObj['noAvailable'] = await newPage.$eval('.instock.availability', text => {
                // Strip new line and tab spaces
                text = text.textContent.replace(/(\r\n\t|\n|\r|\t)/gm, "");
                // Get the number of stock available
                let regexp = /^.*\((.*)\).*$/i;
                let stockAvailable = regexp.exec(text)[1].split(' ')[0];
                return stockAvailable;
            });
            dataObj['imageUrl'] = await newPage.$eval('#product_gallery img', img => img.src);
            dataObj['bookDescription'] = await newPage.$eval('#product_description', div => div.nextSibling.nextSibling.textContent);
            dataObj['upc'] = await newPage.$eval('.table.table-striped > tbody > tr > td', table => table.textContent);
            resolve(dataObj);
            await newPage.close();
        });

        for(link in urls){
            let currentPageData = await pagePromise(urls[link]);
            // scrapedData.push(currentPageData);
            console.log(currentPageData);
        }
        await browser.close();
    }
}

module.exports = scraperObject;

이것은 웹 페이지에서 데이터를 크롤링하는 것에 관한 것입니다.

githubFull code에서 찾을 수 있습니다.