웹 개발은 지난 10 년 동안 백엔드 및 프런트 엔드 개발을 위한 많은 프레임 워크를 통해 엄청난 속도로 진행되었습니다. 웹 사이트는 더욱 스마트해졌고 웹 사이트 개발에 사용되는 기본 프레임 워크도 있습니다.
https://blog.datahut.co/web-scraping-headless-browser-puppeteer/
웹 개발의 이러한 모든 발전으로 인해 브라우저 자체도 개발되었습니다.
이제 대부분의 브라우저는 사용자가 UI없이 웹 사이트와 상호 작용할 수 있는 "헤드리스"버전으로 제공됩니다. puppeteer 및 nodeJS와 같은 패키지를 사용하여 이러한 헤드리스 브라우저에서도 웹 사이트를 스크랩 할 수 있습니다.
웹 개발은 품질 검사를 프로덕션 환경으로 보내기 전에 테스트 메커니즘에 크게 의존합니다. 복잡한 웹 사이트는 어디에나 배포하기 전에 복잡한 테스트 모음 구조가 필요합니다. 헤드리스 브라우저는 UI의 오버 헤드가 없기 때문에 웹 개발과 관련된 테스트 시간을 상당히 줄여줍니다. 이러한 브라우저를 사용하면 더 짧은 시간에 더 많은 웹 페이지를 처리 할 수 있습니다.
이 블로그에서는 nodeJS 및 비동기 프로그래밍을 사용하여 이러한 헤드리스 브라우저에서 웹 사이트를 스크랩 하는 방법을 배웁니다. 웹 사이트 스크래핑을 시작하기 전에 헤드리스 브라우저에 대해 좀 더 자세히 알아 보겠습니다. 또한 스크래핑의 합법성에 대해 우려되는 경우 웹 스크래핑에 대한 신화를 제거 할 수 있습니다.
헤드리스 브라우저란?
헤드리스 브라우저는 사용자 인터페이스가 없는 단순한 브라우저입니다. 일반 브라우저와 마찬가지로 헤드리스 브라우저는 웹 사이트를 렌더링 하는 모든 기능으로 구성됩니다. GUI를 사용할 수 없기 때문에 브라우저와 상호 작용하려면 명령줄 유틸리티를 사용해야 합니다. 헤드리스 브라우저는 자동화 테스트와 같은 작업을 위해 설계되었습니다.
헤드리스 브라우저는 웹 기반 자동화 테스트와 같은 작업을 수행하는 데 더 유연하고 빠르며 최적화됩니다. UI의 오버 헤드가 없기 때문에 헤드리스 브라우저는 이러한 작업을 더 빠르게 실행할 수 있으므로 자동화 된 스트레스 테스트 및 웹 스크래핑에 적합합니다.
PhantomJS, HtmlUnit과 같은 공급 업체는 오랫동안 헤드리스 브라우저 기능을 제공하는 시장에 있었지만, chrome 및 firefox와 같은 브라우저 플레이어도 이제 "헤드리스"버전의 브라우저를 제공하고 있습니다.
따라서 헤드리스 기능을 위해 추가 브라우저를 설치할 필요가 없습니다.
헤드리스 브라우저의 필요성
웹 개발 프레임 워크의 발전으로 브라우저는 모든 자바 스크립트 라이브러리를 로드 할 수 있을 뿐만 아니라 더 똑똑해졌습니다. 웹 개발 기술의 모든 발전과 함께 웹 사이트 테스트가 발전하여 웹 개발 산업의 필수 요소 중 하나로 부상했습니다. 헤드리스 브라우저의 진화를 통해 다음 애플리케이션을 수행 할 수 있습니다.
1. 웹 애플리케이션을 위한 테스트 자동화
종단 간 테스트는 응용 프로그램의 흐름이 처음부터 끝까지 설계된 대로 수행되는지 여부를 테스트하는 데 사용되는 방법론입니다. 종단 간 테스트를 수행하는 목적은 시스템 종속성을 식별하고 다양한 시스템 구성 요소와 시스템간에 올바른 정보가 전달되는지 확인하는 것입니다. 헤드리스 브라우저는 CLI를 사용하여 더 빠른 웹 테스트를 가능하게 하므로 이 사용 사례를 충족하도록 설계되었습니다.
2. 웹 사이트 스크래핑
헤드리스 브라우저는 UI를 여는 오버 헤드를 처리 할 필요가 없기 때문에 웹 사이트를 더 빠르게 스크래핑 할 수 있습니다. 헤드리스 브라우저를 사용하면 스크래핑 메커니즘을 자동화하고 훨씬 더 최적화 된 방식으로 데이터를 추출 할 수 있습니다.
3. 웹 스크린 샷 찍기
헤드리스 브라우저는 GUI 경험을 제공 하지 않을 수 있지만 사용자는 렌더링 중인 웹 사이트의 스냅 샷을 찍을 수 있습니다. 자동화 테스트를 수행하고 웹 사이트에서 코드 효과를 시각화 하고 결과를 스크린 샷 형식으로 저장하려는 경우에 확실히 도움이 됩니다. 실제 UI없이 많은 수의 스크린 샷을 찍는 것은 헤드리스 브라우저를 사용하는 것입니다.
4. 웹 사이트에서 사용자 여정 매핑
뛰어난 고객 경험을 성공적으로 제공하는 회사는 경쟁사보다 지속적으로 더 나은 성과를 냅니다. 헤드리스 브라우저를 사용하면 고객 여정 테스트 사례를 매핑 하는 프로그램을 실행하여 웹 사이트에서 의사 결정 과정 전반에 걸쳐 사용자 경험을 최적화 할 수 있습니다.
Puppeteer는 무엇입니까
Puppeteer는 Chrome 또는 Chromium을 제어하기 위한 DevTools 프로토콜이 있는 API 라이브러리입니다. 일반적으로 헤드리스이지만 전체적으로 (헤드리스가 아닌) Chrome 또는 Chromium을 작동하도록 설정할 수 있습니다. 또한 Puppeteer는 헤드 (UI)없이 Chrome 인스턴스를 모니터링 하는 데 사용할 수 있는 노드 라이브러리입니다.
우리는 내부적으로 Chrome을 사용하지만 프로그래밍 방식으로 JavaScript를 사용합니다. Puppeteer는 Chrome 팀의 공식 Chrome 헤드리스 브라우저입니다. 초기화 될 때 새로운 Chrome 예제를 깨뜨리기 때문에 가장 효과적이지 않을 수 있습니다. 이것은 실제 네비게이터를 사용하기 때문에 Chrome 테스트를 자동화하는 가장 정확한 방법입니다.
Puppeteer를 사용한 웹 스크래핑
이 기사에서는 인형을 사용하여 웹 사이트에서 제품 목록을 긁어냅니다. Puppeteer는 헤드리스 크롬 브라우저를 사용하여 웹 페이지를 열고 모든 결과를 쿼리 합니다. 실제로 웹 스크래핑을 위한 인형극 구현을 시작하기 전에 설정 및 설치를 살펴 보겠습니다.
그 후 전자 상거래 웹 사이트로 이동하여 제품을 검색하고 모든 결과를 스크랩 하는 간단한 사용 사례를 구현합니다. 위의 모든 작업은 puppeteer 라이브러리를 사용하여 프로그래밍 방식으로 처리됩니다. 또한 위에서 정의한 작업을 수행하기 위해 nodeJS 언어를 사용할 것입니다.
puppeteer 설치
설치부터 시작하겠습니다. Puppeteer는 노드 자바 스크립트 라이브러리이므로 머신에 노드 js를 설치해야 합니다. Node js는 puppeteer 패키지를 설치하는 데 도움이 되는 npm (노드 패키지 관리자)과 함께 제공됩니다.
다음 코드 스니펫은 노드 js 설치에 도움이 됩니다.
## Updating the system libraries ##sudo apt-get update## Installing node js in the system ##sudo apt-get install nodejs 아래 명령을 사용하여 puppeteer 패키지를 설치할 수 있습니다.
npm install --save puppeteer
이제 모든 종속성이 설치되었으므로 puppeteer를 사용하여 스크래핑 사용 사례를 구현할 수 있습니다. 우리는 puppeteer 패키지로 구동 되는 노드 JS 프로그램을 사용하여 웹 사이트에서 작업을 제어 할 것입니다.
puppeteer을 사용하여 제품 목록 스크랩
1 단계 : 페이지 방문 및 제품 검색
이 섹션에서는 먼저 puppeteer을 조종하는 개체를 초기화합니다. 이 개체는 puppeteer 패키지에서 사용할 수 있는 모든 유틸리티 함수에 액세스 할 수 있습니다. 이 섹션에서 우리 프로그램은 웹 사이트를 방문한 다음 웹 사이트에서 제품 검색 창을 검색합니다. 검색 요소를 찾으면 검색 창에 제품 이름을 입력하고 결과를 로드 합니다. 명령 줄 인수를 사용하여 프로그램에 제품 이름을 지정했습니다.
const puppeteer = require('puppeteer');const browser = await puppeteer.launch();const page = await browser.newPage();var args = process.argv[2]await page.click('button.mobile__nav__row--btn-search')await page.type('input#js-site-search-input', args)await page.keyboard.press('Enter');await page.screenshot({path: 'sample.png'})2 단계 : 항목 목록 스크랩
이 섹션에서는 주어진 제품을 검색 한 후 얻은 제품 목록을 스크랩 합니다. HTML 선택기는 웹 콘텐츠를 캡처 하는 데 사용되었습니다. 스크랩 된 모든 결과는 데이터 세트를 만들기 위해 함께 수집되었습니다. querySelector 함수를 사용하면 HTML 선택기를 사용하여 웹 페이지에서 콘텐츠를 추출 할 수 있습니다. querySelectorAll 함수는 특정 선택기로 표시된 모든 콘텐츠를 가져 오는 반면, querySelector 함수는 첫 번째 일치하는 요소 만 반환합니다.
let urls = await page.evaluate(() = {let results = [];let items = document.querySelectorAll('li.product__list--item');items.forEach((item) = { let name = item.querySelector('a.product__list--name').innerText let price = item.querySelector('span.pdpPrice').innerText let discount = item.querySelector('div.listingDiscnt').innerText results.push({ prod_name: name, prod_price: price, prod_discount: discount }); });return results;})전체 코드
다음은 구현의 전체 작업 샘플입니다. 실행 함수에서 전체 로그인을 래핑하고 스크랩 된 결과를 콘솔에 기록하고 있습니다.
const puppeteer = require('puppeteer');function run () { return new Promise(async (resolve, reject) ={ try { const browser = await puppeteer.launch(); const page = await browser.newPage(); var args = process.argv[2] await page.click('button.mobile__nav__row--btn-search') await page.type('input#js-site-search-input', args) await page.keyboard.press('Enter'); await page.screenshot({path: 'sample.png'}) let urls = await page.evaluate(() = { let results = []; let items = document.querySelectorAll('li.product__list--item'); items.forEach((item) = { let name = item.querySelector('a.product__list--name').innerText let price = item.querySelector('span.pdpPrice').innerText let discount = item.querySelector('div.listingDiscnt').innerText results.push({ prod_name: name, prod_price: price, prod_discount: discount }); }); return results; }) browser.close(); return resolve(urls); } catch (e) { return reject(e); } })}run().then(console.log).catch(console.error);스크립트 실행
아래 명령을 사용하여 헤드리스 브라우저로 위의 인형극 스크립트를 실행할 수 있습니다. nodejs를 사용하여 코드를 실행합니다. 주어진 웹 사이트에서 검색하고 결과를 긁어 내야 하는 데이터가 있는 제품 이름 뒤에 키워드 노드와 파일 이름을 언급하기 만하면 됩니다.
이 예에서는 Croma 웹 사이트에서 iPhone을 검색 한 다음 제품 목록을 스크랩 합니다.
node headlessScrape.js iphones
Output
위 코드의 출력은 다음과 같이 시각화 할 수 있습니다.
신뢰할 수 있는 스크래핑 파트너로서의 Datahut
데이터를 직접 스크랩 하는 데 도움이 되는 많은 도구가 있습니다. 하지만 최소한의 기술 노하우로 전문적인 지원이 필요한 경우 Datahut이 도움을 드릴 수 있습니다. Google은 헤드리스 및 비 헤드리스 브라우저 모두에서도 비동기 웹 스크래핑 기술을 사용하여 웹에서 실시간으로 데이터를 추출하기 위한 체계적이고 투명한 프로세스를 보유하고 있으며 원하는 형식으로 제공합니다. 우리는 다양한 산업 분야의 기업을 도왔습니다. 채용 산업 Python / 소매 솔루션에 대한 지원에서 Datahut은 이러한 사용 사례 대부분을 위한 정교한 솔루션을 설계했습니다.
너무 늦기 전에 운영에서 데이터 스크래핑을 사용하는 악 대차에 동참해야 합니다. 조직의 성과를 높이는 데 도움이 됩니다. 또한 현재 알 수 없는 통계를 도출하는 데 도움이 됩니다. 이를 통해 비즈니스 프로세스에서 정보에 입각 한 의사 결정을 내릴 수 있습니다.
요약
nodeJS의 인형 패키지를 사용하여 헤드리스 브라우저에서 데이터를 스크랩 하는 방법을 배웠습니다. 최종적으로 콘텐츠를 긁어 내기 전에 웹 사이트에서 몇 가지 작업을 자동화하기 위해 일부 자동화 작업도 수행했습니다. 헤드리스 브라우저는 아직 초기 단계이지만 자동화 된 웹 스크래핑 및 웹 테스트 분야에서 많은 가능성을 보여줍니다. 헤드리스 브라우저를 통한 빠른 웹 스크래핑은 서버 비용 측면에서 시장의 다른 플레이어 보다 경쟁 우위를 차지하는 데 도움이 됩니다.
등록된 댓글이 없습니다.
